つなろっく

大学生つなの「イロトリドリでロックな毎日」ブログ

ブログにTwitterの「フォローする」ボタンを設置しよう

ブログにTwitterボタン「フォローする」を設置しよう

おすっ!つな(@tu_na_69)です(*^-^*)

みなさんはブログとTwitterを連携させていますか?

 

もうやってますよね。そうですよね。

サイトにTwitterのフォローボタンをまだ設置していないよ・・・

という方がいましたら、そんな方はちょっと読んでみてください。

ブログを書いている人の多くは、TwitterなどのSNSも同時に利用しているのではないでしょうか。それぞれ別々に活動させるのはもったいないです。

連携させて活用してみましょう。

 はてなブログの場合は、クリックぽんっ!で簡単に連携させることができます。

プロフィールに「フォロー」ボタンを入れるのもお手軽なのです。

pea-nut.hatenablog.com

 

ほかのブログやWordpressのサイトでもTwitterの公式サイトを利用して、Twitterボタンを作ることができます。

 

 

ボタンの埋め込みコードを作る

Twitterのタイムラインを埋め込むためのコードを作ります。

↓「Twitter publish」のサイトはこちら

Twitter Publish

 

①空欄にTwitterのURLを入力して「enter」を押します。

 

Twitter publish

 

注:アカウントではありません。

URLです。

わたしのアカウントを例にすると↓こちらがURLになります。

https://twitter.com/tu_na_69

「/」より後ろの「tu_na_69」の部分を自分のTwitterアカウントに変更すればOKです。

 

よろしければフォローもどうぞよろしくお願いします(・∀・)

 

②タイムライン表示を選んでクリックします。

Twitter publish

右の「ツイッターボタン」を選びます。

 

③「フォローボタン」または「メンションボタン」を選びます。

f:id:pea-nut:20180210090640p:plain

 

「フォローする」ボタンが欲しい時は左の「フォローボタン」をクリック。

 

④コードをコピーします。

↑上の画面でどちらを選択しても同じようなコード画面が表示されます。

 

f:id:pea-nut:20180207093251p:plain

「Copy Code」をクリックして、コードをコピーします。

 

Follow ⇒ フォローする

コピーしたコードをそのまま貼り付けると、このようになります。

 

 

ボタンの表示が「Follow@~~」と英語表記になっています。「Follow」の英語表記を「フォローする」という日本語に変更します。

コードを貼り付ける前にここでメモを使って書き換えします。

直接書き換えてもOKですが、初心者のうちはメモ帳を使って書き換えるのがおすすめです。

 

このままでもOKという人は、ここは読まなくてもいいです。素通りして次のコード貼り付けにジャンプしてください。

①メモ帳やテキストエディターのソフトを開きます。

②コピーしたコードを貼り付けます。

③<a href="">~</a>の間の囲み部分の文字を書き換えます。

f:id:pea-nut:20180210085335p:plain

 

画像でいうと「Follow@tu_ne69」の部分です。

「@~」以下のアカウントは残した方がいいです。

「フォローする@tu_na_69」に変更しました。

「@tu_na_69さんをフォロー」もいいですね。

 

④書き換えしたコードをコピーします。

 

コードを貼り付ける

ブログに「フォローする」ボタンを貼り付けます。

サイドバーや記事下など、貼り付けたいところを選びます。

サイドバーに自由に貼り付けしたい方は、Instagramウィジェットと同じやり方なので、こちらの記事を読んでいただいた方が詳しいかも。

pea-nut.hatenablog.com

はてなブログのサイドバーに貼り付ける

はてなブログでは、プロフィールに簡単にTwitterのフォローボタンを設置することができます。プロフィールのウィジェットを利用しない人は、HTMLを使って好きなところにフォローボタンを設置してみてください。

 

 ①ダッシュボードの「デザイン」→「カスタマイズ」→「サイドバー」をクリック。

②一番下にある「+モジュールを追加」をクリック。

 ③</>HTMLをクリック

④タイトルを入力。好きなタイトルを入力してください。

⑤コピーしたコードを貼り付けます。

⑥「適用」をクリックして完了です。

 

 FC2ブログのプロフィールに貼り付ける

①管理画面から「設定」→「プラグインの設定」→「公式プラグインの追加」をクリックします。

PC用、ケータイ用スマートフォン用とそれぞれ設定します。少し面倒ですが、貼り付けるだけなので、すぐできますよ。がんばって! ②プラグインの中から「プロフィール」の「追加」をクリックします。

f:id:pea-nut:20180210093939p:plain

③【HTMLの編集】をクリックします。

上級者向けと書かれていますが、恐れず進みましょう。大丈夫です。

④すでに記入されているコードの下に、さきほどコピーしたコードを貼り付け、「設定」をクリックして完了です。

まとめ

 こんな感じでボタンが表示されました。

 

 はてなブログやほかの無料ブログでも同じように設置できます。

Twitterとブログを連携させて、活用してみましょう(^o^)丿

 

 記事を紹介しくれたサイト

この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。