Tool & Snippet

WEB系/3DCG・映像系に関すること

facebookのLikeボタンをとりあえず設置する方法

facebook DEVELOPERS

Core Concepts › Social Plugins › Like Button


条件:

”jQueryを使ってすでに作成ずみの静的HTMLサイト”にとりあえずボタンをいれたい


手順:

  1. Likeボタンを取得
  2. サイト内の共通でつかうJavaScriptファイルに下記のように記述 (afterを使って”設置場所”の後ろに追加設定)


ソースコード

$(function(){
  $("body").prepend('<div id="fb-root"></div>');
  $("設置場所").after('<div class="fb-like" data-href="*URL to Like*" data-send="false" data-layout="button_count" data-width="300" data-show-faces="false" data-colorscheme="dark" data-font="arial">&nbsp;</div>');
});
(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'));


備考:

Open Graph protocolを設置したい場合は別の設定が必要です。

facebook DEVELOPERS > Open Graph

http://ogp.me/


参考サイト:
Facebook・Twitterなどソーシャルボタン設置方法まとめ | Design Spice