[blogger]いいねボタンを置いたらぜひ設定！OGPをHTMLに追加してみました。

こんにちは！すなふです。
最近Facebookのページを作ってみたりもして、色々足掻いたりしています。
↓Facebookページ。
【Sunabox】(Click New Tab)

その時に、OGPとはなんぞ？って思って、色々調べたりしたのですが、単純に言えば、「いいね」をされたときに、その人の友達のニュースフィードにも、どこのどんな記事が「いいね」されたのかをしっかりと知らせるようにするための設定とのこと。

さらに調べてると、一部、設定しなくてもウォールには流れる、との話もあったので、なんだか必須なのかどうなのか、ちょっと混乱しているんですが、設定はしないよりはしたほうがいいだろうと思って、metaタグを追加することにしました。

参考サイト

ソーシャルネットワーク時代のWEBページに必要なOGPって何？機能〜導入まで | FBN Future box news | Facebook、Android、 iPhone WEBのこれからを伝えるメディア

ソーシャルネットワークが広がり始め、国内外数多くのサービスがリリースされていますが、facebook、mixi、GREEなど国内でも有数のSNSで利用されている、共通の仕様OGP（Open Grap ...

知っておきたいFacebookのOGPをBloggerに対応させる活用法 | Will feel Tips

そのままボタンを設置しただけでは殆ど意味は無く、OGPを設定してあげることで本来の機能を引き出すことが出来るようになります。今回は現状での最善策と考えられる、BloggerをFacebookのOGPに ...

OGPとは? 改めてOGPの重要性について考える時が来た。 | Last Day. jp

追加したコード

<!-- OGP -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='画像のURL' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='画像のURL' property='og:image'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='アプリID' property='fb:app_id'/>
<meta content='FacebookのID' property='fb:admins'/>
<meta content='ja_JP' property='og:locale'/>
<!-- /OGP -->

メタタグの説明

「og:type」＝何のページであるかを記述。「webpage」「blog「article」など、個別ページやアーカイブページに「blog」とすると、「いいね」される度にFacebookページが自動生成されるとの事で、トップページにのみ「blog」、あとは「artcle」にしています。
「og:title」＝ページの名前。それぞれ、bloggerでのページタイトルを引っ張ってこれるように。
「og:image」＝ウォールに流れる時の画像設定。アーカイブやインデックス、トップページではブログアイコンを指定。個別記事ページでは、記事の最初の画像を表示するよう設定。
「og:url」＝ページのURL。全体指定で、ページURLを自動記入するように設定。
「og:description」＝要約をどうするかという指定。Google+１の方で、ちょっと困ったことになるらしいので、未設定です。記事投稿時に、bloggerオプションのほうで設定するのが良さそう・・・ちょっと面倒ですがｗ
「og:locale」＝サイトの言語を指定。
「fb::admins」＝FacebookのIDを設定。必須ではないと思います。
「fb:app_id」＝これのためにFacebookでアプリ作成して、IDとりました。でも、必須かは微妙のような？

コードは、＜b:if cond＞を使って、個別記事ではこれ、アーカイブではこれ、という指定をそれぞれしています。
「画像URL」「FacebookID」「アプリID」をそれぞれに書き換えて使うようにしてくださいね。他はそのままコピペでいけるはずです。

また、

xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'

をテンプレートHTMLの『<html>』で始まるコードに追加してください。

確認しよう！

設定が出来ましたら、下記のサイトでタグがちゃんと指定出来ているか確認します。

■【デバッガー - Facebook開発者】(Click New Tab)

私の設定後は、こんな感じになりました。
解決する必要が、って出てるところは、画像の設定が200px以下の画像を使ったための注意と、descriptionが出来てないよっていう感じです。
特に影響はなさそうなので、スルーしています。

いいねボタンを置いている方は、取り敢えず設定しておくのがいいと思います。どういうものかって理解するのには時間かかりますが（私もしっかりとは・・・）、設定自体はすぐですので。

効果は・・・、いいねボタンをほとんど押されていないブログですので、実感しようがありませんでした！（・・

ではまた！

Pages

2012/05/30