Home > 技術 > ブログをfacebookのOGP(Open Graph Protocol)に対応させる

ブログをfacebookのOGP(Open Graph Protocol)に対応させる

WordpressMTについてですが、以下にメモしとく。

そもそものOGPについてですが、ご存知のとおりいいね!ボタンを押されたときに、facebook側に対していろいろとサイトの情報を教えてあげるためのmetaタグ情報ですが、どうやらこれをちゃんとやっておかないと自分の友達のフィードに流れていかないよう。
なので、これは積極的にBlogに導入するほうが無難かもしれませんね。

なぜなら『OGP』を設定しないで『いいね』ボタンをクリックすると、友人のニュースフィールドにその情報が表示されないからです。これではせっかく『いいね』ボタンをクリックされても他の人が見ることがないので広がりも少なくなってしまいます。


via: facebook いいねボタンの仕様変更?OGPの設定についてまとめました( localeプロパティについて) | HTML5でサイトをつくろう

そんなに面倒なものでもないのでやっちゃいましょう!

OGPのmetaタグを追加する

以下はWordpress仕様で書いております。

AppIdの取得は以下の記事が参考になります。
facebook いいねボタンの仕様変更?OGPの設定についてまとめました( localeプロパティについて) | HTML5でサイトをつくろう

OGPのmetaタグを追加する(MTに依存する箇所)

htmlタグに以下2つのxmlns名前空間を追加します

いいね!ボタンを配置する(HTML5バージョン)

今までiframe版を使っていたんですが、ここ最近HTML5版に切り替えたところすこぶる速くなりました。
HTML5版も結果的にiframeを作りますが、画面のロード後に実行されるのでレンダリングが邪魔されません。

body開始タグすぐに以下を

いいね!ボタンを設置したい場所に以下を(Wordpress版)

いいね!ボタンを設置したい場所に以下を(MT版)

この一手間でほんの少しでもPVを〜!

■関連リンク
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

Facebook Perfect Guide Book
Facebook Perfect Guide Book
posted with amazlet at 12.02.06
森嶋 良子 鈴木 麻里子 田口 和裕
ソーテック社
売り上げランキング: 448

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1279
Listed below are links to weblogs that reference
ブログをfacebookのOGP(Open Graph Protocol)に対応させる from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > ブログをfacebookのOGP(Open Graph Protocol)に対応させる

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top