Open Graph Protocol を導入する方法(FacebookやMixi用)

2011年1月18日 at 22:09

Mixiチェックや Facebook のいいねボタン。Facebookのウォールにサイトのリンクを共有するときに使われる Open Graph Protocol (OGP)というものがあります。

Open Graph Protocol については
http://d.hatena.ne.jp/amachang/20110117/1295233078

に詳しく書かれています。

以下に YokosoNews.com に導入した、サンプルを書いておきます・・・というか、ちょっと一般受けするようにシンプルにはしていますが・・・。

これをテーマファイルの<head>内に入れてくださいまし。

<?php
global $c;
$YokosoTitle = $c->getCollectionName();
$YokosoDescription = $c->getCollectionDescription();
$YokosoPageThumbnaillfb = LibraryFileBlockController::getFile($c->getAttribute('thumbnail')->fID);
$YokosoPageThumbnailSrc = $YokosoPageThumbnaillfb->getURL();
if ($YokosoPageThumbnailSrc == BASE_URL . DIR_REL . '/files/') {
$YokosoPageThumbnail="【サムネイルがない場合の画像のURL絶対パス】";
} else if ($YokosoPageThumbnailSrc) {
$YokosoPageThumbnail= $YokosoPageThumbnailSrc;
} else {
$YokosoPageThumbnail= "【サムネイルがない場合の画像のURL絶対パス】";
}
?>
<meta property="og:type" content="【タイプを設定】" />
<meta property="og:title" content="<?php echo htmlspecialchars($YokosoTitle, ENT_COMPAT, APP_CHARSET); ?>" />
<meta property="og:image" content="<?php echo $YokosoPageThumbnail; ?>" />
<meta property="og:description" content="<?php echo htmlspecialchars($YokosoDescription, ENT_COMPAT, APP_CHARSET); ?>" />
<meta property="og:site_name" content="<?php echo SITE; ?>" />


Type の一覽はこちらです
http://ogp.me/#types


あと、<html> タグ内で OGP を使用するという name space 宣言をします

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="<?php echo LANGUAGE?>" lang="<?php echo LANGUAGE?>">


※ 例は Facebook の <fb> タグも使用できるようにしています。



concrete5 のページ属性を使いこなすと、もっと面白いことが出来ます。
面白い。