フェイスブックはかなり有名になったのでご存知だと思います。

もし、知らなかったら、

⇒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

感謝。

アメブロの記事の上下にフェイスブックボタンを追加