ブログにTwitterの「フォローする」ボタンを設置しよう
おすっ！つな（@tu_na_69）です(*^-^*)
みなさんはブログとTwitterを連携させていますか？
もうやってますよね。そうですよね。
サイトにTwitterのフォローボタンをまだ設置していないよ・・・
という方がいましたら、そんな方はちょっと読んでみてください。
ブログを書いている人の多くは、TwitterなどのSNSも同時に利用しているのではないでしょうか。それぞれ別々に活動させるのはもったいないです。
連携させて活用してみましょう。
はてなブログの場合は、クリックぽんっ！で簡単に連携させることができます。
プロフィールに「フォロー」ボタンを入れるのもお手軽なのです。
ほかのブログやWordpressのサイトでもTwitterの公式サイトを利用して、Twitterボタンを作ることができます。
ボタンの埋め込みコードを作る
Twitterのタイムラインを埋め込むためのコードを作ります。
↓「Twitter publish」のサイトはこちら
①空欄にTwitterのURLを入力して「enter」を押します。
注：アカウントではありません。
URLです。
わたしのアカウントを例にすると↓こちらがURLになります。
「/」より後ろの「tu_na_69」の部分を自分のTwitterアカウントに変更すればOKです。
よろしければフォローもどうぞよろしくお願いします(・∀・)
②タイムライン表示を選んでクリックします。
右の「ツイッターボタン」を選びます。
③「フォローボタン」または「メンションボタン」を選びます。
「フォローする」ボタンが欲しい時は左の「フォローボタン」をクリック。
④コードをコピーします。
↑上の画面でどちらを選択しても同じようなコード画面が表示されます。
「Copy Code」をクリックして、コードをコピーします。
Follow ⇒ フォローする
コピーしたコードをそのまま貼り付けると、このようになります。
ボタンの表示が「Follow＠～～」と英語表記になっています。「Follow」の英語表記を「フォローする」という日本語に変更します。
コードを貼り付ける前にここでメモを使って書き換えします。
直接書き換えてもOKですが、初心者のうちはメモ帳を使って書き換えるのがおすすめです。
このままでもOKという人は、ここは読まなくてもいいです。素通りして次のコード貼り付けにジャンプしてください。
①メモ帳やテキストエディターのソフトを開きます。
②コピーしたコードを貼り付けます。
③<a href="">～</a>の間の囲み部分の文字を書き換えます。
画像でいうと「Follow@tu_ne69」の部分です。
「＠～」以下のアカウントは残した方がいいです。
「フォローする＠tu_na_69」に変更しました。
「＠tu_na_69さんをフォロー」もいいですね。
④書き換えしたコードをコピーします。
コードを貼り付ける
ブログに「フォローする」ボタンを貼り付けます。
サイドバーや記事下など、貼り付けたいところを選びます。
サイドバーに自由に貼り付けしたい方は、Instagramウィジェットと同じやり方なので、こちらの記事を読んでいただいた方が詳しいかも。
はてなブログのサイドバーに貼り付ける
はてなブログでは、プロフィールに簡単にTwitterのフォローボタンを設置することができます。プロフィールのウィジェットを利用しない人は、HTMLを使って好きなところにフォローボタンを設置してみてください。
①ダッシュボードの「デザイン」→「カスタマイズ」→「サイドバー」をクリック。
②一番下にある「+モジュールを追加」をクリック。
③</>HTMLをクリック
④タイトルを入力。好きなタイトルを入力してください。
⑤コピーしたコードを貼り付けます。
⑥「適用」をクリックして完了です。
FC2ブログのプロフィールに貼り付ける
①管理画面から「設定」→「プラグインの設定」→「公式プラグインの追加」をクリックします。
PC用、ケータイ用スマートフォン用とそれぞれ設定します。少し面倒ですが、貼り付けるだけなので、すぐできますよ。がんばって！ ②プラグインの中から「プロフィール」の「追加」をクリックします。
③【HTMLの編集】をクリックします。
上級者向けと書かれていますが、恐れず進みましょう。大丈夫です。
④すでに記入されているコードの下に、さきほどコピーしたコードを貼り付け、「設定」をクリックして完了です。
まとめ
こんな感じでボタンが表示されました。
はてなブログやほかの無料ブログでも同じように設置できます。
Twitterとブログを連携させて、活用してみましょう(^o^)丿
記事を紹介しくれたサイト
この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。
- はてなブログ無料版＊初心者におすすめのカスタマイズ＊かっこいいブログデザイン - ふなさんブログ
- 《38》【twitter】ツイッターのフォローボタンに表示されてるIDを変えたいとき【ツイッター】 - まろやん blog
- はてなブログ初心者専用！カスタマイズやデザイン方法 まとめ - TomoGのごちゃまぜ倉庫
- 自己紹介（はじめての方はどうぞ） - 鯖缶＠3rd＆forever
- 【ブログ】はてな用Twitterアカウントを開設してみたんだ♪(●´ω｀●)☆彡～アクセスアップに最適？！はてなブログとTwitterの連携方法を大公開しちゃうぞ♪～ - ゆるふわSEの日常♪
- twitter初心者によるtwitter初心者のためのtwitter用語集【つまり備忘録】 - ゴリラの村
- 【はてなブログ】サイドバーのプロフィール画像を大きくするにはどうすればいい？ - 音楽の楽しさを共有したいブログ
