このブログのFacebookページのほうに、記事の概要や画像がうまく表示される時と表示されない時があって、何とかしたいなあと思っていて調べました。
FC2ブログにFacebookのOGP(Open Graph Protocol)というものを設定すれば良いことがわかったので、ブログにメモしておきます。
OGPとは
OGP(Open Graph Protocol)とは、FacebookやmixiなどのSNSで使われている共通の仕様のことで、ページの内容を説明するものだそうです。詳しくはGoogle先生に聞いてもらえば詳しく書いてあるサイトがたくさんあるようなので、そちらを参照してください。
FC2ブログへのOGP設定方法
OGPの設定方法はそんなに難しくありません。FC2ブログのテンプレートに少し追記すればよいです。
①htmlタグの属性に追記する。
xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml”を追加します。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" >
②<head>～</head>タグの間に下記を追記する。
<meta property="og:site_name" content="<%blog_name>" /> <meta property="fb:admins" content="Admin ID" /> <!--index_area--> <!--myimage--><meta property="og:image" content="<%image>" /><!--/myimage--> <meta property="og:title" content="<%blog_name>" /> <meta property="og:type" content="blog" /> <meta property="og:description" content="<%introduction>" /> <!--/index_area--> <!--permanent_area--> <meta property="og:title" content="<%sub_title>" /> <meta property="og:type" content="article" /> <meta property="og:url" content="<!--topentry--><%topentry_link><!--/topentry-->" /> <meta property="og:description" content="<!--topentry--><%topentry_discription><!--/topentry-->" /> <!--/permanent_area-->
ここで、fb:admins の Admin IDですが、下記のURLのusernameのところに自分のアカウントを入力すれば情報が表示されるので、「id」のところにある数字が Admin ID になります。
http://graph.facebook.com/username
以上をテンプレートに追記したら、下記Facebookのデバッガーで動作確認できます。
https://developers.facebook.com/tools/debug
ここで、もし、fb:adminsにユーザーIDを設定しないとデバッガに以下の警告メッセージが出ます。Facebookインサイト (解析ツール) に必要らしいです。私のブログはいいねをしてくれる人がまだいないので、確認できませんが・・・。30人以上のいいねが必要みたいです。
fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.
また、違うIDを設定した時はデバッガで以下のエラーメッセージが出ます。最初はfb:adminsに何のIDを設定すればよいかわからずに、Facebookページの名前とか、自分のアカウントのユーザー名を入れたりなど試行錯誤してました・・・。
プロパティ「fb:admins」に指定された値「（間違って設定したID）」はタイプ「fbid」としてパースできないため、URL「（デバッガーに入力したURL）」のオブジェクト(タイプ「article」)は無効です
FC2ブログのテンプレートに追加したプロパティの説明
og:site_name・・・ブログの名前を設定しました。
fb:admins・・・既に説明しましたが、http://graph.facebook.com/usernameで調べた、FacebookのAdmin IDを設定しました。
og:image・・・画像のURLを指定します。トップページの場合に、FC2ブログのプロフィール画像を指定しました。記事ページの場合は、Facebookのほうで記事の画像を取ってきてくれることもあるので、私は指定しませんでした。好みに応じて記事ページの場合もプロフィール画像を指定してもよいかと思います。
記事ページの最初の画像は、FC2ブログにいい変数がなく自動的に指定することはできないみたいです。<%topentry_image_w300>で行けるかなと思ったんですが、Facebookのデバッガでエラーが出たので諦めました。
og:title・・・トップページの場合はブログ名、記事ページの場合は記事のタイトルを指定しました。
og:type・・・トップページの場合はblog、記事ページの場合はarticleを指定しました。ブログでも個別の記事ページではarticleを使うべきだそうです。
og:description・・・トップページの場合はFC2ブログの説明文（<%introduction>）、記事ページの場合は記事概要（<%topentry_discription>）を指定しました。記事概要はFC2ブログでは先頭200文字が自動的に取得されるのでしょうか。
og:url・・・記事ページの場合、記事ページのURLを指定しました。
参考にしたサイト
以下のサイトを参考にして、調べました。ありがとうございます。
FC2ブログのテンプレートの設定についてはこちらを参考にしました。
FC2ブログをFacebookのOpen Graph protocol(OGP)に対応させる
FacebookのAdmin IDの取得方法はこちらを参考にしました。
FacebookのOGPに fb:admins と fb:app_id の設定は必要？htmlタグのxmlnsは？