Bloggerにtwitterのフォローボタンをつける

2015/12/18

Blogger twitter ブログ

t f B! P L
AppTanです。

ブログの更新に気が付いてもらうための一つの方法としてtwitterで伝える方法があります。

ブログ更新をフォロワーに伝えるわけです。そこで、興味を持ってくれた方の手間を減らし簡単にフォローしてくださるように、ブログにフォローボタンをつけることにします。

このブログはBloggerを利用していますので、Bloggerを例にボタンの付け方を説明します。

手順

  1. twitterのサイトでフォローボタンを作成する
  2. 作成したボタンのhtmlをbloggerで配置する

twitterのサイトでフォローボタンを作成する

twitterリンクボタン」にアクセスします。

ボタンの選択画面が表示されます。今回はフォローするボタンを作成したいので、「フォローする」を選びます。すると、次のようなオプション画面が表示されます。

twitterのユーザ名が正しいかを確認します。複数のユーザIDを持っている場合は思ったのと違うユーザでボタンが作成されてしまうかもしれませんので、必ず確認するようにします。その後、お好みでオプションを選択します。私は大きなボタンでシンプルに表示したいので、「ユーザ名を表示」のチェックを外し、「ボタン(大)」のチェックをしています

このとき、「言語設定」はデフォルトでは「Automatic」になっているのですが、環境によっては日本語表示されない場合があるようですので、「日本語」を選択しておきます。

「コードのプレビューをみる」の下に実際に表示されるボタンの見た目が表示されますのでこれで問題なければ、その下のグレーの枠の中のコードををすべて選択し、コピーしておきます。

このコードをBloggerの設定画面から設定することになります。

参考:「ウェブサイトにTwitterボタンを追加する方法


Bloggerにボタンを配置する

次にBloggerにログインし設定画面を開き、設定のレイアウトを開きます。


レイアウトの中のボタンを配置したいところにある「ガジェットを追加」をクリックします。





すると追加するガジェットの選択画面が表示されますので、HTML/JavaScriptを選択します


入力画面が表示されますので、ここでさきほどtwitterの設定で作成したコードを「コンテンツ」のエリアに貼り付けます


保存をクリックします。

ブログを確認してボタンが配置されていればOKです。

このHTML/JavaScriptのところは、他のサービスと連携するときや、自分で直接HTMLを書きたい場合などによく使います。

とても簡単にボタンを設置できますので試してみてください。


QooQ