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

facebookのいいねボタンをWebサイトに設置する方法を紹介します。

WordPressを利用している方は、プラグインTweet, Like, Google +1 and Shareで設置することも可能です。

いいねボタンを設置する方法
  1. いいねボタンの設置方法
  2. いいねボタンのプロパティ
  3. いいねボタンのジェネレータを利用する
  4. 独自アイコンを利用する場合

いいねボタン設置の方法

まずfacebookのプラグインを利用出来るようにするため、以下のHTMLをbodyタグの直後に配置します。

facebook利用の準備
<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/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

HTMLの配置が出来れば後は、いいねボタンを表示するためのソースを記載します。

いいねボタンの種類は4つあり、またその他のプロパティで色の変更・シェアボタンの追加が出来ます。

プロパティの詳細はLike Button for the Webに記載されています。よく使用するオプションとしては以下のものがあります。

属性デフォルト
data-colorschemeテキストに使用する色 [light][dark]light
data-actionボタンに表示する文字 [like][recommend]like
data-hrefいいねされるページのURL現ページのURL
data-layoutボタンの種類 [standard],[button_count],[button],[box_count]standard
data-shareシェアボタンを表示 [true][false]false
いいねボタンのHTML
<div class="fb-like" data-colorscheme="【テキストの色】" data-href="【URL】" data-layout="【ボタンの種類】" data-action="【ボタンに表示する文字】" data-share="【シェアの表示・非表示】"></div>

一般的には”box_count”タイプのボタンがブログなどによく使用されています。

<div class="fb-like" data-layout="box_count" ></div>

いいねボタンのプロパティ

いいねボタンの各プロパティを設定した時の動きを見ていきます。

プロパティの中には「data-href」のように見た目が変わらずクリック時の動作が変わるプロパティもあるため、クリック時の動きも併せてして確認してみてください。

default

<div class="fb-like" ></div>

data-colorscheme

<div class="fb-like" data-colorscheme="light" ></div>
<div class="fb-like" data-colorscheme="dark" ></div>

data-action

<div class="fb-like" data-action="like" ></div>
<div class="fb-like" data-action="recommend" ></div>

data-href

<div class="fb-like" data-href="http://webnonotes.com/" ></div>

data-layout

<div class="fb-like" data-layout="standard" ></div>
<div class="fb-like" data-layout="button_count" ></div>
<div class="fb-like" data-layout="button" ></div>
<div class="fb-like" data-layout="box_count" ></div>

data-share

<div class="fb-like" data-share="false" ></div>
<div class="fb-like" data-share="true" ></div>

いいねボタンのジェネレータを利用する

いいねボタンを作成するときは、自分でコードを記載する以外にもfacebookが用意してくれたジェネレータを使用して作成することもできます。

https://developers.facebook.com/docs/plugins/like-buttonにアクセスし各プロパティを設定しGetCodeをクリックします。
facebook
コードが表示されるためあとはそのソースをWebページに貼り付けます。
facebook1

※GetCodeで表示される1つ目のスクリプトはページ内に1つあれば良いため、ボタンを2つ以上設置する場合でもスクリプトを2回記載する必要はありません。

独自アイコンを利用する場合

独自アイコンを設置する場合は「いいねボタン」でなく「シェアボタン」となります。2つの違いについてはこちらのサイトが参考になります。

Facebookの、いいね!とシェアの違いを簡単解説。ブログのアクセス数アップのために。

「いいねボタン」については、独自アイコンで設定することは不可能となっています。ちなみに「シェアボタン」についても公式にサポートされているわけでは無いため、使用が変更されると利用できなくなる可能性があります。

独自アイコン設置のソース
<a href="http://www.facebook.com/share.php?u=【サイトのURL】" rel=”nofollow” onClick="window.open(encodeURI(decodeURI(this.href)),'fbwindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1'); return false;">FBのアイコン</a>

onClickの部分については、サブウィンドウで開くためにjavascriptを使用していますが、「target=”_blank”」として別ウィンドウで開いても問題はありません。

実際に設置したものがこちらになります。アイコンについてはこちらを参考にしてください。

divider

Trackback URL

http://webnonotes.com/web/facebook/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>