facebook like（いいね）ボタンを記事ページ（エントリーページ）ごとに表示

WEBマスターのお仕事TOP > ソーシャルプラグイン設置 > facebook like（いいね）ボタンを記事ページ（エントリーページ）ごとに表示

facebook like（いいね）ボタンを記事ページ（エントリーページ）ごとに表示

（2010/12/27）

2011/05/27追記
※iframeのコード生成は終了したようです。XFBMLで設置する場合をご参照ください。
facebook likeボタンは前回記事の通り設置しても記事毎にlikeが付けられませんでした。今回ご紹介する方法だと、ブログなどでも記事ページ毎にlikeボタンを設置できます。

※私のようにJavascript分からない人でも分かるように書いています。
※例えば「'」が一文字抜けただけで正常に動かないので注意深く作業しましょう。

Step1）通常通りコード作成

前回の Facebook likeボタンを設置しようのStep1～3）の通り、コードを作成する。

Step2）生成されたコード一部を書き換え

生成されたコードの中の、自分のサイトのURL部分（下記例の赤太字部分）を以下の記述に差し替える。
（記事ページ（エントリーページ）のURLを取得します）
'+encodeURIComponent(document.URL)+'
例）

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgoodjob4604.blog103.fc2.com%2F&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

↓以下のように差し替える

<iframe src="http://www.facebook.com/plugins/like.php?href='+encodeURIComponent(document.URL)+'&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

Step3）コードの前後を別のコードで囲む

Step2）でできたコードを、以下の赤太字のコードで挟みます。

<script type="text/javascript">
var url = document.URL;
document.write('<iframe src="http://www.facebook.com/plugins/like.php?href='+encodeURIComponent(document.URL)+'&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>');
</script>

以上。できましたでしょうか。
このコードをlikeボタンを表示させたい場所に設置すればOKです。

↓関連記事アップしました。
likeボタンが押された回数をチェック！Facebook Insights/インサイト

※こちらのサイトを参考にさせてもらいました
It's Social World
http://ameblo.jp/tsucchon/theme-10029042424.html

関連記事