簡単にできる OGP を組み込むまでの最短手順

OGP 関係でいろいろと整理したので自分用にメモ。もうちょっとしっかり解説した以下の2つの記事がおすすめです。

OGP 組み込みの際の基本の記述

以下のコードを貼りつけてページによって必要な情報が流し込まれるようにすればそれで完了です。アプリケーションIDはアプリケーションを作成をしてすぐに取得することができます。

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html> 
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#"> 
<head>
	<title>ページのタイトル</title>
	<meta property="og:title" content="記事のタイトル"> 
	<meta property="og:type" content="blog"> 
	<meta property="og:url" content="記事のURL"> 
	<meta property="og:image" content="シェアした時に表示される画像"> 
	<meta property="og:site_name" content="ウェブル"> 
	<meta property="og:description" content="記事の概要"> 
	<meta property="fb:app_id" content="アプリケーションのID">
</head>
<body>

OGP の画像について

シェアするときに画像が表示されます。その画像のサイズは90×90が良いのかなと思います。他にも良いサイズがありましたらぜひ教えてください。

WordPress を使っている人向けのライブラリ作りました

ここから以下は WordPress を使っている向けの人のための情報です。WordPress には簡単に OGP を設定できるプラグインがあります。
WordPress › WP-OGP « WordPress Plugins

しかし、私の場合は自分用のプラグインを持ち回していますので、そこに統合するのとコンパクトにするために、このプラグインから最低限必要な部分だけを抽出・加工して新たにライブラリを作っておきました。ファンページにも対応しています。

使い方としては以下のような感じです。

1

<?php sample::ogp(Array('page_id' => 'ファンページID', 'app_id' => 'アプリケーションID')); ?>

ライブラリのコードは以下です。functions.php などに組み込みます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

class sample
{
	public function ogp($array)
	{
		$data = Array();
		$data['fb:page_id'] = $array['page_id'];
		if (is_home()) :
			$data['og:title'] = get_bloginfo('name');
			$data['og:type'] = 'website';
			$data['og:url'] = get_bloginfo('url');
		elseif (is_single() || is_page()):
			$data['og:title'] = get_the_title();
			$data['og:type'] = 'article';
			$data['og:url'] = get_permalink();
		else:
			$data['og:title'] = get_bloginfo('name');
			$data['og:type'] = 'article';
			$data['og:url'] = get_bloginfo('url');
		endif;
		$data['og:image'] = get_bloginfo('template_directory') . '/common/img/ogp.jpg'; 
		$data['og:site_name'] = get_bloginfo('name');
		$data['og:description'] = sample::ogp_description();
		$data['fb:app_id'] = $array['app_id'];
 
		$html = '';
		foreach($data as $property => $content) {
			$html .= sprintf("\t" . '<meta property="%s" content="%s">' . "\n", $property, htmlentities($content, ENT_NOQUOTES, 'UTF-8'));
		}
		echo $html;
	}
 
	public function ogp_description()
	{
		$default_blog_desc = ''; // default description (setting overrides blog tagline)
		$post_desc_length  = 75; // description length in # words for post/Page
		$post_use_excerpt  = 1; // 0 (zero) to force content as description for post/Page
		$custom_desc_key   = 'description'; // custom field key; if used, overrides excerpt/content
 
		global $cat, $cache_categories, $wp_query, $wp_version;
		if(is_single() || is_page()) {
			$post = $wp_query->post;
			$post_custom = get_post_custom($post->ID);
			$custom_desc_value = $post_custom["$custom_desc_key"][0];
 
			if($custom_desc_value) {
				$text = $custom_desc_value;
			} elseif($post_use_excerpt && !empty($post->post_excerpt)) {
				$text = $post->post_excerpt;
			} else {
				$text = $post->post_content;
			}
			$text = str_replace(array("\r\n", "\r", "\n", "  "), " ", $text);
			$text = str_replace(array("\""), "", $text);
			$text = trim(strip_tags($text));
			$text = explode(' ', $text);
			if(count($text) > $post_desc_length) {
				$l = $post_desc_length;
				$ellipsis = '...';
			} else {
				$l = count($text);
				$ellipsis = '';
			}
			$description = '';
			for ($i=0; $i<$l; $i++)
				$description .= $text[$i] . ' ';
 
			$description .= $ellipsis;
		} elseif(is_category()) {
			$category = $wp_query->get_queried_object();
			$description = trim(strip_tags($category->category_description));
		} else {
			$description = (empty($default_blog_desc)) ? trim(strip_tags(get_bloginfo('description'))) : $default_blog_desc;
		}
		if($description) {
			return $description;
		} else {
			return false;
		}
	}
}

このコードは公開用に書き換えておりますので未検証です。

関連記事

コメント

  1. ショウジンさんのコメント

    ライブラリ、使わせていただきました。
    URLリンターと自分でLikeボタンをクリックした
    際のテストしかできていませんが
    （Facebook上での友人のニュースフィードは確認していません）
    ちゃんと機能しているようです。

    ありがとうございます。