【Blogger】facebookいいね(Like)ボタンの設置 記事別にボタンを設置する

• 公開日：2016年02月15日

記事概要

bloggerのカスタム方法です。

環境

• Blogger

はじめに

これまであまりしなかったBloggerのカスタマイズを開始しました。
Bloggerのカスタマイズの情報は少ないので、積極的に掲載していこうと思います。
今回は、未設置だったfacebookいいね(Like)ボタンの設置方法を記載します。

facebookいいね!ボタンのない状態のダメ男のblog

facebookいいね(Like)ボタン

facebookいいね(Like)ボタンは、faceook for developersのLike Button Configuratorの画面から作成することができます。

デフォルトの設定ではいいね!とシェアが両方表示されている。

このBlogでは、facebookいいね(Like)ボタンをカスタマイズして利用します。Layoutをbox_countに変更し、Include Share Buttonのチェックを外します。

変更が画面に反映される

カスタマイズが終了したら、Get Codeボタンをクリックします。

htmlに埋め込むソースコードが表示される

コードが表示されるので、コピーして適当なテキストに貼り付けます。

コードの変更1

facebookのいいね!コードは生成できました。しかし、このままでは問題が発生して利用することはできません。
このままだと記事ごとのいいね!ボタンとしては機能しません。blog全体のいいね!ボタンになってしまいます。
なので、記事ごとにいいね!がクリックできるように修正します。

■Before

facebook like code

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>

■After

facebook like code

<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>

expr:data-href="data:post.canonicalUrl"にすることで記事ごとのいいね!ボタンを設置できるようになります。

コードの変更2

次の問題は、取得したコードをそのままtemplateに貼り付けると、「The reference to entity "version" must end with the ';' delimiter」というエラーが発生してしまうことです。

これはxmlのparseに失敗すると発生するエラーなので、以下のように修正します。

■Before

facebook like code

<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/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

■After

facebook like code

<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/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

パラメーターを&に変更することでxmlのparseエラーが発生しなくなります。

テンプレート変更

上記の修正が完了したら、コードをテンプレートに貼り付けます。

template

<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/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>

他のSNSボタンのデザインに合わせてcssを変更する場合は、divで囲むと良いでしょう。

動作確認

テンプレートを保存したら上記の変更がきちんと行われていることを確認します。

facebookいいね!ボタンが設置されたダメ男のblog

うまく表示されています。

まとめ

Bloggerの情報は少ないので、プログラミング能力があると便利です。
自由度が高く、SEO対策をしなくてもgoogle検索に強いので、エンジニアには最高の無料Blogです。しかし、普通の人には少しハードルが高いかもしれません。
ただ、どの無料ブログよりもWEBアプリに近いカスタムができるので頑張ってみてください。

以上です。

関連記事

• Blogger】スマホテンプレートの編集 ページングの表示件数を変更する

この記事がお役にたちましたらシェアをお願いします

Tweet