« アクセスログ解析で現状把握 <分析編>~お店ばたけネットショップスキルアップ講座 | メイン | 7年ぶりの白山登山、天候はくもり一時霧または雨のちくもり、下山した白山麓は晴れでした »

TOP> Webをカスタマイズ

Facebookとの効果的な連携活用ができるOGPをZenbackのFacebook関連機能を利用して実装してみた

Zenbackが新機能を追加。
Google+ボタン、Facebookコメントなどに対応した。

すでにこのサイトでも、Facebookの「いいね!」ボタンは設置済みだったが、新たに「送信」ボタン、そして「Fackbook コメント」を追加した。

今回、Facebookとの連携が強化されるOGPを実装することにした。

通常はボタンの設置からFacebookのdevelopers(開発者)ページで取得していくところだが、すべてZenbackを利用することにした。

すでにZenbackは設置済みなので、Zenbackの管理ページにて、

・ブログへの表示項目 → facebook
・ソーシャルボタン → facebookの「送信」ボタン
・Facebook → Fackbook コメント

を追加した。

OGPを設定しない段階で、ページ確認を行った。

すると、Facebookコメントが表示される右上に「設定」リンクが表示される(Facebookにログイン状態)

ZenbackのFackbook コメント

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

ZenbackのFackbook コメント設定画面

すでに、インサイト設定で、アプリケーションIDは取得しているので、取得したIDが表示。

fb:admin→取得されていません。

これは、OGPを設定する上で必要な項目。

で、その下の「URLリンターで見る」のURLをクリックするとFacebookと統合されている情報が表示される。
このページは、FBのページであるURLリンターである。

この情報内容をみると、いくつか問題がある。

修正前の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リンターで確認したところ、
きちんと設定した情報が反映されていた。

修正後の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表示設定できるようにして欲しい。

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

トラックバック

このエントリーのトラックバックURL:
http://www.taskmother.jp/cgi-bin/taskmt/mt-tb.cgi/308

タスクマザーブログ
hrm_tskをフォローしましょう
Powered by FeedBurner

RSS2.0

最近のコメント

タスクマザー(taskmother)
  中野 治美

〒921-8806
  石川県野々市市北西部土地区画整理事業
     施工地区55街区3番202