2014年に制作した記事を2016/07に加筆修正
facebookのいいねボタンやシェアボタンの設置方法です。
基本、コードをコピペするだけで設置できます。
このサンプルではシェアボタンも表示されていますが、いいねボタンのみ表示させたりすることもできます。
提供元サイトに「いいね!ボタン構成ツール」というのがあるので、適当に選択して、「コードを取得」で表示されるコードを適切にコピペするだけで設置できます。
ご自分で設置するときはローカル環境では表示しないので、サーバにアップして確認してください。
IE7以前のブラウザはには(FB側が)対応していません。IE8は表示していますが、いつまでサポートされるかわかりません(2016/08現在)。
<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は数字部分がわりと頻繁に変更される可能性が高いかもなので、ボタンが表示されなくなったら、まず提供元サイトでこの部分の変更がないか確認すると良いかも?
<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タグを表示したいところに貼り付けると、とりあえずはいいねボタンが表示されます(シェアボタンなどもほぼ同じ手順です)。
<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 Cardsやmixiのチェックボタンなどその他のSNSのプラグインでも使います。それぞれのプラグインではOGPが必須だったり、あった方が効果的に活用できたりするので、設置の際は気をつけてみてください。
OGPはheadタグ内にmetaタグを使って記述します。
<meta property="og:〜" content="〜">
が基本書式ですが、FBには9行目のapp_idを設定する部分のように独自の
<meta property="fb:〜" content="〜">
という書式もあります。
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に限らず、他社のサーバーにプログラムがあって、それを埋め込んで利用するプラグインは提供側にトラブルがあるとこちらではどうにもできません。
表示されなくなったり挙動がおかしくなったときは、慌てず騒がず落ち着いて調査することが肝心です。
2014年以前の話で、仕様変更後同じ問題が残っているかわからないのですが、念のため一応・・・
シェアボタンを正しく設置してもテキストとかサムネイル画像とかうまく表示されない事例があるようです(デバッガーを通してみても、エラーがなく、キャッシュをクリアしても反映されないとゆー)。 そうなってしまった場合の決定的な対処方法というのが、今のところ報告されていませんが、参考になりそうな記事があったのでリンクを貼っておきます(シェアボタンだけでなく、いいねボタンでも起こることがあるらしー)。
結果として、しばし放置すると反映されるみたいです(かかる時間はマチマチ・・・1時間ほどで解決される場合もあれば、1週間放置してもなんもないということもあり)。
OGPで設定したurlがindex.htmlやindex.phpのようにファイル名で終わっているのではなく、フォルダ名で終わっているのにデバッガーで入力するとき、ファイル名をつけていたりするとうまくないときがあるようです(OGPの設定通りフォルダ名で終わっていても最後の/(スラッシュ)があるかなしかも関係していたりするみたい)。