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

スポンサーサイト

(--/--/--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

関連記事

コメント

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://goodjob4604.blog103.fc2.com/tb.php/89-20cabde1
月別アーカイブ
Google+
Twitter
ページトップへ
ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。