wordpressへのogp追加とソーシャルブックマークボタンの追加。

2011年4月12日

ソーシャルブックマークボタンを設置するという機会があったので、調べてみました。
facebook、mixi、グリーなどはリンクを押すと、画像やテキストなどの情報が出ます。

↓こんなの

これを追加するメモ!

これは、設定をしてあげる必要があって、何でもかんでも自動的に出ているわけではありません。
もちろん、ある程度のものは出ますが、意図しない画像やテキストが出てしまったりしてしまう場合もあります。
これを回避するためにプログラムで読ませる。というような感じです。

その設定はmetaでOGPというものを設定します。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

wordpressではOGPをプラグイン一撃で入れることが出来るのですが、画像が意図したものにならない様子。
でもチョーーーー簡単に設定ができるので、興味のある人は入れてみてください。
有効化するだけで、OGPが追加されます。
WP-OGP

画像が意図したものにならないのが気に入らない場合には、headのmeta部分に、下記を追加します。

<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:type" content="blog">
<meta property="og:description" content="サイト説明">
<meta property="og:url" content="<?php the_permalink() ?>">
<meta property="fb:admins" content="アプリID" />
<meta property="fb:appid" content="アプリID" />
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["'])(.+?)1.*?>/i';
if ( preg_match( $searchPattern, $str, $imgurl ) ) {
	echo '<meta property="og:image" content="'.$imgurl[2].'"/>';
} else {
	echo '<meta property="og:image" content="DEFAULT_IMAGE"/>';
} ; ?>

<meta property="og:site_name" content="サイト名">

facebookではアプリIDを登録しておく必要がありますので、facebookにログインをして、アプリIDを取得して下さい。
※5~6行目のアプリIDを知る方法
1つめは
http://apps.facebook.com/what-is-my-user-id/ から登録したアプリIDを入力します。
2つめは
http://www.facebook.com/developers/createapp.php から登録したアプリID

※7~14行目は画像の自動出力です。
一番最初にある画像を自動で読み込んでくれるようになります。

head部分のmeta登録が終わったら、アップ!
ソースを確認する。

OGPがうまいこと追加になったら次はソーシャルブックマークを自動でいれちゃうプラグイン。
WP Social Bookmarking Light

こんな感じで設定が出来ます。
ただ一つ問題は、設定のところで、TOPにブックマーク配置を持ってきてしまうと最初にある画像を読み込んでしまうので
普通に写真を読み込んでくれないのでbottomに設定する必要があります。

facebookにどういう感じで出るのかを確認できるところ。
http://developers.facebook.com/tools/lint/

チョーーー簡単に配置するのはこれが早いかと思います。
とりあえず、メモとして。

参考リンク:
http://www.hide10.com/archives/14684
http://www.ninxit.com/blog/2010/06/13/wp-social-bookmarking-light/


タグ: , , ,