記念すべき1つ目の記事になる訳だけど下準備として「いいねボタン」を付けたい。
参考にしたのは以下の2つの記事。
『Blogger』でFacebookの「いいね！」ボタンを設置するときに引っかかったポイント
blogger に facebook の Like(いいね)ボタンAdd Star
書かれた通りにやっていたが最初は上手くいかなかった。
忍者ツールズのサービスで出来たからいいやというような解決策もあったが、できてる人がいるんだからこのまま、別の方法に行くのも性格上嫌なのであれこれ調べてみた。
基本的には<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>
<data:post.body>の直後に
<b:if cond='data:post.isFirstPost'>
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-width="450" data-layout="button_count" data-show-faces="false" data-send="true"></div>
</b:if>
だが人によっては「いいねボタン」が出ない場合があるはずだ。
自分の場合もこれに陥った。
なぜ出ないかといろいろ調べていくうちに、どうやら<data:post.body>というタグがbloggerのテンプレートの中に複数あり、追加する場所を間違えると「いいねボタン」が表示されないという所にいきついた。
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
自分の使っている「シンプルテンプレート」では<data:post.body>は全部で3つあった。その内の2つが上に書いた部分に出ている。
正確には<data:post.body>の直後では無く、<data:post.body>を包括している<b:if></b:if>の直後だ。
これで解決すると思う、というか自分は解決したので同じような悩みの人の為にメモ。
0 件のコメント:
コメントを投稿