http://hoge.com/#1000 みたいな、ハッシュ以下の値に対してコンテンツを書き換えるサイトで、それぞれのハッシュに応じて異なるOpen Graph Protocol(OGP)を吐き出したい時の対処法。
1. まず同一ドメイン内に、OGP吐き出し用のPHPを用意する。
ex) http://hoge.com/share.php
2. 元のhtmlと同一のハッシュを受け取ってその値に応じたOGPを吐くようにする。
ex) http://hoge.com/share.php?id=1000
3. html内に設置したShareボタン、Likeボタンの対象URLを上記のshare.phpにする。
<div data-href="http://hoge.com/share.php?id=1000" data-send=false data-layout="button_count" data-width=450 data-show-faces=false></div>
4. このままだとウォールにshare.phpのURLが投稿されてしまい、ウォールからアクセスしたユーザーがshare.phpに飛んでしまうので、share.php内でfacebookのクローラー以外を元のhtmlにリダイレクトする。
facebookのクローラーはUserAgant内の“facebookexternalhit”の有無で判定する。
Best Practices – Facebook開発者
http://developers.facebook.com/docs/best-practices/
5. 以下share.phpの概要
<?php
$id = $_GET["id"];
$ua = $_SERVER['HTTP_USER_AGENT'];
//facebook crowlerじゃなかったらリダイレクト
if (!preg_match('/facebookexternalhit/i', $ua))
{
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://hoge.com/#" . $id);
exit;
}
//idに応じて情報を取得する
$api = "http://hoge.com/api?id=" . $id;
$json = file_get_contents($api);
$user_data = json_decode($json);
$username = htmlspecialchars($user_data->result->username);
$img_path = htmlspecialchars($user_data->result->img_path);
?><!DOCTYPE html>
<html lang="en" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta property="og:title" content="<?=$username?>'s page">
<meta property="og:description" content="SITE DESCRIPTION">
<meta property="og:url" content="http://hoge.com/#<?=$id?>">
<meta property="og:image" content="<?=$img_path?>">
<link rel="image_src" href="<?=$img_path?>">
<title><?=$username?>'s page</title>
</head>
<body>
<script type="text/javascript">location.replace("http://hoge.com/#<?=$id?>");</script>
</body>
</html>