facebook シェアボタン（box_count）の設置例

いまさらHTML,CSS入門講座 > HTML5 > SNS,ブックマークボタン > facebook シェアボタンの設置例

facebook シェアボタン（box_count）の設置例

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

facebook シェアボタンのコードの取得。

facebook for developersのシェアボタンへアクセスします。

シェアボタン構成ツールより、

「シェア」するURL: 空欄でOKです。facebook シェアボタンを設置したページのURLは自動で取得してくれます。
Width: 横幅の選択。空欄でOKです。
レイアウト: box_countを選択します。
モバイルIframe: チェックを外します。

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

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

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-share-button" data-layout="box_count" data-mobile-iframe="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-share-button" data-layout="box_count" data-mobile-iframe="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";