Facebookとの効果的な連携活用ができるOGPをZenbackのFacebook関連機能を利用して実装してみた (タスクマザー)

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対策)

head部分にOGP情報を追加

これで、ページを再構築。

再び、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表示設定できるようにして欲しい。

タスクマザー