Facebook OGPの仕様追加:FBページや個人アカウントと記事の連携を強める!

newogp_authorimg

facebookがOGP(オープングラフプロトコル)の仕様を追加しました。
Google+のサイトとアカウントのひも付けと似た感じですね。
設定はすごく簡単なんで、早速やってみました!

Facebookのpublisher・authorの設定

この設定を行うと、Facebookのニュースフィードに記事が流れていく時、Facebookページのいいね!ボタンや個人アカウントのフォローボタンが表示されるようです。

facebookが解説しているページでボタンが表示される例が掲載されています。
青矢印のところをご覧下さい。
 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
newogp_author

既にいいね!していたり、フォローしていたりする場合は表示されないようですが、そうでない場合は、ボタンが表示され、ニュースフィードからダイレクトにアクションを起こしてもらえるので、購読者を増やしたい方、いいね!を増やしたい方は必須の設定です。

では、実際に設定していきましょう!
記事をFacebookページと紐づけるか、個人アカウントに紐づけるかで挿入するタグが変わってくるようです。
個別に見てみます。

Facebookページと記事を紐づける設定

Facebookページと記事を紐づける場合は、ホームページのヘッダーにarticle:publisherを設定します。
以下のタグのFacebookページネームと書いている部分をあなたのFacebookページの独自ネーム(http://www.facebook.com/●●●●の●●●●部分)に変更して、ヘッダーに挿入するだけです。

<meta property=”article:publisher” content=”https://www.facebook.com/Facebookページネーム” />

個人アカウントと記事を紐づける設定

次はfacebookの個人アカウントと記事を紐づける場合です。
その場合もほぼ同じで、ホームページのヘッダーにarticle:authorを設定します。
以下のタグのFacebookアカウントと書いている部分をあなたのFacebookアカウントに変更して、ヘッダーに挿入するだけです。

<meta property=”article:author” content=”https://www.facebook.com/Facebookアカウント” />

私の場合は個人アカウントURLが「https://www.facebook.com/masahiro.matsuzaki」ですので、

<meta property=”article:author” content=”https://www.facebook.com/masahiro.matsuzaki” />

となります。

参考にさせてもらったサイト
OGPの仕様追加:記事にひもづくFBページや個人アカウントとの連携を強める : Facebook開発者向けドキュメントの日本語訳とTips
http://facebook-docs.oklahome.net/archives/52099811.html

このブログ(wordpress)に個人アカウント紐付けする!

このブログは、Facebookページを作らず、個人が書いているブログとしてに運営してきているので、個人アカウントに紐付けしたいと思います。

1. サーバから、wordpressのheader.phpをダウンロード
2. コード
 <meta property=”article:author” content=”https://www.facebook.com/masahiro.matsuzaki” />
 をコピーし貼付けて、ファイルを保存。
3. サーバへアップロード。

以上で、完了です!
開発者登録とか、アプリの登録とか、ややこしいことがないので、スムーズに設定できるかと思います。

まだ、始まったばかりなので、日本語圏では表示されないようです。
表示されているのが確認できた時点で、このページに表示されているキャプチャ画像も掲載したいと思います。

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">