takkaaaaaの日記

趣味について書いている個人ブログです

FC2ブログにFacebookのOGPの設定をしてみました


公開日:
最終更新日:
カテゴリ: FC2ブログカスタマイズ
※本ブログには広告が含まれます


このブログの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人以上のいいねが必要みたいです。

Admins And App ID Missing
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は?

takkaaaaaの日記トップページへ

私のブログを読んで頂き、ありがとうございます。管理人のtakkaaaaaです。

2013年から書き始めて、読んでくれた方に少しでもお役に立てればいいなと思って発信しています。よろしくお願いいたしますm(_ _)m

  • Location : 北海道の十勝地方出身、横浜市在住
  • Work : システムエンジニア・プログラマー(10年以上)
  • Interest :
    • ・音楽鑑賞(aikoのファンクラブに入ってます)
    • ・園芸・ガーデニング(観葉植物やイチゴやバジルなど)
    • ・投資・税金・節約(FP3級と日商簿記3級を保有)

詳しいプロフィールを見る
メッセージを送ろう