Zenbackが新機能を追加。
Google+ボタン、Facebookコメントなどに対応した。
すでにこのサイトでも、Facebookの「いいね!」ボタンは設置済みだったが、新たに「送信」ボタン、そして「Fackbook コメント」を追加した。
今回、Facebookとの連携が強化されるOGPを実装することにした。
通常はボタンの設置からFacebookのdevelopers(開発者)ページで取得していくところだが、すべてZenbackを利用することにした。
すでにZenbackは設置済みなので、Zenbackの管理ページにて、
・ブログへの表示項目 → facebook
・ソーシャルボタン → facebookの「送信」ボタン
・Facebook → Fackbook コメント
を追加した。
OGPを設定しない段階で、ページ確認を行った。
すると、Facebookコメントが表示される右上に「設定」リンクが表示される(Facebookにログイン状態)

これをクリックすると、以下のような設定画面が表示される。

すでに、インサイト設定で、アプリケーションIDは取得しているので、取得したIDが表示。
fb:admin→取得されていません。
これは、OGPを設定する上で必要な項目。
で、その下の「URLリンターで見る」のURLをクリックするとFacebookと統合されている情報が表示される。
このページは、FBのページであるURLリンターである。
この情報内容をみると、いくつか問題がある。

「ご注意のリスト」がチェック項目。
このページの場合、問題項目は、
・Description:ページの前後のタイトルが表示されている
・Image:メニュー部分にあるFeedバナーが表示
・Type:設定されていない。
これでは、あまりよろしくない。
そこで、OGPの実装。
MTなので、テンプレートに設定。
今回は、ブログ記事(個別)テンプレートのみに設定。
html宣言を以下に変更(IE対策)
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
head部分にOGP情報を追加
<meta property="og:type" content="article" />
<meta property="og:url" content="<$MTEntryPermalink$>" />
<meta property="og:image" content="http://表示させたいアイコン画像" />
<meta property="og:description" content="<$MTEntryExcerpt$>" />
<meta property="og:site_name" content="Webサイトの名前" />
<meta property="fb:app_id" content="xxxxxxxxxxxxxx" />
<meta property="fb:admins" content="zzzzzzzzzzzzzz" />
<meta property="fb:author" content="Harumi Nakano" />
<meta property="og:author" content="Harumi Nakano" />
これで、ページを再構築。
再び、Facebookコメントにある設定リンクをクリックすると、
fb:admin → zzzzzzzzzzzzzz(OGPで設定した自分のFacebookID)
これで実装は完了。
URLリンターで確認したところ、
きちんと設定した情報が反映されていた。
試しに、みなさん「いいね!」かFBコメント入れてみてください~(お願いします!!)
また、FBとの連携での結果表示など、その後の設定後経過をお知らせしますので。
さて、余談。
Zenbackを利用しないオリジナルの「Facebookコメント」の追加を試みていたところ、「Facebookコメント」だけは、iframeではなく、XFBMLのみでしか設定できないことなど判明。
XFBMLで実装する場合、Javascript SDKを指定が必要で、head部が以上に膨れ上がるのでいやだなと思いながら、Javascript SDKを実装していなくても、コメントが動いているWebページもあって・・・。
Javascript SDKを追求しだす仕舞い^^;
たぶん、XFBMLはiframeよりはカスタマイズが効くといわれており、そのカスタマイズ先がJavascript SDKを変更して使うようである。
なので、デフォルト設定であれば、Javascript SDKをページに設定しなくてもよいのか?と勝手に判断した。
まあ、Zenbackの機能を利用したので、今回はあまり追及しないことにした(^^;
けど、Zenbackの関連記事については、当方のサイトは、3記事まではまあまあ近い記事が表示されるが、4,5件目は怪しい。
設定は、最低5リストになっているので仕方がない。できれば3表示設定できるようにして欲しい。