TopFacebook > 2012年1月
2012年1月27日

FacebookのOGPをチェックする方法

January 27,2012 1:23 AM
Tag:[]
Permalink

すでにご存知の方も多いと思いますが、FacebookのOGP(Open Graph Protocol)がウェブサイトのページ上に適正に設定されていることをチェックする方法を紹介します。

1.OGP(Open Graph Protocol)とは

OGPとは、ソーシャルグラフ内で任意のウェブページを表現するための情報を提供する技術で、次のようなmeta要素を指します。

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

OGPを設定すれば、Facebook上で該当のページを紹介するときにページのURLを貼り付けるだけで、次のように適切な内容が反映されます。犬の画像はog:imageに設定した画像、説明はog:descriptionに設定した内容です。

適切な内容を反映

またOGPを設定しておけば、ページに設定した「いいね!」ボタンを押したときの公開範囲が友達のニュースフィードに拡大されるという大きなアドバンテージがあります。

ちなみにOGPはミクシィやグリーでも利用されているようです。それらの設定方法については別途エントリーしようと思います。

2.OGPをチェックする

本題です。OGPの設定はページごとに手作業で設定するのではなく、Movable TypeやWordPressなどのCMSでOGPを自動出力するケースが多いと思います。

<meta property="og:title" content="<$mt:EntryTitle$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$mt:EntryPermalink$>" />
<meta property="og:image" content="<mt:EntryAssets lastn="1"><$mt:AssetURL<></mt:EntryAssets>" />

このような場合、きちんとしたOGPが出力されていることを確認する必要があると思います。また、OGPの設定内容(つまりCMSのテンプレートタグ)を変更した場合も確認した方が良いでしょう。

OGPをチェックするには、Facebookの「Debugger」を利用します。

Debugger
Debugger

「Input URL」に、確認したいページのURLを入力して「デバッグ」をクリック。

Debugger

次のように青色のメッセージだけが表示されればOKです。「Object Properties」にOGPの取得内容が表示されます。

OK

プロパティの設定が不足している場合などは次のような警告が表示されます。

警告

致命的な問題がある場合は次のようなエラーが表示されます。ちなみにこのエラー原因は、og:urlの内容が存在しないURLを設定したためです。

エラー

3.その他

Debuggerではmeta要素部分のみのチェックのようですが、html要素にも次のような設定が必要となりますので、忘れないようにしましょう。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#">
Comments [0] | Trackbacks [0]
2012年1月23日

Facebook OGPの「og:locale」について

January 23,2012 1:55 AM
Tag:[, ]
Permalink

Facebook OGP(Open Graph Protocol)をブログやウェブサイトに設定されている方は多いと思いますが、2011年の後半に「og:locale」というパラメータが途中で追加されています。すでに修正されている方も多いと思いますが、本エントリーで紹介しておきます。

1.「og:locale」とは

Facebookのオープングラフ(Open Graph)のアクション/オブジェクトは多言語対応しており、サポートしているロケールを「og:locale」に定義することで適切な翻訳が行えるようです(説明が大雑把過ぎるかもしれませんが)。

本エントリーでお伝えしたいのはこの部分で、日本語しかサポートしていない場合は次のように「ja_JP」を設定したmeta要素を追加すると良いでしょう。

<meta property="og:locale" content="ja_JP" />

複数の言語をサポートしている場合は、次のように「alternate」を設定し、content属性をさらに追加します。

<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

og:localeを含め、アクション/オブジェクトの国際化の詳細については「Internationalization」を参照してください。

2.「og:locale」の設定有無を調べる方法

ページのソースコードを直接参照するか、Facebookのデバッガ(Debugger)で該当のURLをチェックして、次のようなワーニング(赤枠部分)が表示されることで分かります。

エラーではなく警告ですが、メッセージは「That Should Be Fixed」となっています。また詳細メッセージでも、「他のタグから(ロケールの値を)推測できるとしても、og:localeは明示的に提供されるべき」とあるので、修正を推奨しているようです。

Comments [0] | Trackbacks [0]
2012年1月 5日

Facebook「シェア」の使い方徹底解説

January 5,2012 1:55 AM
Tag:[, ]
Permalink

Facebookのニュースフィードやタイムラインに表示されている「シェア」の使い方を詳しく解説します。

1.基本

まず基本情報として「シェア」というリンクがどこに表示されているか、下のスクリーンショットでご確認ください。

タイムラインに表示されている「シェア」
シェア

ニュースフィードに表示されている「シェア」
シェア

現在、Facebookで非推奨となっている「シェア」ボタンのことではありません。

Facebook Share(非推奨)
Facebook Share

以下、この「シェア」リンクを使った操作方法を詳しく解説します。「シェア」の機能や「シェア」と「いいね!」との違いなどについては、他のサイトで良記事が公開されているので、この記事の9項にあるリンクから辿ってください。

2.登場人物

動作確認はいつもの通り、テストユーザーを使っています。

説明で登場する人物は以下です。

  • Davidさん:ウォールにネタを投稿する人
  • Karenさん:Davidさんの投稿をシェアする人
  • Bobさん:シェアされた投稿を読む人

Davidさんが「おいしいラーメン屋がある」という投稿をし、それを読んだKarenさんがその投稿をシェアします。そして、Bobさんがシェアされた投稿を読むという図式です。

シェアの図式

3.Davidさんの投稿

Davidさんが自分のウォールに次のような投稿をします。

ニュースフィード

4.Karenさんによるシェア

KarenさんはDavidさんの投稿をシェアしようと思い、「シェア」をクリックします。

「シェア」をクリック

ダイアログが開くので、テキストエリアにシェアするときのメッセージを入力します。

メッセージを入力

「シェア」のところが「自分のウォール」になっていれば、自分のウォールに投稿されます。

自分のウォール

「友達のウォール」を選択することもできます。「友達のウォール」を選択した場合、投稿したい友達の名前を入力します。

友達のウォール

例えば、Karenの友達のBobを選択することもできます。友達の名前はインクリメンタル検索で表示されます。また「グループ」の選択やメッセージ送信を行うことも可能です。

友達を選択

公開範囲も設定できます。

公開範囲

すべての設定を行って「近況をシェア」をクリックすれば投稿完了です。

近況をシェア

フォームボタンの表示は、シェアする内容によって「リンクをシェア」「写真をシェア」などに変わります。また、リンクや写真などはニュースフィードからもシェアできるようです。

リンクのシェアの場合
写真をシェア

写真のシェアの場合
リンクをシェア

5.シェアされた投稿

シェアされたKarenさんの投稿はBobさんのニュースフィードに次のように表示されます。

シェアされた投稿

そして、Davidさんの投稿には「シェア1件」というテキストリンクが表示されます。

シェア1件

そのテキストリンクをクリックすると、シェアしてくれた人が分かります。

シェア1件

6.シェアされた投稿をさらにシェアするとどうなるか

シェアされた投稿をさらにシェアすると、どのように表示されるか確認してみましょう。

ここではKarenがシェアした投稿を、Bobがさらにシェアすることにします。

さらにシェア

Bobがシェアした投稿です。シェア元のKarenの名前は消えています。

シェアされた投稿

ただし、元ネタを提供したDavidさんのウォール投稿のシェア数は変わりません。

Davidさんのシェア数

その代わり、Karenさんのウォール投稿のシェア数が上がっていました。6つ手前の画像と比べてみてください。

Karenさんの投稿のシェア数

ちなみに、シェアされたものをシェアするときには、「xxより」という表示と「(削除)」のテキストリンクが表示されるようです。

テキストリンク

「(削除)」のテキストリンクをクリックすると表示が消えます。

テキストリンクをクリック

消した状態で投稿してみましたが、消さない場合との違い(例えばDavidさんにシェアがカウントされる等)はありませんでした。実際のユーザーでは何か違いがあるのかもしれません。ご存知の方、情報お待ちしています。

7.Facebookページの「シェア」

これまではユーザーのニュースフィードを例に解説しましたが、Facebookページでも同じように「シェア」が行えます。

Facebookページでの「シェア」
Facebookページの「シェア」

8.その他

調べてみたところ、タイムライン機能を使っている人の近況(テキストのみ)投稿は、友達のニュースフィードに「シェア」リンクが表示されないようです。その人のタイムラインを見れば「シェア」リンクが表示されます。間違ってたらすいません。

また、Twitter連携アプリでの投稿などでは、「シェア」リンクはニュースフィードにもタイムラインにも表示されないようです。

9.「シェア」の機能や「シェア」と「いいね!」の違い

「シェア」の機能や「シェア」と「いいね!」の違いを知りたい方は、以下の記事をご覧ください。

Comments [0] | Trackbacks [0]
2012年1月 1日

Facebook Platform SDKについて

January 1,2012 2:55 AM
Tag:[]
Permalink

Facebookの開発者ブログでPlatform SDKについて告知がありましたので、本エントリーで情報展開します。

Facebook Platform SDK Support
Facebook Platform SDK Support

1.SDKの種類とソース・ドキュメント

Facebookで現在サポートしているSDKの種類と、それぞれのソース・ドキュメントのURLは次の通りです。JavaScriptとPHPのgithubリポジトリはURLが変更になっているようなので注意が必要です。

JavaScript SDK

PHP SDK

iOS SDK

Android SDK

2.バグについて

バグや問題の報告には「バグツール」を使ってください、とアナウンスされています。

Bugs Tool(要ログイン)
バグツール

3.非推奨APIのSDK

以下のSDKは非推奨です。

  • Python SDK: 2012年4月1日にGitHubのリポジトリが非公開になる予定です。
  • C# SDK: 2012年4月1日にGitHubのリポジトリが非公開になる予定です。
  • Facebook iPhone SDK: iOS SDKと置き換えられます。リポジトリはすでに非公開です。
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3