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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

著者について

コメント

コメントする

目次
閉じる