Bloggerトップページにfacebookボタンを設置する

Bloggerの記事には標準でSNSボタンが設置されていますが、トップページにはありません。

ないなら自分でつけてみよう！
ということで、まずは「いいね！」ボタンを自前で設置してみました。

facebook「いいね！」ボタンのコードを生成する

「いいね！」ボタンについては、facebook公式にてコード生成ができますのでそちらを参照します。

https://developers.facebook.com/docs/reference/plugins/like/

コード生成ページは英語ですが、項目を選択するたびに右部にプレビュー表示されるため、分かりやすいです。




「Get Code」でコードを生成したら、Bloggerテンプレートに貼り付けます。
なお、コードの種類がHTML5、XFBML、IFRAME、URLの4種類から選択できますが、今回はHTML5を使用します。

1.ページにJavaScriptSDKを含めます

テンプレート内でbodyタグを検索し、そのすぐ後に配置します。

（実は当ブログではbodyの閉じタグのすぐ上に配置していますが、現状、動作に問題はありません。しかし公式で配置箇所を推奨しているので、なるべくならそれに合わせた方がよいでしょう）

2.プラグインを表示したい場所にプラグインのコードを配置します

テンプレート内のタイトル部分を検索します。



h1タグ部分がブログタイトルですので、2.のコードを以下のように配置します。



すると、以下のように表示されます。




あとは通常のデザインと同様、divタグのcssを調整し、タイトルの横に並べるなど工夫をするとよいでしょう。