2013/07/22

Facebookのいいね!ボタンを設置する方法

Facebook(フェイスブック)のいいね!ボタンを設置する方法

Facebook(フェイスブック)のいいね!ボタンをwebサイトやブログのページに設置する方法をご紹介します。
いいね!ボタンを設置することでタイムラインへの投稿や共有が簡単に行えるようになり、多くのユーザーに記事やページを公開できるようになります。

目次

■Facebookについて

Facebookについて

Facebook(フェイスブック)はユーザー数11億1000万人(2013年3月末時点)の世界最大のSNSです。
Facebookには企業や有名人が作成できる「Facebookページ」があり、広告に使用したりファンを集めたりすることができます。また、Facebookや一般のユーザーが開発したアプリケーションをツールとして利用でき、Facebook自体がもつ機能を超えて様々な用途に活用することが出来るようになっています。

■いいね!ボタンの設定・デザイン変更

Facebookのいいね!ボタンは『Facebookコネクト』から作成することが出来ます。

  • ホームページ、ウェブサイトのURLを入力します。
  • 送信ボタンを表示するかどうかの選択です。チェックを外すと送信ボタンは表示されません。※プラグインコードでIFRAMEを使用する場合は利用できません。
  • ボタンの種類を選択します。3種類の中から用途・デザインに合わせて選択してください。
  • ウィジェットの横幅を指定します。Px単位での指定が可能です。
  • いいね!ボタンを押したユーザーを表示するかどうかを選択できます。
  • ボタンのフォントを選択できますが、日本語での表示の場合はあまり意味がありません。
  • 色を選択します。サイトのデザインに合わせてlightかdarkを選べます。
  • ボタンに表示する言葉を"いいね!(like)"か"おすすめ(recomend)"に変更できます。
  • 選択した設定でコードを生成します。

設定が終わったら"Get Code"をクリックしてください。
ポップアップでコードが書かれた画面が現れます。

■生成したコードについて

ページがHTML5でマークアップされている場合

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

上記のタグを<body>タグのすぐ後に配置してください。

<div class="fb-like" data-href="サイトのURL" data-send="false" data-width="450" data-show-faces="false" data-font="segoe ui"></div>

上記のタグをボタンを表示したい場所に設置してください。

WordpressやMovableTypeでブログ記事にいいね!ボタンを設置する場合は"サイトのURL"を<?php the_permalink(); ?><$MTEntryPermalink$>に変更して使用してください。

ページがHTML5以外でマークアップされている場合

HTML5以外でマークアップしている場合は、IFRAMEを選択します。

<iframe src="//www.facebook.com/plugins/like.php?href=エンコードしたURL&send=false&layout=standard&width=450&show_faces=true&font&colorscheme=light&action=like&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

上記のコードをボタンを表示したい場所に設置します。
※URLは必ずエンコードを行ってください。

■まとめ

facebookのいいね!ボタンは今やほとんどのブログやwebサイトに表示されています。
リンクを手軽に貼れるということ以外にも、多くのユーザーにシェアされることによってSEOにも強いページに育ちます。まだという方は簡単に設置できますのでぜひやってみてください。