Facebookボタンを設置する方法をメモ。
設置方法
Facebookボタンの埋め込みタグは、Facebookのサイトで生成できます。
必要な項目を入力し、「Get Code」をクリックします。
後は生成されたタグをサイトに埋め込んで完了です。
埋め込むタグは、HTML5・XFBML・IFRAME・URLから選択します。
HTML5
Aを<body>の直後、Bをボタンを表示したい場所に配置します。
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.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://cly7796.net/blog/sample/how-to-install-the-facebook-button/" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
</body>
XFBML
Aを<body>の直後、Bを<html>タグに、Cを表示したい場所に配置します。
HTML
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" lang="ja">
<head>
</head>
<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.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="https://cly7796.net/blog/sample/how-to-install-the-facebook-button/" layout="button" action="like" show_faces="false" share="false"></fb:like>
</body>
</html>
IFRAME
コードを表示したい場所に配置します。
HTML
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcly7796.net%2Fwp%2Fsample%2Fhow-to-install-the-facebook-button%2F&width&layout=button&action=like&show_faces=false&share=false&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>
URL
URLをiframeに指定するか、ボタンへのリンクとして使用します。
HTML
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcly7796.net%2Fwp%2Fsample%2Fhow-to-install-the-facebook-button%2F&width&layout=button&action=like&show_faces=false&share=false&height=35" frameborder="0"></iframe>
OGPの設定
OGPをページに設定しておくと、そのページURLを含んだFacebook投稿があった時、表示するサイトタイトルや説明文、画像などをOGPから参照するようになります。
OGPはFacebookだけでなく、TwitterやGoogle+など他のSNSでも使われる共通の仕様です。
OGPの設定には色々種類があり、下記が設定のサンプルです。
HTML
<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:description" content="ページの説明文" />
Facebookでの表示
キャッシュを消したい場合
OGPなどを変更したとき、Facebook側にキャッシュが残っていてうまく反映されない場合があります。
そういった時、こちらのサイトでFacebook側のキャッシュを強制的に削除できます。
【参考サイト】
コメントが承認されるまで時間がかかります。