1. Top
  2. » スポンサー広告
  3. » ネット関係
  4. » FC2ブログにFacebook用のOGPを設定

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログにFacebook用のOGPを設定

FC2ブログを使っていてFacebookの「いいね!(Like)」を設置している人だけに向けた内容。(居るのか?)

FC2ブログは標準機能で「いいね!(Like)」を設置可能となったが、そのままでは100%の動作はしない。Likeした人のウォールには表示されるものの、最新のニュースフィードには反映されない動きになる。これを最新のニュースフィード上に反映する為にはmetaタグにOGP(Open Graph Protocol)を指定する必要がある。世の中のサイトでもLikeした場合にニュースフィードに反映されたりされなかったりするのはこのあたりの理由による。

FC2ブログでも仮に既に対応されたテンプレートを使用している場合はこの対応は不要だがそんなテンプレートあるのだろうか(未確認)。

■標準の状態
標準の状態でLikeした場合、ウォールまで見に行くと以下のように表示されるが、ニュースフィード上には流れない。エントリーに対する拍手的な意思表示にはなるが、Likeした事は(Likeした人のfriendに)実質ほぼ誰にも分からないと言っていい。相手のウォールまで見に行くストーカー気質な人には気付かれるのかも知れないが。逆に言うと自分のニュースフィード上を汚さずに拍手が出来るので気軽にLike出来るというメリットもあるのだが、どうせならLikeしてくれた人のfriendも誘導したいところなので、これをニュースフィード上に流すように変更する。また、引用する画像や本文は完全にFacebookの解析に依存することになり、期待した場所が引用されない場合が多い。以下の例で言えば、画像はプロフィール欄から引用され、本文はサイトの説明欄から引用されている。
ピクチャ 1

最近まではLikeの場合はタイトルのみ・シェアの場合のみタイトルに加えて画像と本文が引用されていたが、先月以降はLikeの場合でも画像と本文が引用されるようになった。
参考:http://japan.cnet.com/news/service/20426785/
※これに伴い、シェアボタンは廃止される方向?確かに使い分けが微妙になる。

今までもOGPを指定していなかった為にシェアの際の引用箇所は少しおかしかったのだが、シェアの場合はシェアする人が画像と引用箇所を多少は弄れるのでまあ良いかと思って放置していた。ただ今回の変更でLikeの場合は有無を言わさずFacebookの解析に依存する為、対応を行いたいところ。少なくともLikeを設置しているページについては。

ちなみにリンクをシェアした場合に引用される箇所はLikeと同じ。

■修正方法
テンプレートを弄る必要があるが、結論としては以下を<head></head>内に記載する事で動作可能となる。(但しimageについては妥協あり)
試行錯誤した割には結論は簡単。

<!--permanent_area--><!--topentry-->
<meta property="og:title" content="<%blog_name> <%topentry_title>" />
<meta property="og:type" content="article" />
<meta property="og:description" content="<%topentry_discription>" />
<meta property="og:url" content="<%topentry_link>" />
<meta property="og:image" content="<%image>" />
<meta property="og:site_name" content="<%blog_name>" />
<!--/topentry--><!--/permanent_area-->

あと、<html>タグ内に xmlns:og="http://ogp.me/ns#" を追加する。

■FC2テンプレート変数の説明
<!--permanent_area-->~<!--/permanent_area-->
固定リンク画面(blog-entry-x.html)で表示されるブロック。自分も暫く勘違いしていたが、OGPは各個別のHTMLページに定義してあれば良く、複数件の一覧表示を行っている画面では定義する必要がない。
ちゃんと調べてはいないが、一覧表示中の画面であってもLikeを押すとFacebookがLikeボタンに記載されているURLに対してアクセスしOGP情報を取得しているみたい。従って一覧表示中にはOGP情報を出力しない為の制御。ちなみにURL単位のOGP情報はある程度はFacebook上にキャッシュされているようだ。

<!--topentry--><!--/topentry-->
本来はエントリーを繰り返し表示させるブロック。このブロックに囲まれた内容は各ページの出力条件に従って繰り返し表示される。前述の<!--permanent_area-->内に記載する事で、「固定リンク画面の場合のみ、該当する1件を表示」という動きになる。
<!--topentry-->の本来の用途とは異なる気がするが、このブロック内でないと動作しない変数があるのでやむを得ず定義する。<!--permanent_area-->内に記載しないと一覧表示中の画面ではOGPが複数件出力されおかしな事になった。FC2ブログのテンプレート変数は少し中途半端な状態になっており、「固定リンク画面の場合に使用可能」な変数が少ない為、仕方なく。

<%topentry_title>
表示中の記事タイトルを表示、タイトル中のHTMLは取り除かれる。

<%topentry_discription>
表示中の本文の要約(200文字)を表示。
通常の本文を表示する<%topentry_body>を使用するとHTMLタグが含まれている関係で表示が崩れる為、こちらを使用。

<%topentry_link>
エントリーURLを表示。

<%image>
プロフィール画像のURLを表示。これは妥協。
理想で言えば「現在表示しているエントリーの一番上の画像」を引用したいところだが、テンプレート変数ではそのような指定が出来なさそうなので、意図しない画像が引用されるよりマシだろうということで妥協。ただしこの方法の欠点として、手動でリンクをシェアする場合に画像が選べなくなる。まあでもシェアよりもLikeの方が頻度が高いだろう。或いは、ブログによっては指定せずにFacebookの解析に任せても良いのかもしれない(試していない。かつ、imageの指定は定義上は必須らしいが)。
プロフィール画像ではなく一律で表示したい画像がある場合はそのパスを直接指定すれば良い。

<%blog_name>
ブログタイトルを表示。

■動作確認
URLリンターより各個別ページのURLを入力。こんな感じになっていればOK。

ピクチャ 5

都度Likeして確認しても良いのだが、Facebook側である程度はキャッシュされるらしく、また、ニュースフィードにバンバン流すと鬱陶しがられるので、途中の動作確認はURLリンターが無難。

参考サイト:
http://www.misclog.com/socialmedia/98/

■ニュースフィード上の表示
Like・シェアともに、以下のような表示となり、Likeの場合でもニュースフィード上に反映されるようになる。
ピクチャ 4
これに対してコメントを付ける事も出来るので、今までのリンクのシェア機能とほぼ同じ機能と言えそうだ。
※と思ったが、スマートフォン向けのクライアントソフトで見た際に表示されないという違いがある?これはこれでかえって良いかもしれない

■OGPの参考:http://d.hatena.ne.jp/amachang/20110117/1295233078

注意点は"og:type"で、これに"blog"を指定した場合、"fb:admins"または"fb:app_id"を指定しないと、期待通りに動作しなくなる(初回のLikeがエラーになる=誰もLikeしていないページに対してLikeが出来なくなる)。あとおそらく(試していないが)、Likeした人のプロフィール上に表示されるような気がするが、ページ単位でこんな事をしたら明らかに迷惑。この為というか、ブログ記事のような一時的なコンテンツの場合には"og:type"には"article"を指定するものみたい。

fb:xxxを指定するとLikeしてくれている人のフィードにこちらから告知が出来るようになるようだが、ブログではあまり用途が思い付かない。山ほどLikeされるページならページ内容更新の告知的な使い道があるんだろうか(Facebookページを持っていない、或いは、FacebookページにLikeしていない人に対するアクセス)。いっそFacebookページを作らずにblog全体に対して1つのOGPを定義し、"og:type"に"blog"を指定する(あと、fb:xxxを指定)という方法もあるのかもしれない。で、更新した場合に告知を飛ばす、とか(流行る気がしないけど)。

有名人でも有名サイトない個人のブログで、日本で流行っていないFacebook用の対応を行う事にどれだけの意味があるのかは分からないが、まあ気分的になんとなくデファクトに対応している気にはなった。自己満足終わり。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。