Facebook いいね!

Facebook の OGP (Open Graph Protocol)用のメタタグを出力する

Facebook いいね!Facebook の OGP (Open Graph Protocol)に対応したいい感じのメタタグを WordPress のヘッダに出力する方法です。
OGP については amachang さんの以下のエントリで詳しく解説されています。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

まずは、テーマの header.php にある <html> タグに xmlns:og="http://ogp.me/ns#" を追加してください。
その後で、テーマの functions.php に、以下のコードを追記しましょう。

function ogp_tags() {
	global $wpmp_conf;

	$title = '';
	$thumb = '';
	$excerpt = '';
	if (is_home()) {
		$url = trailingslashit(get_bloginfo('wpurl'));
		$excerpt = get_bloginfo('description');
	} elseif(is_singular()) {
		$id = get_the_ID();
		$post = &get_post($id);
		$url = get_permalink();
		$title = trim(wp_title('', false));
		if (function_exists('has_post_thumbnail') && has_post_thumbnail($id)) {
			$thumb = preg_replace("/^.*['\"](https?:\/\/[^'\"]*)['\"].*/i","$1",get_the_post_thumbnail($id));
		} else {
			$attachments = get_children(array(
				'post_parent' => $id ,
				'post_type' => 'attachment' ,
				'post_mime_type' => 'image' ,
				'orderby' => 'menu_order' ,
				));
			foreach ($attachments as $attachment) {
				$image_src = wp_get_attachment_image_src($attachment->ID);
				$thumb = (isset($image_src[0]) ? $image_src[0] : '');
				unset($image_src);
				break;
			}
			unset($attachments);
		}
		if (empty($thumb) && preg_match_all('/<img .*src=&#91;\'"&#93;(&#91;^\'"&#93;+)&#91;\'"&#93;/', $post->post_content, $matches, PREG_SET_ORDER)) {
			$thumb = $matches[0][1];
		}
		unset($matches);
		$excerpt = (
			!post_password_required($post)
			? $post->post_excerpt
			: __('There is no excerpt because this is a protected post.')
			);
		if (empty($excerpt)) {
			$excerpt = mb_strimwidth(preg_replace('/[\n\r]/', '', strip_tags($post->post_content)), 0, (isset($wpmp_conf["excerpt_mblength"]) ? $wpmp_conf["excerpt_mblength"] : 200), '...', 'UTF-8');
			$excerpt = apply_filters('get_the_excerpt', $excerpt);
		}
	} else {
		$url = site_url($_SERVER['REQUEST_URI']);
	}

	$out = '<meta property="og:site_name" content="' . esc_html(get_bloginfo('name')) . '" />' . "\n";
	if (!empty($url)) {
		$out .= '<meta property="og:url" content="' . esc_html($url)  . '" />' . "\n";
	}
	if (!empty($title)) {
		$out .= '<meta property="og:title" content="' . esc_html($title)  . '" />' . "\n";
	}
	if (!empty($thumb)) {
		$out .= '<meta property="og:image" content="' . $thumb . '" />' . "\n";
	}
	if (!empty($excerpt)) {
		$out .= '<meta property="og:description" content="' . esc_html($excerpt) . '" />' . "\n"; 
	}

	echo $out;
}
add_action('wp_head', 'ogp_tags');

これで、いい感じのメタタグが追加されるはずです。
ちなみにPosts Listに追加されるメタタグは、こんな感じです。

<meta property="og:site_name" content="dogmap.jp" />
<meta property="og:url" content="https://dogmap.jp/2011/01/12/posts-list/" />
<meta property="og:title" content="Posts List" />
<meta property="og:image" content="https://dogmap.jp/wp-content/uploads/2011/01/screenshot-160x160.png" />
<meta property="og:description" content="今まで書いた記事一覧を生成するショートコードを提供するプラグインです。@kai4den さんが、こんなことを言っていたのでサクッと作りました。さくら VPS への引っ越し祝いと言うことで。ダウンロードは以下からWordPress Plugins/JSeries &raquo; Posts List (記事一覧作成)ダウンロードした posts-list.php を wp-cont..." />

次バージョンの Head Cleaner プラグインにも実装しておきます。

Facebook の OGP (Open Graph Protocol)用のメタタグを出力する」への1件のフィードバック

  1. ピンバック: Tweets that mention Facebook の OGP (Open Graph Protocol)用のメタタグを出力する : dogmap.jp -- Topsy.com

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください