BloggerのOGPに「og:image」を記事毎に自前設定できるPHPスクリプト

BloggerをOGPに対応させるときのog:imageをなんとかする : たき備忘録」で書かれているようなことを自前のPHPでなんとか実現できないか?というのが本記事の内容です。

※PHPを動作するレンタルサーバーが別途必要です。

自前でやらないのなら、BloggerSpice

<meta property='og:image' expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url'/>

上記のようにテンプレートに埋め込めばOKです。

http://bloggerspice.appspot.com/postimage/[記事のURL] のように指定すると記事URLの画像をリダイレクト?してくれるようです。

http://bloggerspice.appspot.com/
仕様とかは上記に書かれています。

やっぱり自前でやりたいな

<meta property='og:image' expr:content='&quot;http://tool.example.com/test/ogp_img_url.php?url=&quot; + data:blog.url'/>

http://tool.example.com/test/というところに、「ogp_img_url.php」という名前で以下のPHPスクリプトを置いてあるという前提で上記のようになります。

http://tool.example.com/test/ogp_img_url.php?url=[記事のURL] と指定すると、指定したURLの記事の内容の最初のpicasaかflickr画像を探し出して、そこにリダイレクトするという動作をします。

<?php
//-------------
$first_img = "http://3.bp.blogspot.com/-47AYv50cSZg/TschruSBxDI/AAAAAAAAA_M/i3TcO8EiZIM/Blogger_icon.png"; //画像が存在しないときの代替え画像
//-------------

$url = $_GET['url'];

$content = file_get_contents($url);

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*?>/i', $content, $matches);

foreach( $matches [1] as $value ){
  if( preg_match("/(.blogspot\.com)|(.blogger\.com)|(.flickr\.com)/", $value) ){    $first_img = $value;
    //print($first_img );
    break;
 }
}

header("HTTP/1.1 301 Moved Permanently");
header("Location: ".$first_img);

?>

補足
・RSSでなくて、直接記事のHTMLを読みに行ってます。
・記事外でpicasaやflickr画像が使われてると、そちらが採用される危険性はある
・一番上の$first_imgのところを書き換えると、画像がないときの代替画像を変更できます。
・preg_matchのところに、保存している画像のURLのドメイン部分を書けば、picasaやflickr以外でも対応できます。|(.example\.com)のような感じで後ろに追加するとよいでしょう。
・動作確認はブラウザ上で直接URLを入力して、リダイレクトすれば動作しています。

適当に改造してください(^^;
改造ポイント
if(strcmp($value,"除外したい画像のURL) ==0){
  continue;
}
foreach( $matches [1] as $value ){の真下に上記のようなコードを書けば、除外したい画像を指定することが可能。
2つあるのなら、その下に同じものを書けばよい

ちゃんと動作しているか確認したい

facebook デバッガー
https://developers.facebook.com/tools/debug

ここでOGPを確認したい記事URLを入れれば、どういう情報が取得できているかを確認できます。

【ブログ内で関連ある記事】

スポンサーリンク

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。