ウェピックスではウェブ界の情報をピックアップします!
menu
ホーム > PHP と Facebook > ウェブサイト開発 > ソーシャルプラグイン > Facebook ウェブサイト開発 (Facebook for Websites)

Facebook ウェブサイト開発 (Facebook for Websites)

Pocket

Facebookウェブサイト開発

原文

Facebookプラットフォームに参加してウェブサイトを開発する
 Facebookプラットフォームが提供するサービスを利用することで、あなたのウェブサイトをよりソーシャル化することが可能です。

例えば、あなたのウェブサイトにHTML1行を追加するだけで、ウェブサイトへのFacebookユーザー関与を推進する「いいねボタン(Like Button)」等のソーシャルプラグインを利用することが出来ます。

また、Facebookのログインボタンとユーザー登録プラグインを利用することで、あなたのサイト独自のユーザー登録スキームを簡略化、あるいは取り除くことが可能です。

そして、Graph APIを利用することで、ユーザーが真に深い個人的な体験を記録した、完全なFacebookソーシャルグラフにアクセスすることが出来ます。

-1- ソーシャルプラグイン(Social Plugins)
 ソーシャルプラグインはFacebookプラットフォームに参加する最も簡単な方法です。HTMLコードをサイトに埋め込むだけでソーシャルプラグイン機能を利用できます。

FacebookユーザーはFacebookにログインしている場合は常にFacebookと関連付いています。従って、ソーシャルプラグインをあなたのウェブサイトに埋め込んでいれば、ユーザーが初めてあなたのウェブサイトに訪問した場合でも、ユーザーにパーソナライズされたサービスや情報を提供することができます。

最も重要なソーシャルプラグイン

最も重要なソーシャルプラグインは、「いいねボタン(Like Button)」です。
ワンクリックでユーザーとその友達とでページを共有することが出来るボタンです。

あなたのウェブサイト上では、「いいねボタン」が表示され、ボタンが押されたカウント数やユーザーの友達のプロフィール画像等が表示されます。

ユーザーがサイト上の「いいねボタン」を押したとき、サイトのURLやコンテンツがFacebookのユーザーのニュースフィード上(Facebookでユーザーが近況報告を掲載する場所)に表示されます。

あなたのウェブサイトにHTMLのiframeタグを任意の場所に埋め込み「いいねボタン(Like Button)」を追加することが出来ます。

サンプルコード
YOUR_URLをあなたのURLに差し換えます。

<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>

また、この「いいねボタン(Like Button)」を押したユーザーの友達の名前やプロフィール写真を表示させる等、多くのオプション機能があります。Facebookユーザーでないユーザーがページを訪問した場合は、このボタンを押したFacebookユーザーの人数が表示されます。このプラグインのコードを取得するにはこちらをご参照下さい。その他のソーシャルプラグインはこちらをご参照下さい。

実行

その他のソーシャルプラグイン
 「いいねボタン(Like Button)」が既にあなたのウェブサイトに導入されている場合は、その他のソーシャルプラグインを追加することで、あなたのウェブサイト全体を通して、より魅力的な体験へと導くユーザーとの対話が可能になります。

ソーシャルプラグインの「アクティビティーフィード(Activity Feed)」は、あなたのウェブサイト全体を通して、ユーザーの友達が「いいね」や「コメント」を行っている内容を表示させることが出来います。

ソーシャルプラグインの「おすすめ (Recommendations)」は、あなたのウェブサイト全体を通して、ユーザーにパーソナライズされたあなたのサイトのお勧め情報を表示します。

XFBML(拡張Facebookのマークアップ言語)
 

殆どのソーシャルプラグインは簡単なHTMLコードiframeタグを追加するだけで、あなたのウェブサイトに統合することができます。
その他に、XFBML(拡張Facebookのマークアップ言語)の使用を必要とするような「コメント」や「ライブストリーム」など、幾つかのソーシャルプラグインがあります。

XFBMLはソーシャルプラグインをあなたのウェブサイトにHTMLページに埋め込んで表示させるためのXML要素で構成されたセットです。ページがロードされた時にドキュメント中で見つかったすべてのXFBML要素がページ上にレンダリングされ、JavaScript SDKによって処理されます。

FacebookプラットフォームはソーシャルプラグインのすべてのXFBML要素を提供します。例えば、「いいねボタン(Like Button)」もXFBML要素を使用してページに配置することが出来ます。

<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like"></div>

Facebookプラットフォームに参加するのに最低限必要なiframeバージョンは最も広く使用されています。XFBMLバージョンはコードベースの多くの制御と整合性が必要であるため、より知識を持った開発者によってい利用されます。

XFBMLバージョンの使用を始めるのは簡単ではありません。各ソーシャルプラグインのXFBMLコードを生成するページがあるので、そのページのコンフィギュレーターの手順に従ってプラグインをセットアップし、あなたのウェブサイトに追加するためのコードを生成し取得して下さい。

Facebook ソーシャルプラグイン いいねボタン Social Plugins Like Button
Facebook ソーシャルプラグイン 送信ボタン Social Plugins Send Button
Facebook ソーシャルプラグイン 購読ボタン Social Plugins Subscribe Button
Facebook ソーシャルプラグイン コメント Social Plugins Comments
Facebook ソーシャルプラグイン アクティビティーフィード Social Plugins Activity Feed
Facebook ソーシャルプラグイン おすすめ Social Plugins Recommendations
Facebook ソーシャルプラグイン いいねボックス Social Plugins Like Box
Facebook ソーシャルプラグイン ログイン Social Plugins Login Button
Facebook ソーシャルプラグイン 登録 Social Plugins Registration
Facebook ソーシャルプラグイン Social Plugins Facepile
Facebook ソーシャルプラグイン ライブストリーム Social Plugins Live Stream

-2- 認証(Authentication)
 Facebookは、あなたのウェブサイトにログインシステムを提供することにより、あなたのウェブサイトのユーザー登録及びサインインを簡素化し、向上させることが出来ます。
ユーザーはもはや登録フォームに記入することもなく、サイト毎に使い分けているユーザー名とパスワードを記憶する必要もありません。
ユーザーがFacebookに署名されている限り、彼らは自動的にあなたのウェブサイトでも署名されます。
あなたのウェブサイトでFacebookのログインシステムを利用すると、ユーザーが自身のブラウザであなたのウェブサイトを訪れた瞬間から、Facebookは、社会的、個人的な経験を作成するために必要なすべての情報を提供します。

Facebookプラットフォームは認証と承認にOAuth2.0を使用しています。OAuth2.0を使用してあなたのウェブサイトに直接ログインシステムを追加することが出来ますが、オープンソースのJavaScript SDK を使用することで、より簡単にFacebookのログインシステムを使用することが出来ます。

JavaScript SDK を利用するにはアプリケーションID(appID)を取得する必要があります。appIDを取得するには、Facebookのアカウントを作成し、Facebookアプリケーションを作成し、アプリケーションにあなたのウェブサイトを登録する必要があります。こちらから新しいアプリケーションを作成してappIDを取得します。
appIDは一意の識別子(他に同じものがない唯一の文字列)です。これは、Facebookがあなたのウェブサイトとユーザーとの間で正しいレベルのセキュリティーを確実にするために必要なものです。

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId      : '*****************',
status     : true, 
cookie     : true,
xfbml      : true,
oauth      : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button">Login with Facebook</div>

1度あなたのウェブサイトページにJavaScript SDK をロードし、appIDを初期化します。そして、あなたは

<div class="fb-login-button">

要素を使用して簡単にログインボタンを追加出来ます。以下のように表示されます。

ユーザーがあなたのウェブサイトにログインする場合、
次の3つの処理が行われています。
最初に、Facebookはユーザーを認証する必要があります。これによりユーザーが保証されます。
第二に、Facebookはあなたのウェブサイトを認証する必要があります。これによりユーザーが他のサイトではなくあなたのウェブサイトに情報を公開することを保証します。
最後に、ユーザーが明示的にあなたのウェブサイトを認証する必要があります。これによりユーザーはあなたのサイトにどのような情報が公開されるか正確に知ることが出来ます。

これらの手順は複雑に見えるかもしれませんが、幸いにもあなたがするべきことは、ログインボタンを設置し、ユーザーがボタンをクリックするだけです。

-3- パーソナライズ(Personalization)
 Facebookのソーシャルプラグインはあなたのウェブサイトをパーソナライズする簡単な方法を提供しています。さらに、ひと度、あなたのウェブサイトにFacebookのログイン機能を追加すれば、あなたは、ユーザーにとってより深いパーソナライズされた経験を作り出すフルパワーのGraph APIにアクセス出来ます。

あなたは、Facebookユーザーのウォールとそのニュースフィードに公開するGraph APIを使用することが出来ます。

-4- 解析(Analytics)


タグ(=記事関連ワード)

タグ: ,

日付

投稿日:2012年2月16日
最終更新日:2012年02月26日

関連記事

このカテゴリの他のページ

この記事へのコメント

トラックバックurl

http://wepicks.net/phpfacebook-devwebsite_start/trackback/