Edited at

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

More than 5 years have passed since last update.


おきたいボタンを選ぶ

https://developers.facebook.com/docs/plugins/like-button


  • 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>

以上です。

簡単ですな。