2011年5月6日金曜日

OGP対応まとめメモ

設定のたびに、
http://blog.livedoor.jp/gx_socialmedia_lab/archives/2624886.html
を参照しているが、
しばらくするとこのページの存在を忘れそうなので、
備忘録代わりに設定メモ。

1.アプリ登録
http://developers.facebook.com/setup/
App IDをメモっておく。

2.Likeボタンのコード取得
http://developers.facebook.com/docs/reference/plugins/like/
「STEP1」の部分。

3.OGP用コードの取得
http://developers.facebook.com/docs/reference/plugins/like/
2と同じページの「STEP2」の部分。

4.OGP用コードの修正
metaタグの fb:admins を fb:app_id に変えて、1で取得したApp IDをその値とする。

5.descriptionの設定
<meta property="og:description" content="">
を設定。
contentに任意の文字列を設定。

6.htmlタグに属性2つ追加
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"

7.チェック
http://developers.facebook.com/tools/lint

Bloggerだと、
■ブログのタイトル下に表示する場合

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:blog.homepageUrl + "&send=true&layout=standard&width=100%&show_faces=true&action=like&colorscheme=light&font&height=65"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100%; height:65px;'/>


■ブログの各記事のタイトル下に表示する場合

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=true&layout=standard&width=100%&show_faces=false&action=like&colorscheme=light&font&height=80"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100%; height:80px;'/>
このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿