facebook いいねボタン・シェアボタン [js]

2014年に制作した記事を2016/07に加筆修正

facebookのいいねボタンやシェアボタンの設置方法です。
基本、コードをコピペするだけで設置できます。


sample

このサンプルではシェアボタンも表示されていますが、いいねボタンのみ表示させたりすることもできます。
提供元サイトに「いいね!ボタン構成ツール」というのがあるので、適当に選択して、「コードを取得」で表示されるコードを適切にコピペするだけで設置できます。

ご自分で設置するときはローカル環境では表示しないので、サーバにアップして確認してください。

IE7以前のブラウザはには(FB側が)対応していません。IE8は表示していますが、いつまでサポートされるかわかりません(2016/08現在)。


JavaScript SDK

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

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

FBのいいねボタン等ソーシャルプラグインを利用する際のお約束的コードです。(できるだけ)bodyタグの開始タグ直後に記述してください。複数のいいねボタンやシェアボタン等を設置するにしても、この記述は同一ページにひとつあれば十分です。

(多分)このコードが大きく変更されることは稀かと思われますが、6行目最後の方のversion=v2.7は数字部分がわりと頻繁に変更される可能性が高いかもなので、ボタンが表示されなくなったら、まず提供元サイトでこの部分の変更がないか確認すると良いかも?


html

<div class="fb-like" data-href="いいねやシェアしたいページのURL" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

JavaScript SDKが記述済みならば、このclass[fb−like]のdivタグを表示したいところに貼り付けると、とりあえずはいいねボタンが表示されます(シェアボタンなどもほぼ同じ手順です)。

  • data-layout・・・などのオプションについても提供元サイトに説明があります。
  • JavaScript SDKが設置できない環境の場合(ブログなど?)、iframe版も用意されています(いいねボタンの仕様変更のたびに廃止されたり復活したりしているみたいだけれど・・・)。「いいね!ボタン構成ツール」の「コードを取得」で表示されるオーバーレイに「IFrame」のタブがあるので、そちらでコードをコピペしてください。iframe版はJavaScript SDKが不要です。

OGP

<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<head>
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="article">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="画像のURL(絶対パス)">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページのディスクリプション">
<meta property="fb:app_id" content="取得したID">
</head>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

上記で「とりあえずはいいねボタンが表示されます」と書いたのは、実はそれだけではいいねボタンの効能にあやかれないからです。
いいねボタンだけでなく、FBのソーシャルプラグインを効果的に活用したければ、OGP(Open Graph Protocol)は必須です。

OGPは「SNSとウェブページを連携させる為に設定する記事情報」(引用元:Facebookでのウケ方が段違い!もはや必須なOGPを設定する方法 - LIG INC.)で、いいねボタンをクリックしたときなど設定した情報が友達のニュースフィードにも表示されるので、情報の拡散や浸透に効果が期待できます。

OGPはFBだけの約束事ではなく、Twitter Cardsmixiのチェックボタンなどその他のSNSのプラグインでも使います。それぞれのプラグインではOGPが必須だったり、あった方が効果的に活用できたりするので、設置の際は気をつけてみてください。

OGPはheadタグ内にmetaタグを使って記述します。
<meta property="og:〜" content="〜">
が基本書式ですが、FBには9行目のapp_idを設定する部分のように独自の
<meta property="fb:〜" content="〜">
という書式もあります。

  1. 1行目:htmlタグにprefixオプションをつける(html5の場合)
  2. 3行目 og:title:いいねボタン(等)を設置するページのタイトル(サイトのタイトルではない)
  3. 4行目 og:type:webページの種類(website・articleなど・・・参考:Facebookのog:typeで設定できるパラメータの一覧 - [k]id)
  4. 5行目 og:url:いいねボタン(等)を設置するページのurl
  5. 6行目 og:image:シェアされたときやFBのタイムラインに表示させる画像のurlを絶対パスで記述(推奨サイズ:1200×630px)
  6. 7行目 og:site_name:サイトのタイトル
  7. 8行目 og:description:いいねボタン(等)を設置するページの説明
  8. 9行目 fb:app_id:開発者アカウントで取得(これがあった方がといろいろお得)
  • 1行目のhtmlタグにprefixオプション(html5の場合)をつけるのは必須ではないですが、あったほうが正式らしいです。ちなみにxhtmlの場合はprefixオプションではなく、以下のように書きます。
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
    (参考・・・・html4の場合:HTML 4.01でのOGP(名前空間の箇所)の指定【HTML】 - E-riverstyle Vanguard)
  • 3〜6行目までは必須です。あとの2行はオプション設定ですが、FB的にはあった方が良いです(シェアされたときやタイムラインに表示される)。
  • og:typeはざっくり言うとWebサイトのトップページはwebsite、トップページ以外はarticleにするという感じです。他にもありますが、詳細は以下を参考にしてください(英語ですが)。
    Open Graph Reference Documentation - Facebook for Developers
    Object Types - The Open Graph protocol
  • シェアボタンをクリックしたときなどに表示される画像は推奨1200×630px(最低でも600×315px)です(2015/05現在)。サンプルではjpgを使っていますが、pngの方がいろんなデバイスで綺麗に表示できるっぽいです(参考:FacebookのOGP画像の仕様変更 キーワードは「1200px × 630px」と「PNG」 - OPTPiX Labs Blog)。どんな風に表示されるか事前に確認したい場合は、OGP画像シミュレータのようなツールもあります。
  • 画像パスはhttp://(https://)から始まる絶対パスを指定してください。プロトコル表記なしの絶対パス(//から始まるパス)だと、少なくともfbではエラーになるようです(2017/03追記)。
  • og:descriptionは大抵の企業では、<meta description=〜>と同じものを入れているみたいです。・・・なにか戦略があれば別でもいいんじゃないかな
  • app_idは開発者ページで取得できます(参考:FacebookアプリID(fb:app_id)を取得する方法を図解入りで! - iscle)。アカウント登録には携帯電話番号が必要になります(業務で取得するならか個人の携帯電話で登録しない方が良いでしょう)。なお、このサンプルでは諸事情によりapp_idを設定していません(facebookページがなかったり、特に必要ないなーという場合は無理に取得して設定しなくても良いと思います)。
  • (このページに限りませんが)ここで説明した内容や参考URLの内容は、記述をした時点での情報であり、FB等の都合により変更される可能性が非常に高いです。あくまで参考なので、設置の際は最新情報を入手してそちらを優先的に参照してください。
  • ちなみに、サンプルで使用した画像はPlaceIMGを利用させていただいています。ダミー画像を簡単に作れる便利なサイトです。

デバッグツール

OGPが正しく記述されているか確認するためのデバッグツールがあります。

いつのまにかfbのアカウントがないと、デバッガーが使えなくなっていました。
fbのアカウントは有効な携帯電話番号(携帯メール/有効なsms)を求められますが、もっていなかったりすると登録できません(私は携帯電話が嫌いなので持っていないことになってます)。とはいえデベロッパー経由で登録すると、クレジットカードで登録できたりするので、何とかなったりします(2017/03追記)。

使い方はInput URLのフォームに確認したいページのURLを入力して"Show existing scrape information"をクリックします。
すると、件のページに設定されているOGPの情報などが表示されます。

いつのまにか日本語表記になっていました。
URLを入力のフォームに確認したいページのURLを入力して「新しいスクレイピング情報を取得」をクリックするだけで使えます。警告文なども一部英語で表示されたりしますが、かなり日本語対応になっています(「既存のスクレイピング情報を表示します」の方だと以前の情報を表示するようです)。(2017/03修正)
重要なエラーがあるときは、!マーク付きの赤色枠で警告してくれます(2016/07現在)。OGP的にエラーというほどではないけれど、FB的には問題がある場合などはiマークでソフトな感じに警告してくれます(2016/07現在)。

このサンプルの場合、上記に書いた通り、諸事情によりapp_idを設定をしていないので、「管理者およびアプリIDがありません」または"Share App ID Missing"、あるいは両方が表示されます(警告文は英語のみだったり、日本語も表示されたり、いろいろです)。

警告文は多くの場合英語なので、英語が苦手な方は何が問題か理解できずに困ることもあるかもしれませんが、それほど難しい文章ではないので辞書や翻訳ツールなどを駆使したりすればなんとかなると思います。

英語表記でも、google先生に訊いてみると解説してくれているページを紹介してくれたりもします(2017/03修正)。

なお、このデバッグツールで"Fetch new scrape information"「新しいスクレイピング情報を取得」をクリックすると(2017/03修正)、キャッシュがクリアされます(ブラウザのキャッシュではなくFB側のキャッシュ)。
いいねボタンなどは、一度設置してインターネット上に公開してしまうと、FB側のサーバーにしばらくキャッシュが残るので、OGPの記述を変更してもすぐに反映されなかったりします。
しばし放置すれば、いずれは反映されますが、以外と時間がかかることも多いので、このデバッグツールでキャッシュをクリアすると良いでしょう。


急に表示されなくなったら

最初にも書きましたが、FBは結構頻繁に仕様変更があるっぽいです(非公式のメンテとかね・・・)。いいねボタンなどが急に表示されなくなったりすることもあります。
表示されなくなる直前にそのページの修正などを行っていたのなら、単純にコードのコピペミスとか、うっかり手を滑らせて変な文字を入力してしまったとかということもあり得ますが、何もしていなかったり、いくらチェックしてもFB関連のソースに問題がなければ、以下のことをチェックしてみてください。

  • ほかのサイトの表示はどうか確認・・・他企業や個人のページでも表示されていなければ、FB側に問題がある可能性が高いです。
  • 「いいねボタン 表示しない」などといったキーワードを駆使して、google先生に尋ねてみましょう。その際、できるだけ最新の情報を参考にした方が良いです。FBサイトでメンテナンスやトラブルの情報がないか確認しに行くのも良いですが、公表が遅かったり、そもそも公表する気もなかったりします。
    ちゃんとした仕様変更の場合は、事前に公式発表されているので、普段からFBの動向に注意しておくことも大事です。
  • FB側に問題がある場合、しばし放置しておくと、しれっと元に戻っていたりもします。クライアントやユーザーから頻繁に問い合わせがある場合は、担当者に鋭意調査中ですとかなんとかごまかしてもらいましょう(もちろん、問題が判明して修正した場合はクライアントやユーザーにきちんとお知らせすることも重要です)。
  • 「しばらく」の感覚は人それぞれですが、しばらく放置しても戻らなかったり、会社のエライ人とかが焦りだしたら、思い切ってFBに問い合わせてください。ちなみに念のためブラウザのキャッシュと上記のデバッガツールでFB側のキャッシュを消去しても復活しないことを確認してからにしましょう(問い合わせの前に、クロスブラウザチェックもして表示されないブラウザの種類などや自分で調べた範囲で良いので他サイトの状況など、できるだけ情報を集めて、整理しておくと良いかと思います)。
  • ほかのサイトでは表示されているのに、自分が担当しているページだけ表示されないなど現象が限定的ならば、上記のデバッガツールでのデバッグやいいねボタン関連のコードの再確認はもちろん、ほかのスクリプトやプラグインの影響がないかもしっかり確認してください。企業などの場合は、PHPなどプログラムを担当している側がなにかやらかしていたりする場合もあるので、丁寧に状況を説明してやんわりそちらに問題がないか確認して欲しいと連絡してみてください(喧嘩腰はいけません)。

FBに限らず、他社のサーバーにプログラムがあって、それを埋め込んで利用するプラグインは提供側にトラブルがあるとこちらではどうにもできません。
表示されなくなったり挙動がおかしくなったときは、慌てず騒がず落ち着いて調査することが肝心です。


シェアボタン問題(仕様変更される前の情報)

2014年以前の話で、仕様変更後同じ問題が残っているかわからないのですが、念のため一応・・・

シェアボタンを正しく設置してもテキストとかサムネイル画像とかうまく表示されない事例があるようです(デバッガーを通してみても、エラーがなく、キャッシュをクリアしても反映されないとゆー)。 そうなってしまった場合の決定的な対処方法というのが、今のところ報告されていませんが、参考になりそうな記事があったのでリンクを貼っておきます(シェアボタンだけでなく、いいねボタンでも起こることがあるらしー)。

結果として、しばし放置すると反映されるみたいです(かかる時間はマチマチ・・・1時間ほどで解決される場合もあれば、1週間放置してもなんもないということもあり)。
OGPで設定したurlがindex.htmlやindex.phpのようにファイル名で終わっているのではなく、フォルダ名で終わっているのにデバッガーで入力するとき、ファイル名をつけていたりするとうまくないときがあるようです(OGPの設定通りフォルダ名で終わっていても最後の/(スラッシュ)があるかなしかも関係していたりするみたい)。


戻る

Top