2012-06-15

Blogger に Facebook の「いいね!」ボタンを設置する

@dgtube さんから、ブログに Facebook の「いいね!」を付けないんですか? と聞かれたので、試しに「いいね!」ボタンを付けることにした。

「いいね!」ボタン設置

見た目

こんなんになる。

設定方法

以下の記事を参考にした。

基本コードの入手

まず、Facebook の Like Button のページから、ボタン用のコードを入手する。

(?) マークにマウスをホバーさせれば各項目の説明が現れるし、右手にプレビューが表示されるので困ることはないと思うけど、一応解説:

  • URL to Like: ブログの URL。後で書き換えるので、何でも良い。ぼくは自分のサイトの URL を入力した
  • Send Button: いわゆる Facebook の「共有」ボタン
  • Layout Style: 「Standard」は一行タイプ、「button_count」はボタン・タイプ、「box_count」はボックス・タイプ (今回採用したもの)
  • Width: 幅の指定 (普通 450px で変える必要はない)
  • Show Faces: ボタンの下に「いいね!」してくれた人の写真を表示する
  • Verb to display: 「like」なら「いいね!」、「recommend」なら「推奨」
  • Color Scheme: 色のタイプ。light と dark がある
  • Font: 英文用。空のままで良い

設定を終えたら、「Get Code」ボタンを押す。Blogger のテンプレートは HTML5 なので、「HTML5」のコードをコピペすればいい。コードは 2 つ。

<body> のすぐ後に配置するコード。

<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://at-aka.blogspot.jp/" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
Blogger テンプレート用に編集

このままのコードでは、「URL to Like」で指定した「http://at-aka.blogspot.jp/」への「いいね!」ボタンしか表示されない。各記事ごとに「いいね!」を表示するため、Blogger のテンプレート用要素を使って編集する。

まず、「いいね!」ボタンを表示するためのコードを編集。青色が追加・変更した新しいコード。

<b:if cond='data:post.isFirstPost'>
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</b:if>

次に body 直後に置くコードの変更。

<b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>

ぼくと同じタイプの「いいね!」ボタンを使うのなら、上のコードをそのままコピーしてもらって構わない。

テンプレートの編集

Blogger の設定画面から「テンプレート」を選択。「ブログで使用中」の下に「HTML の編集」ボタンがあるのでクリック。上級者しかやっちゃダメよ、という警告が出る。OK なら「続行」。

「ウィジェットのテンプレートを展開」にチェックを入れる。

<body ... で始まる行を探して (ブラウザーのページ内検索機能を使うとすぐに見つかる)、「body 直後に置くコード」を挿入する。

次に、<data:post.body/> のすぐ下に「いいね!」ボタン用のコードを貼り付ける。

これで、記事下に「いいね!」ボタンが表示される様になる (個別記事表示の時のみ)。他の場所に「いいね!」を配置したい場合は、希望の場所に上記コードを貼ればいい。

「HTML の編集」で「テンプレートを保存」する前に「プレビュー」を表示。これは HTML コードのチェックも行なってくれる。何かしらコードに不具合があったら、エラーが出る。エラーになったら、「記事内容をクリア」をクリックして修正分をキャンセルしよう。貼り付けたコードをチェックしてバグを見つける。エラーが出なくなったら「テンプレートを保存」して「閉じる」。

あとがき

「いいね!」ボタンを表示する手順を説明した。

プロ・ブロガー本には、Facobook の「いいね!」の他に複数のソーシャル・サイトのボタンを設置する Zenback というプラグインが紹介されている。

けれど、最近 Blogger が行なったドメイン変更 (.com を .jp に変えた変更ね) に Zenback は対応していない。

Zenback は、「.jp」ドメイン固定で使えと言う。けれど、Blogger のドメイン変更の嫌な点は、そのサイトを見ている人に合わせてドメインを変更すること。だから、日本から Blogger のページを見ると「.jp」でも、アメリカからぼくらのページを見ると「.com」になる。ノルウェーなら「.no」 (何故か、ぼくのブログはアメリカに次いでノルウェーからのアクセスが多い)。

他国からどれ位い自分のブログが見られているかは、Blogger の統計情報で調べられる。設定ページから「統計 > 参加者」で「国別のページビュー」を確認。

ぼくのブログでは、約 1 割の人達が国外から当ブログを読んでいた。彼らにとって、Zenback はちゃんと動作しないプラグインになる。この 1 割をどうするか悩んで、皆が幸せになる道を選んだ。もちろん、この判断はぼく個人のものなので、参考程度に考えてもらえれば嬉しい。

時刻:
ラベル: , , ,

7 comments:

  1. sorahima4/20/2013 02:17:00 PM

    はじめまして。
    恐れ入りますが、
    今月HTMLの編集画面がリニューアルされて、
    こちらのやり方も変わってしまったのでしょうか？
    挿入する部分がいまいち分からず。。。
    ご教授頂けると嬉しいです。

    ReplyDelete
    Replies
    1. 安宅正之4/23/2013 10:55:00 PM

      はじめまして。

      確かにテンプレート編集機能のリニューアルで見つけづらくなりましたね。
      確認はしていませんが、今回のリニューアルは編集機能の変更であり、テンプレートには手が入っていないと思います。なので、上記方法が使えるはずです。問題は挿入する部分ですね。

      まず、「「いいね!」ボタンを表示するためのコード」ですが ウィジェットへ移動 から「Blog1」を選択。1000 行過ぎに沢山の includable が見えるはずです。ここで、 id='post' となっているところをクリックしてください。コードが展開されます。1500 行から 1550 行の間に目的のコードが見つかると思います。

      そして、「body 直後に置くコード」ですが、実はどこでも良く私は ウィジェットへ移動 から「Profile1」の中にコードを入れていたりします。具体的には b:includable id='main' と b:if cond='data:title != ""' の間です。

      参考になりますでしょうか。

      Delete
    2. AKI NAKAOKA5/08/2013 09:04:00 PM

      ありがとうございました！
      本当に助かりました(ｏ＾Ｏ＾ｏ)

      Delete
    3. 安宅正之6/23/2013 12:38:00 AM

      返事が遅くなって申し訳ないです。お役に立てて良かったです。

      Delete
  2. Mayumi1/06/2014 03:48:00 PM

    こんにちは　Bloggerを年末に始めたばかりのコード超初心者です
    上記のようにBloggerリニューアルされてあるようでいろんなサイトをリサーチをしましたがよくわかりません・・・

    1つ目のコードをいれる箇所　＜Body＞が見つかりません
    1536行に
    を見つけたのですがこれでしょうか?うまくいきませんでした
    同じコードが1541行にもあります　

    2つ目のコードはおっしゃるとおり　どこでも貼り付けてOKなのですね

    すごく丁寧に説明されていらっしゃったのでもしよろしければご教示願います
    素人でお恥ずかしい限りです

    ReplyDelete
    Replies
    1. Anonymous1/06/2014 04:18:00 PM

      すみません!なんとか解決しそうです!!!
      お時間とらせてしまい申し訳ありません・・・このコメントも削除していただいてかまいません・・・いろいろと参考になりました　ありがとうございます

      Delete
    2. 安宅正之1/06/2014 09:36:00 PM

      Mayumi さん、はじめまして。

      > 1つ目のコードをいれる箇所　＜Body＞が見つかりません

      <data:post.body> のことですね。
      私のテンプレートでは一つしか見つかりません。
      でも、もしかしたら 2 か所で使っているテンプレートも存在するかもしれませんね。
      もし、解決しませんでしたら周辺のコードを貼って頂ければアドバイスできるかもしれません。

      > 2つ目のコードはおっしゃるとおり　どこでも貼り付けてOKなのですね

      どこでも... というのは言いすぎでした。すみません。
      コメント・アウトされたり、if 文で消えるような位置に置かれれば NG です。
      もし不安でしたら、sorahima さんへのコメントに書いた場所に置いてみて下さい。

      > なんとか解決しそうです!!!

      解決できると良いですね。
      Mayumi さんと同じトラブルに遭った方には、このコメントも役に立つと思うので残しても構わないでしょうか?

      Delete

Subscribe to: Post Comments (Atom)