@dgtube さんから、ブログに Facebook の「いいね!」を付けないんですか? と聞かれたので、試しに「いいね!」ボタンを付けることにした。
「いいね!」ボタン設置
見た目
こんなんになる。
設定方法
以下の記事を参考にした。
- 「いいね！」ボタンを設置しよう ｜ Facebook Guide
- これやってみました: bloggerでFacebookの「いいね」(Like)ボタンを設置するには
- Facebook Like Button For Blogger - Blogger Widgets
基本コードの入手
まず、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 割をどうするか悩んで、皆が幸せになる道を選んだ。もちろん、この判断はぼく個人のものなので、参考程度に考えてもらえれば嬉しい。
