facebookのいいねボタンを設置する方法
facebookのいいねボタンをWebサイトに設置する方法を紹介します。
WordPressを利用している方は、プラグインTweet, Like, Google +1 and Shareで設置することも可能です。
いいねボタン設置の方法
まずfacebookのプラグインを利用出来るようにするため、以下のHTMLを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/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 |
<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が用意してくれたジェネレータを使用して作成することもできます。
※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”」として別ウィンドウで開いても問題はありません。
実際に設置したものがこちらになります。アイコンについてはこちらを参考にしてください。
Trackback URL
http://webnonotes.com/web/facebook/trackback/No Comments Yet