2014年3月28日金曜日

BloggerにFacebookのいいねボタンを付けよう

bloggerにも標準で各種SNSへの共有ボタンは着いているのですが、わかりにくい。こんなやつ↓


しかも、Facebookボタンは「いいね」ではなく共有です。「いいね」はやったぱり青いボタンがいいです。


というわけで、Bloggerの各記事のページに「いいね」ボタンを着ける方法を調べてみました。

1. こちらのページでHTMLに貼付けるコードを生成します。

URLは後ほど変更するので何でもいいです。Layoutで「いいね」ボタンだけや吹き出し付き、テキスト付き等が選べます。Include Share Buttonのチェックボックスで「シェア」ボタンも付けるかどうか選べます。私はシンプルなのが好きなので、LayoutはButton、「シェア」ボタンはなしにしました。
「Get Code」ボタンを押すと貼付けるコードが表示されます。Facebook SDKを読み込むコードとボタンを設置するコードの2つがあります。

2. bloggerの「テンプレート」から「HTMLの編集」を選ぶ。


3. bodyタグのすぐ下に先ほど取得したコードを貼付けます。

bodyのすぐ下じゃなくてもいい気がするけど、公式ページにはbodyの下と書いてあるので従います。
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<!-- Facebook SDK ここから -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/ja_JP/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
</b:if>
<!-- ここまで -->
各記事にだけ「いいね」ボタンを表示できればよいので、<b:if > で括っておきます。上記の緑色の部分。

4. 次に「いいね」ボタンを置きたい場所にコードを埋め込みます。

今回は各記事のタイトルの下に入れてみます。私の場合は1500行目付近の <div class='post-header-line-1'/>の下に下記を追加しました。
<!-- faceboo button -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='fb-like goog-inline-block' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' data-width='100' expr:data-href='data:post.canonicalUrl'/>
</b:if>
ここで expr:data-href は記事ごとに変えないといけないので、
expr:data-href='data:post.canonicalUrl'
とします。さらに各記事ごとのページだけで表示すればよいので<b:if>で囲ってあります。

これで「いいね」ボタンが表示されるようになりました!

0 件のコメント :

コメントを投稿