facebook いいねボタン設置 ogタグ対応

2014年10月12日更新 view: 5206 view

photoBy: http://burberry-tiepin.x0.com/wp-content/uploads/2012/01/facebook300x300.png

いいねボタンとogタグ

いいねボタンを設置する時に注意することは、必ずogタグも設定すること。
このogタグが設定されていないとせっかくいいねされても広まらない

app_idとかadmin id の取得方法

fb:APP_IDを取得するには、https://developers.facebook.com/apps/
へアクセスして取得します。

Admins IDは、下記のURLの最後にアカウントを 入力すると一番上に表示されます。

http://graph.facebook.com/アカウント

そしてFacebookシェアボタンのアプリにfb:APP_IDを 入力してみました。

設置にあたっての注意

スポンサードリンク

facebookのogタグ、いいねボタンはどういうわけかうまく設置しても

  • いいねボタンが押せない
  • ニュースフィードやウォールに流れない

ってことがよくある。
注意して設置すること。

具体的には以下の例が該当する

URLが極端に長い。
og:imageに設定される画像のサイズが200x200pxを下回っている。
og:imageにdatasourceを使っている。
og:imageに設定される画像がPNGである?

ogタグの設定

準備

fb:app_id
入力フォームに適当に入力していき、
GetCodeをクリック。
で、XFBMLを選択してその後は記載の手順通りに進める。

https://developers.facebook.com/docs/reference/plugins/like/

fb:admins
ウェブサイトのインサイトで確認できる。

https://www.facebook.com/insights/

設置

まずは環境に合わせてHTMLにコードを書きます。

<meta property="og:description" content="名言や格言をご紹介しています。">
<meta property="og:site_name" content="名言や格言を集めました">
<meta property="og:image" content="http://meigen-plus.com/app/webroot/img/facebook.png">
<meta property="og:type" content="article">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="名言や格言を集めました">
<meta property="og:url" content="http://meigen-plus.com/22925/">
<meta property="fb:app_id" content="2013****15432133391193">
<meta property="fb:admins" content="10w000187***3651t4w936">

・<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/all.js#xfbml=1&appId=244433391193";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

・ボタンを表示したい場所に

<fb:like href="http://www.yoururl.com" send="false" layout="box_count" width="50" show_faces="false"></fb:like>

これで設置完了!

デバッグ

設定が完了したらキャッシュが残っているとバグるので、キャッシュを消す。
以下のURLに設置したURLを入力しよう。
https://developers.facebook.com/tools/debug

動作確認

設置したページのいいねボタンを押して適当にコメントを書いてみる。
で、それが自分のfacebookページのウォールに流れれば完了。

あんまりデバッグがてらにいいねしたり、取り消したりするとスパム判定を受ける。
スパム判定を受けると いいねを押した後に 承認 ボタンのが現れ、1ステップ手間がかかるようになる。
またニュースフィードにも流れなくなる。

1日置いて、他のPCからアクセスしたら治った。

他のソーシャルボタンも追加したい

また、ソーシャルボタンを簡単に設置するには
http://itra.jp/jquery_socialbutton_plugin/
のライブラリがあるがfacebookいいねに関しては手動で設置すべき。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

12月12日 ( 火 ) にアクセスが多かった記事はこちら!