WordPress: facebookの「いいね」に使われる画像を指定するコード書いた

facebookの「いいね！」ボタンを押したとき、サムネイル画像として使われる画像を指定するWordPress用コードを書いたよ。 「いいね！」ボタン実装の詳細は他を当たってもらうとして、ここではサムネイル画像を指定する […]

facebookの「いいね！」ボタンを押したとき、サムネイル画像として使われる画像を指定するWordPress用コードを書いたよ。

「いいね！」ボタン実装の詳細は他を当たってもらうとして、ここではサムネイル画像を指定するプロパティ「og:image」に限って説明します。

コードは個別記事(post)で記述することを前提としているので、インデックスやアーカイブで使用する際は、自分で一工夫して下さい。

機能説明

「いいね」ボタンを押したときに使われる画像は、「Open Graph protocol」の「og:image」プロパティで指定されます。


<meta property="og:image" content="IMAGE_URL"/>

上記”IMAGE_URL”を適切に切り替えれば、個別記事でサムネイルとして使用される画像を指定できると言うことになります。

イメージ画像はPNG、JPEG及びGIFフォーマットが指定可能で、画像サイズは50x50px以上、画角は最大3:1までが推奨されるようです。

参考リンク：Open Graph protocol – Facebook開発者

手法１：アイキャッチ画像を指定する

WordPress2.9以降で採用されている、アイキャッチ画像（投稿サムネイル画像）をog:imageとして使用します。

WordPressの「画像を追加」機能を利用して画像を貼り付けているなら、この方法がスマートです。

以下のコードを、個別記事のヘッダ部でog:imageを指定している部分と置き換えてください。header.phpに全ヘッダを任せてる人は、is_single()辺りを使って切り分けてね。


<?php if(has_post_thumbnail($post->ID)) {
	$tid = get_post_thumbnail_id($post->ID);
	$url = wp_get_attachment_image_src($tid);
	echo '<meta property="og:image" content="'.$url[0].'"/>';
} else {
	echo '<meta property="og:image" content="DEFAULT_IMAGE"/>';
} ; ?>

記事にサムネイル画像が指定されていない場合は、「DEFAULT_IMAGE」をサムネイル画像として指定します。

「DEFAULT_IMAGE」には適当なイメージ画像を指定するか、サイトのfavicon.icoを指定するなどしてください。

手法2：記事で最初に出現した画像を指定する

記事本文で最初に現れる画像タグ(img src=”hoge”)を抽出し、該当画像(hoge)をサムネイルとして指定します。

ウチのブログみたいに、画像をflickrに置いてるようなサイトは、この方法が向いていると思います。

以下のコードを、og:imageを記述している行と置き換えてください。


<?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"/>';
} ; ?>

画像のURLをブッコ抜く正規表現は良い感じに適当です。あんまり変なHTMLコードを書くと動かないから気をつけてね。

動作確認

コードの記述が終わったら「URLリンター」を使って動作を確認しましょう。

自分のサイトの個別記事URL（ex. /post/post-14680/ ) を指定すると、そのページがfacebookからどの様に見えるのか確認出来ます。

ここで「情報 – Image」に表示される画像や、「Debug – Data Source」の内容を確認し、自分が意図したように動作しているか確認してください。

質問・要望・指摘事項など

質問・要望・指摘事項などなどあれば、コメント欄に書き込んで頂くか、ツイッター(@hideto)にご連絡ください。

ついでに、この記事の「いいね！」を押すのも忘れずにお願いします :smile:

B!