アメブロの記事の上下にフェイスブックボタンを追加
フェイスブックはかなり有名になったのでご存知だと思います。
もし、知らなかったら、
⇒http://www.facebook.com/
までどうぞ。
フェイスブックボタンは
です。
今回、フェイスブックボタンを追加するにあたり、参考にさせていただいたのは、以下のサイトです。
感謝(^^)。
⇒http://ameblo.jp/fwnv2744/entry-10833635442.html
⇒http://www.tsublog.com/?p=760
⇒http://developers.facebook.com/docs/reference/plugins/like/
フェイスブックボタンをアメブロに実装するために、アメブロのサイドバーの設定のフリープラグインを利用します。
動作としてはフェイスブックのAPIより、情報を取り出して、アメーバブログに表示するというものです。
まず、上記３サイトの１番上のサイトからスクリプトをコピーします。
フェイスブックボタンを記事の上下に入れるためには、２つのスクリプトを入れるように説明されているのですが、それはかなりもったいないことです。
なぜなら同じデータを２回、取ってくることになるからです。
そこで私はアメブロの記事の上下に表示するために２つのスクリプトを１つにまとめました。
<script>$(function(){var c=location.href;var g=document.title;var a=$(".foot a:contains('記事URL')");for(i=0;i<a.length;i++){var c=a[i];var e='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&layout=standard&show_faces=false&width=500&action=like&colorscheme=light&height=80 " scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:80px;" allowTransparency="true"></iframe> ';$(".foot").eq(i).before(" <span>"+e+"</span>");$(".title").eq(i).after(" <span>"+e+"</span>")}});</script>
という感じになります。
よろしかったらお試しください。
今後、フェイスブックやアメブロやその他のSNSやブログなどがすべてつながってきます。すると、さらに自分ブランドが加速的にアップしていくと思います。また、多くの人とつながっていくはずです。
＜Mini Tips＞
上記のようにソース表示するためには、ソースコードを変化させています。< & " >を< & " >に変換しているのです。これを手動でやると大変なのですが、世の中には、Web上で変換するソフトを公開してくれる人がいます。
⇒http://www.netyasun.com/syntaxhighlighter/source-escape.html