facebookいいねボタンをWordPressに追加する時に参考にする情報色々

WordPressにいいねボタンを設置するときに考えたことメモ。そして、今後また設置する機械も増えるのでメモ。

オープングラフプロトコル

Facebookのいいねボタン生成ページで作ったものを埋め込んだだけじゃ、足りない。
以下をやると誰かがいいね押したら、その人の友だちのフィードに流れるようになる。

htmlタグにxmlns:og="http://ogp.me/ns#"を追加して、下記コードをheadに入れる

<meta property="og:site_name" content="サイトの名前" />
<meta property="og:url" content="該当URL" />
<meta property="og:title" content="title要素" />
<meta property="og:image" content="フィードに表示されるべき画像URL" />
<meta property="og:description" content="フィードに流れる時に出てくる文章" />
<meta property="og:type" content="何についてなのか、FBが用意したタイプから選んで入れる" />

この他に、og:adminsとかog:app_idが必要な場合がある。前者は管理ページが見たい時らしく、後者はアプリにする時らしい。

WordPressのトップページとか記事ページとかでいい感じに上記のメタタグを生成してくれる

http://dogmap.jp/2011/01/18/facebook-ogp-meta-tag/

を実施すれば大丈夫！
トップページなのか、記事ページならアイキャッチ画像があるか（なければ最初の写真を出してくれる）などなど、よきにはからってくれます。

僕はこの最後のecho $out;の直前に

$out .= '<meta property="og:type" content="article" />' . "\n"; 

を加えました。

ボタンを作る

＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook「OGP」活用術。皆が知らない「いいね！」ボタンの設定方法、超解説

と

Facebook「いいね」設置時に絶対に行うべき1つの施策[Wordpress編]

を参考にすれば大丈夫。

その他

いいねを押してもらったあとに、コメント欄を表示させたいなら、iframeでなくxfbmlを使わないとダメ。

XFBML版Facebookの「いいね！」ボタンを設置する。

og:typeは、ブログ記事の場合はarticle。
Open Graph protocol| Facebook開発者向けドキュメントの日本語訳とTips