facebook いいね!ボタン(box_count)の設置例

本稿では、ボックスカウントタイプのfacebook いいね!ボタンコードの取得と、JavaScriptファイル(JSファイル)の作成、HTML5ドキュメントへの記述例を掲載しています。


facebook いいね!ボタンのコードの取得。


facebook for developersのいいね!ボタン 450px×256pxに縮小して表示しています。

facebook for developersのいいね!ボタンへアクセスします。

いいね!ボタン構成ツールより、

「いいね!」するURL
空欄でOKです。facebook いいね!ボタンを設置したページのURLは自動で取得してくれます。
Width
横幅の選択。空欄でOKです。
レイアウト
box_countを選択します。
アクションタイプ
likeを選択します。
友達の顔を表示する
今回はチェックを外します。
シェアボタンを追加
今回はチェックを外します。

設定が終わりましたら、コードを取得ボタンを押すと以下の画像のようにコードが表示されます。

今回は、Javascript SDKタブのコードを使います。


facebook for developersのいいね!ボタン 450px×256pxに縮小して表示しています。


facebook いいね!ボタンのコード(Javascript SDK)から、JavaScriptファイルを作成


facebook いいね!ボタンコード Step 2)

<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.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

上記のコードの赤色の文字列の箇所をエディタに記述(コピペ)し、拡張子がjsのJSファイルを作成し、facebook いいね!ボタンを設置するHTMLドキュメントで指定している文字コードと同じ形式で保存します。例)example.js

(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.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

facebook いいね!ボタンを表示するHTML5ドキュメントにコードを記述


facebook いいね!ボタンコード Step 2)

以下のコードの赤色の文字列の箇所を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.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>						
<div id="fb-root"></div>

facebook いいね!ボタンコード Step 3)

以下のコードを、HTML5ドキュメントのfacebook いいね!ボタンを表示したい場所に記述します。

<div class="fb-like" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>

HTML5ドキュメント記述例)

HTML5ドキュメントに、Step 2のコードとそのうしろにJSファイルを参照するコードを記述し、facebook いいね!ボタンを表示したい場所に、Step 3のボタンを表示するコードを記述します。コメントアウトはお好みで。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- facebook Like Button -->
<div id="fb-root"></div>
<script type="text/javascript" src="example.js"></script>
<!-- facebook Like Button -->

<header></header>
<nav></nav>
<main></main>
<footer>
	<div class="fb-like" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
</footer>

</body>
</html>

上記のHTML5ドキュメント

※同じドキュメントにいいね!、シェアの両ボタンを設置する場合は、JavaScriptの記述(body要素の直下に記述した箇所)は、共有できますので、ひとつでOKです。また、以下に掲載しているogpも同様です。

※HTML5では、script要素のtype="text/javascript"の記述の有無はどちらでも良いです。以前のバージョンのドキュメントに設置する場合を考えて一応、書いておきました。


OGPをHTML5ドキュメントに記述


OGP(Open Graph protocol)とは、 Facebook、Google+、mixi、Twitter、mixiなどのSNSのソーシャルプラグイン(いいね!、シェア、共有ボタンなど)を経由したユーザーのアクションで、OGPを設定したページのURLや種類、タイトル、概要、サムネイルなどをページ作成者の意図した通りに表示させることができます。

例)

<meta property="og:url" content="http://www.your-domain.com/your-page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Your Website Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg">

上記は、いいね!ボタンを作成したページの、詳細なコードサンプルのサンプルコードに掲載されているOGPのコードです。赤色の文字列を、いいね!ボタンを掲載したページに合わせて変更します。


参考までに、OGPの設定を行わないとどうなるのか、以下をご覧下さい。


  • Facebook DevelopersのSharing Debuggerのキャプチャです。ここで、いいね!ボタンが押されたときにどのように反映されるのか分かります。Enter URLに、現在ご覧頂いているページのURLを入力し、Debugを押します。

  • Warnings That Should Be Fixed. 修正する必要があります…と、警告のメッセージ。10件も。
  • 警告のほとんどが、OGPをページに設定するのに必須とされる5つの値(og:url、og:type、og:title、og:description、og:image)は、他のタグから推測し構築できるケド、ちゃんと記述してね。って感じのメッセージです。

  • ページを下にスクロールすると、Based on the raw tags, we constructed the following Open Graph propertiesに、ページに指定してあるデータより、必須のデータのOGPをfacebookが自動で構築した結果が掲載されています。
  • fb:app_id
    空欄(データ無し)
    og:url
    http://homepagelecture.web.fc2.com/html5_facebook_like_button.html
    og:type
    website
    og:title
    facebook いいね!ボタン(box_count)の設置例|SNS,ブックマークボタン|HTML,CSS入門講座
    og:description
    facebook いいね!ボタン(box_count)の設置例。コードの取得からHTML5ドキュメントへの記述例。ドキュメント外のjsファイルの作成。
    og:image
    http://homepagelecture.web.fc2.com/html5_facebook_button/facebook_like001.jpg

When and how we last scraped the URLのLink Preview

  • OGPをページに設定する場合は「og:url、og:type、og:title、og:description、og:image」の5つの値が必須ですが、私は修正が必要な項目だけ記述します。
  • 上記のデータの中で、修正が必要なのは、og:typeとog:titleくらいでしょうか。あと、fb:app_idもApp IDも取得済みなので、以下のとおりに追加しておきます。

このページのmeta要素)

<meta charset="UTF-8">
<meta name="description" content="facebook いいね!ボタン(box_count)の設置例。コードの取得からHTML5ドキュメントへの記述例。ドキュメント外のjsファイルの作成。">
<meta name="keywords" content="Google +1ボタン,設置,">
<meta name="author" content="いまさらHTML,CSS入門講座">

<!-- OGP -->
<meta property="fb:app_id" content="xxxxxxxxxxxxxxxx">
<meta property="og:title" content="facebook いいね!ボタン(box_count)の設置例">
<meta property="og:type" content="article">
<!-- OGP -->

og:type
website → articleに変更。websiteは、指定したページの種類が、トップページの場合で、articleは、トップページ以外のコンテンツページであることを表します。
og:title
自動で取得されたタイトルは長いので、短く修正。

余談ですが、APP IDを取得済みの場合で、facebookへログインし、いいね!ボタンのコードを取得した場合は、JavaScriptのコードの5行目にAPP IDが表示されていますが、JavaScriptのコードをJSファイルとして、外部に作成した場合は、Facebook DevelopersのSharing Debuggerで、APP IDが読み取れないことがあるようなので、ボタンを設置したページにOGPで指定しました。

js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&gmp;version=v2.6&gmp;appId=xxxxxxxxxxxxxxxx";