Facebookのいいね!ボタンやコメント欄の設置

nanapiのkensuuさんが、


と書いてたので、そんな簡単にできるか!と思ってやってみました。


まずは、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;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記法) - はてなダイアリーのヘルプ