Facebookのいいね!ボタンやコメント欄の設置
nanapiのkensuuさんが、
ちなみにfacebookのコメント欄にしたのは役員会議で決まって数秒後に設置できました。すごいなーfacebook。
2011-01-21 19:17:24 via web
と書いてたので、そんな簡単にできるか!と思ってやってみました。
まずは、DeveloperになってappIdを取得する必要があります。
そのために、Facebookにログインし、
右上から「アカウント」->「アカウント設定」->「モバイル」を選択します。
そこで携帯のアドレスを登録して、コードを発行して携帯で承認を完了させます。
・それでコードが届かなければ、メールアドレスを全て消して登録しなおします。
・選択肢に日本がない場合は、一度メールアドレスを全て削除して、
直接開発者ページに移動して、警告の携帯電話をクリックして一連の作業を完了させます。
これで開発者登録が完了です。
次にプラグインをサイトに配置します。
今回はFacebookの拡張言語のXFBMLを使ってプラグインを配置するので、
以下の記述をサイトに埋め込みます。上記で取得したappIdを記述必須。
<script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId : 'YOUR APP ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); </script>
そして、好きなプラグインを選んで、Get Codeで取得したコードをサイトに配置します。
例)Comments プラグイン
<div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=140977659297382&amp;xfbml=1"></script><fb:comments numposts="10" width="425" publish_feed="true"></fb:comments>
日本語にするために、en->ja、US->JPに書き換えました。
これでプラグインを自分のサイトにつけることができます。
プラグインはサイトのURLと関連づけて覚えているみたいなので、
コードを貼付けるだけでコメントやいいね!数が保存され反映されます。
今回は数秒という感じには行きませんでしたが、
一度、開発者登録をして、XFBMLの読み込み設定をしておけば、
次回からはプラグインのコードを貼付けるだけで動かすことができます。
それなら数秒で可能ですね。
自分のメモに。
ref:
Welcome to Facebook — Log in, sign up or learn more
Social Plugins - Facebook developers
Log in | Facebook
XFBMLでFacebookのLike、Shareボタンを設置する | Gryng.me - html、CSS、Movable Type、JavaScriptのブログ
Twitterのつぶやきにリンクする(twitter記法) - はてなダイアリーのヘルプ