Blogger記事にFacebookボタンを設置する方法

いいね！を設置しました。Ardor(@ArdorOnline)です。
Facebookをあまり使っていませんが、
ブログに「いいね！」ボタンを設置してみました。
今回は、Facebookの「いいね！」ボタンを設置する方法をご紹介します。

Facebookの「いいね！」ボタンを設置する手順は、次の通りです。

1. 公式ページへ行く（英語です）
2. 必要情報を入力＆設定
3. 「Get Code」でコードを表示
4. Javascript SDKコードとプラグインコードをコピー
5. Blogger用カスタマイズ
6. Bloggerに設置

公式ページへ行く

Facebookボタンの作成には、公式ページへ行きます。
仕様が何回も変わっているので、公式ページで確認してください。

• Like Button - Facebook開発者

英語のページですが、簡単ですのでチャレンジしてみてください。

必要情報を入力＆設定

公式ページが開けたら、
「Step 1 - Get Like Button Code」までスクロールします。

必要に応じて情報を入力します。
設置するだけならURLのみでOKです。

ボタンの形状を変更したい場合は、「Layout Style」を変更します。
選べる形状と見た目は、次の通りです。

設定できたら、次へ進ます。

「Get Code」でコードを表示

「Get Code」ボタンをクリックすると
Like Buttonのプラグインコードが表示されます。

汎用的な「HTML5」でのコードを選択すると良いでしょう。

Javascript SDKコードとプラグインコードをコピー

それぞれのコードをコピーしてください。
コードは、次のようになっています。

■Javascript SDK

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

■プラグインコード

<div
 class="fb-like"
 data-href="http://blog.asterlist.com/"
 data-send="true"
 data-layout="box_count"
 data-width="450"
 data-show-faces="true"
 data-font="arial"
></div>

赤字の部分は、Blogger用にカスタマイズします。

Blogger用カスタマイズ

ではBlogger用にカスタマイズしていきます。
Bloggerには、リダイレクトする仕様があるため、
同じ記事でもURLが異なることがあります。
※独自ドメインを導入されている方は、関係ないです。

リダイレクトに対応するためにURL指定を変更します。

変更前：

 data-href="http://blog.asterlist.com/"

変更後：

expr:data-href='data:post.canonicalUrl'

変更したコードは、次のようになります。

カスタマイズコード：

<div
 class="fb-like"
 expr:data-href='data:post.canonicalUrl'
 data-send="true"
 data-layout="box_count"
 data-width="450"
 data-show-faces="true"
 data-font="arial"
></div>

Bloggerに設置

Blogger用コードまで作成できたら、あとはコードを貼り付けるだけです。
任意の位置にコードを貼り付けて、Facebookボタンを設置してください。

Javascript SDKは、ページ内の一箇所にあればOKです。
このブログでは、bodyタグの直下に貼り付けてあります。

また、プラグインコードは、表示したい位置に設置してください。
このブログでは、「data:post.body」の直下に記述して設置してあります。

貼り付け方は、
「テンプレート」→「HTMLの編集」
→「ウィジェットのテンプレートを展開」にチェックを入れて表示する。

設置したい箇所にコードを貼り付ける。
※バックアップを必ずとってから実施してください。

よくわからなかった方へ

説明がうまくできていなくてすみません。
コピーして貼り付ければOKのBloggerコードを用意しました。
ご自由にコピーして持っていってください。

<div class="fb-like" expr:data-href='data:post.canonicalUrl' data-send="true" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

形状サンプル

Facebookボタンの形状をサンプルを載せておきます。
形状は、data-layoutの指定を変更することで変えることができます。

指定値	形状
standard
button_count
box_count

最後に

いかがでしたでしょうか？
Facebookのいいね！ボタンを設置できましたか？
設置できた方は、是非いいね！してください！

この記事で設置できれば幸いです。
最後まで読んで頂きありがとうございます。