サイト制作に関するメモ書き

HOME > その他 > Facebookボタンの設置・OGPの設定方法

Facebookボタンの設置・OGPの設定方法

Facebookボタンを設置する方法をメモ。

設置方法

Facebookボタンの埋め込みタグは、Facebookのサイトで生成できます。
必要な項目を入力し、「Get Code」をクリックします。

how-to-install-the-facebook-button01

後は生成されたタグをサイトに埋め込んで完了です。
埋め込むタグは、HTML5・XFBML・IFRAME・URLから選択します。
 

HTML5

how-to-install-the-facebook-button02

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="http://cly7796.net/wp/sample/how-to-install-the-facebook-button/" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
</body>

HTML5での設置デモページ
 

XFBML

how-to-install-the-facebook-button03

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="http://cly7796.net/wp/sample/how-to-install-the-facebook-button/" layout="button" action="like" show_faces="false" share="false"></fb:like>
</body>
</html>

XFBMLでの設置デモページ
 

IFRAME

how-to-install-the-facebook-button04

コードを表示したい場所に配置します。

HTML

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcly7796.net%2Fwp%2Fsample%2Fhow-to-install-the-facebook-button%2F&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>

IFRAMEでの設置デモページ
 

URL

how-to-install-the-facebook-button05

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>

URLでの設置デモページ
 

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での表示

how-to-install-the-facebook-button06

 

キャッシュを消したい場合

OGPなどを変更したとき、Facebook側にキャッシュが残っていてうまく反映されない場合があります。
そういった時、こちらのサイトでFacebook側のキャッシュを強制的に削除できます。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP