Blog

ブログ

プラグインを使わずにWordPressにFacebook用OGP（Open Graph Protocol）を設定する

, , ,

2011.10.23追記：
ここで解説しているコードには一部間違いがあります。 All in one SEOプラグインにも対応した、完全版はこちらです。

FacebookまわりでホットなOGP。

どんなものかというのはひとまず置いておいて、今回はプラグインを使わずにWordPressに設置する方法について説明します。

プラグインを使う方が楽だけど

簡単にFacebook用OGPを設定できるWordPress用プラグインは、既にリリースされています。

素直にこれを使えばいいと思いますが、Facebookのいつものノリで、いきなり仕様が変わってしまう可能性もあります。
それに、情報をもっと細かく調整したいこともあるかもしれません。

なので、以下のような条件で、エントリー・固定ページの画像も含めてOGPを出力するコードを書いてみました。

  1. アイキャッチ画像を指定している場合は、そのサムネイルを利用する
  2. ない場合は、記事中の画像のうち、最初にアップロードしたもののサムネイルを利用する
  3. それもない場合は、テーマディレクトリに入れた「ogp_default.jpg」ファイルを利用する

1. テーマ用関数を定義する

使用中のテーマの「functions.php」に、以下のコードを貼り付けます。
「add_theme_support」関数を指定して、アイキャッチ画像を必ず有効にしてください。

//アイキャッチ画像を有効にする
add_theme_support('post-thumbnails');

function post_ogp($id) {
	$noImg = 'ogp_default.jpg';
	//アイキャッチ画像を取得
	$eyeImg = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail');

	if ($eyeImg){
		//アイキャッチ画像があれば優先
		echo $eyeImg[0];
	} else {
		//エントリーに属する画像を取得
		$query = 'post_parent=' . $id . '&post_type=attachment&post_mime_type=image';
		$postImg = get_children($query);

		if (!empty($postImg)){
			//最初にアップロードされた画像IDを取得
			$keys = array_keys($postImg);
			$num = $keys[sizeOf($keys)-1];

			//画像IDからサムネイルを取得
			$thumb = wp_get_attachment_image_src($num, 'thumbnail');

			echo clean_url($thumb[0]);
		} else {
			echo get_bloginfo('template_directory') . '/' . $noImg;
		}
	}
}
  1. OGPを指定する

METAタグを書いている個所（たいていはheader.phpだと思います）に、以下のコードを貼り付けます。
このとき、最後の行の「fb:app_id」を、事前に登録した管理用のアプリケーションIDに書き換えてください。

追記：
何かおかしいと思ったらソースコードをpre要素にしてなかった；

<?php if(is_single()||is_page()) { ?>
	<?php while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt()); ?>" />
<meta property="og:url" content="<?php echo clean_url(get_permalink()); ?>" />
<meta property="og:image" content="<?php post_ogp($post->ID); ?>" />
<meta property="og:author" content="<?php the_author(); ?>" />
	<?php endwhile; ?>

<?php } else { ?>
<meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:url" content="<?php echo get_bloginfo('url') . $_SERVER['REQUEST_URI']; ?>" />
<meta property="og:image" content="<?php echo get_bloginfo('template_directory') . '/ogp_default.jpg'; ?>" />
<?php } ?>

<meta property="og:site_name" content="<?php bloginfo('name'); ?> | <?php bloginfo('description'); ?>" />
<meta property="og:type" content="blog" />
<meta property="fb:app_id" content="XXXXXXXXXXXXXXX" />

テーマを更新したら、各ページのOGPを確認してみてください。

補足

META内で使っている「$_SERVER[‘REQUEST_URI’]」という変数は、現在サーバーにリクエストを送っている、ドメインを除いたURIを返します。
つまり、WordPressのブログURIを足すと、現在アドレスバーに表示されているURLとなります。

localhostや一般のレンタルサーバーではほぼ問題ないと思いますが、特殊な設置条件だと、ちゃんと結果を返せないかもしれません。

画像関連の関数についてもいろいろ解説したいとこなのですが、本日はこれまで。