【Facebook】FacebookSDKを用いていいね！ボタン等を設置する(2014/1/31時点)【JavaScript】

おきたいボタンを選ぶ

• URL to Like（いいね対象のページURL。固定値なので、動的なサイトには関係ない。後述）

• Leyout（ボタンの体裁。いくつか選べる）

• Width（ウィジェットの幅。最小値は決まっている模様）

• Action Type （ボタン押下時のアクションは何か、いいね（Like）、おすすめ（recommend）が選べる）

• Show Friends' Face （友達がいたら顔を出すかどうか）

• Include Share Button （シェアボタンも置くかどうか。いいねだけでいいなら、このチェックは外す）

「Get Code」ボタンを押下すると、HTMLに記述すべきコードが出てくる。

1つめのコード

FacebookSDKをインクルードしているコード。bodyタグの最初の子要素とかでよろし

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2つめのコード

ボタン。おきたいところにこれを記述する。
data-show-facesとか、data-shareとかの属性値が1で選んだものが反映される。
ポイントは、data-hrefの属性値。 動的なサイトの場合は、ここの値を動的に書き換えないといけない。

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="50" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

以上です。
簡単ですな。