2011年5月10日火曜日

bloggerでFacebookの「いいね」(Like)ボタンを設置するには

http://cgod-kei.blogspot.com/2010/04/bloggerfacebooklike.html
こちらを参考にしましたが、少し違ったのでそういう方の為になればと書き込みします。

ブログのデザイン→HTMLの編集のタブを押す

※消えると危険ンなので、テンプレートを編集する前に、テンプレートのコピーを保存することをお勧めします。
テンプレートをすべてダウンロードをクリックして任意のHDDに落として下さい。

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

参考にしたサイトだと data:post.body を検索だけど検索できないので自力で下記を探しました。
検索の方法が分かる方は教えてください。
場所は本当に中断辺りにあるので、中断からやや上辺りから捜すと見つけやすいです。

<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>


この次の行にこれを挿入
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

もしくはこちら
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

この違いは先のは記事単独を開いた時だけ「いいね」ボタンを表示するが、後のはブログトップページを開いた時などは表示されてる記事ごとすべてに「いいね」ボタンが表示されるかの違い。
私は後者のスタイルでやってみてこんな具合です。

0 件のコメント:

コメントを投稿