Googleが提供する無料のブログサービス「Blogger」のはじめ方、第7回はブログにTwitterやFacebookのいいね！ボタンを追加します。SNSが普及した昨今、こうしたボタンは欠かせませんからね。ちなみにもともとボタンはついていることはついているのですが、Google+のボタンだけが目立ってしまっているので、TwitterやFacebookを使っている方はあらためて設定することをオススメします。今回はHTMLをいじるので、上級者向けです。
なお、目次はこちらのページをご確認ください。
以下、やり方です。
①Facebookのコードを取得する
１・Facebookの「Like Button」のページ（http://developers.facebook.com/docs/reference/plugins/like/）にアクセスし、必要項目を入力します。
URL to Like ： 「いいね！」をする対象のURLを指定します。空欄であれば、開いているページが対象になります。特に指定がなければ空欄にしましょう。
Send Button ： 特定の友達だけにリンクを共有できる「送る」ボタンの表示設定です。ここでは、iFrameを使うため、チェックを外しておきましょう。
Layout Style ： 表示形式を選択します。
Width ： 表示幅を指定します。特に問題なければ、そのままでOKです。
Show Face ： 「いいね！」を押した人たちのFacebookアカウントのプロフィール写真を表示する場合にチェックを入れます。
Verb to Display ： ボタンに表示する言葉を選びます。
Color Scheme ： ボタンの色を指定します。
Font ： ボタンのフォントを選択します。
２・「Get Coad」ボタンをクリックし、「Iframe」欄をコピーします。
②Twitterのコードを取得する
１・Twitterの「Twitterボタン」のページ（http://twitter.com/about/resources/buttons#tweet）にアクセスし、必要項目を入力します。
なお、ユーザや推奨、ハッシュタグを設定すると、ボタンを押してツイートする際にユーザ名やハッシュタグが自動挿入されるようになります。
２・画面右のソースコードをコピーします。
③Google+のコードを取得する
１・Googleの「+1をウェブサイトに表示」のページ（http://www.google.com/intl/ja/webmasters/+1/button/）にアクセスし、必要項目を入力します。
２・表示されたソースコードをコピーします。
④はてなブックマークのコードを取得する
１・「はてなブックマークの作成・設置について」のページ（http://b.hatena.ne.jp/guide/bbutton）にアクセスし、必要項目を入力します。
２・表示されたソースコードをコピーします。
※キャプチャは新しいデザインのBloggerです。
⑤Bloggerへログインして、ダッシュボードへ
Blogger ： http://www.blogger.com/
⑥テンプレートメニューを選択
⑦「HTMLの編集」ボタンをクリックし、警告画面がでてきたら「続行」をクリック
⑧ウィジェットのテンプレートを展開にチェックを入れる
⑨ <div class='post-footer'>を検索し、その後に①～④でコピーしたコードを貼り付ける
⑩「テンプレートを保存」をクリックし、HTML編集画面を閉じる
以上で記事のすぐ後ろにTwtteriとFacebookのいいね！ボタンを設置することができます。Mixiなど他のSNSのボタンも同じ要領で対応できます。
さて次回はブログを更新した際に、自動的にTwitterへ更新情報をツイートする方法を紹介いたします。
【Bloggerのはじめ方】⑨「Blogger」ブログの更新情報を自動的にTwitterへツイートする方法
