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=[\'"]([^\'"]+)[\'"]/', $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="http://dogmap.jp/2011/01/12/posts-list/" /> <meta property="og:title" content="Posts List" /> <meta property="og:image" content="http://static.dogmap.jp/2011/01/screenshot-160x160.png" /> <meta property="og:description" content="今まで書いた記事一覧を生成するショートコードを提供するプラグインです。@kai4den さんが、こんなことを言っていたのでサクッと作りました。さくら VPS への引っ越し祝いと言うことで。ダウンロードは以下からWordPress Plugins/JSeries » Posts List (記事一覧作成)ダウンロードした posts-list.php を wp-cont..." />
次バージョンの Head Cleaner プラグインにも実装しておきます。
2011年1月19日 水曜日 1:03 AM
Facebook の OGP (Open Graph Protocol）用のメタタグを出力する : dogmap.jp http://t.co/VB2dRZ5c
@miya0001 http://t.co/Sp2Az5sc http://t.co/Z6ZXtWgv http://t.co/V6nmEw6M 僕、みやさん、をかもとさんの各記事でいいねしました！
きめ細かい！→FacebookのOGP (Open Graph Protocol）用のメタタグを出力する http://t.co/V6nmEw6M
header.php にある <html> タグに xmlns:og="http://ogp.me/ns#" を追加
見てる:
見てる: 『Facebook の OGP (Open Graph Protocol）用のメタタグを出力する : dogmap.jp』 http://dogmap.jp/2011/01/18/facebook-ogp-meta-tag/
「Facebook の OGP (Open Graph Protocol）用のメタタグを出力する : dogmap.jp」 http://bit.ly/kUi1RH ( #heya_radio live at http://ustre.am/tsSi)
Facebook の OGP (Open Graph Protocol）用のメタタグを出力する : dogmap.jp http://htn.to/3p6pse
Facebook の OGP (Open Graph Protocol）用のメタタグを出力する : dogmap.jp http://t.co/3MpLAmH
RT @wordpress_fan: ブログにエントリ: Facebook の OGP (Open Graph Protocol）用のメタタグを出力する http://dogmap.jp/Dc [twicco.jp @wokamoto ]
RT @wordpress_fan: ブログにエントリ: Facebook の OGP (Open Graph Protocol）用のメタタグを出力する http://dogmap.jp/Dc [twicco.jp @wokamoto ]
ブログにエントリ: Facebook の OGP (Open Graph Protocol）用のメタタグを出力する http://dogmap.jp/Dc [twicco.jp @wokamoto ]