2015-08-19

この記事は機械翻訳されたものです。

Cutting Edge

基本的な Facebook プログラミング: JavaScript SDK (機械翻訳)

Dino Esposito 私は正直になるでしょう。正確社会的な戦略のように見える可能性がありますを知らないし、私は以上の社会の専門家があなたのコンテンツをより人気を再生することのトリックについてのかすかな考えはありません。同様に、私は決して Web サイトでは、検索エンジン最適化（SEO）に多くの注意を払って、その社会の最適化今日はるかに関連性と SEO が今までよりもやりがいのあるですと信じています。

このコラムの過去の 2 つの記事で私は Facebook を使用して、Web または Windows アプリケーションのユーザーを認証する方法、および同意ユーザーに代わってソーシャルネットワークに投稿する方法を説明しました。 (2 つの列で見つけることができます msdn.microsoft.com/magazine/jj863128 と msdn.microsoft.com/magazine/jj883950.)

Facebook が懸念している限りでは、「社会層」を Web サイトに追加するには行うことができますより多くです。ソーシャル・レイヤーは、3 つの主な成分の組み合わせから結果します。id、コミュニティとの相互作用。これら以前のコラムで私はアイデンティティとの相互作用のビットをしました。ここでは、真の社会層を既存の Web サイトに追加するのに活用できる主要ツールを探求するつもり。 Facebook によると、これらのツールは総称して社会のプラグインとして知られています。プラグインの社会 HTML マークアップの強力な組合せである CSS と JavaScript のコード。これらの要素に UX ヒューズ Web 開発者としてあなたの責任です。

ユビキタスのボタンのような

社会プラグインの主な目的は、ユーザーやユーザーの Facebook のページで訪問した Web サイトのコンテンツの間のブリッジを作成することです。 1 つまたは複数の社会プラグインをホストすることにより、Web サイトユーザーの特定のコンテンツを友人と共有することができます。最も直接的な方法をユーザーは Facebook を介してコンテンツを共有する Web サイトのようなボタンです。

ようなボタンをクリックするだけで、ユーザーは彼女は、指定された URL で何かが好き知っている友人をことができます。 Like ボタンはページをホスティング簡単にすることができませんでした。既存の ui ボタンを融合、いくつかの追加の手順が必要があります。

ようなボタンを埋め込むには、いくつかの異なる方法があります。最も簡単で最も直接の方法は、iframe 要素を使用します。

<iframe src="http://www.facebook.com/plugins/like.php?href=your-site"
  scrolling="no" frameborder="0"
  style="border:solid 1px #000; width:450px; height:80px"></iframe>

Href クエリ文字列パラメーターのようにし URL を指します。 URL は https://www.contoso.com/cool のような何かの完全に修飾された方法で表現する必要があります。

ほとんどのマークアップは、iframe のスタイリングでしました。通常は、スクロールするかフレームする iframe をしたくないです。あなたは、適切な領域にもします。上記のマークアップで出力が生成されます図 1。

The Standard Interface of the Like Button
図 1 のようなボタンの標準インタフェース

(未満 25 ピクセルまたはそう)、インラインフレームの高さが小さすぎる場合は、その他のコメントを投稿するボタンを含むパネルを失います。水平方向のメニューバー内のようなボタンを使用している場合は、高さが重要な問題です。それ以外の場合は、ユーザーも、自分のコメントを投稿する機会を与える機能の浸透を強化します。

一見、感じおよびボタンの機能をカスタマイズするために活用することができますいくつかのパラメーターがあります。 図 2 利用可能なオプション一覧が表示されます。すべては、追加のクエリ文字列パラメーターを割り当てられます。

図 2 を見て、感じると機能をカスタマイズします。

Parameter	説明
アクション	ボタンと実行される後続のアクションのテキストを示します。それがすることができますかをお勧めします。既定値ですのような。
colorscheme	ボタンは異なるスタイルです。それは、光や暗いすることができます。既定値は、光です。
font	プラグインの目的のフォントを設定します。可能なオプションには、ms p ゴシック、ms p ゴシック、Trebuchet MS と他のいくつかがあります。
layout	ボタンのレイアウトを変更します。可能な値は、(図 1) のように標準的な button_count、box_count （図 3）のようにです。
locale	UI の言語を示します。それは形式 xx_XX で文字列する必要があります。カルチャ名の 2 つの部分を区切るには下線を使用してください。
show_faces	コンテンツを 1 回のユーザーの画像をレンダリングするかどうかを指定するブール値のフラグが好きだった。
width	プラグインの幅を示します。幅の最小値も使用されるレイアウトに依存します。

中図 1 標準的なレイアウトを示しています図 3 button_count と box_count のレイアウトを示しています。

Additional Layout Formats (Button Count and Box Count) for the Like Butto
3 追加のレイアウトフォーマット (ボタン数とボックスカウント) のようなボタンの図します。

見てする必要がありますもう一つのパラメーターは、ref パラメーターです。 Web サイトのようなボタンの使用を追跡できます。各ボタンのような別の ref の値（も、サイトの異なるページで）を与えることによって-英数字のテキスト — 参照元は戻って、その特定のボタンのようにたどることができるサーバーのログを簡単に追跡することができます。特に、Facebook からあなたのサイト、クリックするのあなたと 2 つの余分なパラメーターの参照元 URL を受信します。 Fb_ref クエリ文字列パラメーターを元の ref 文字列だけであります。 fb_source クエリ文字列パラメーターは、クリックが発生した場所 Facebook 内からコンテキストについての情報を与える文字列です。

Like ボタンをローカライズします。

Like ボタンは普遍的な考えることができるが、まだのように変換する場合もあります、特定の言語のプラグイン。示すように図 2、すべてを行う必要があるロケールパラメーターをクエリ文字列に追加して、目的の言語と文化を示す独自の文字列を設定します。

物事は少しトリッキーするのには、xx に XX、文化、言語を示しています標準 XX 形式を使用して文化を表現できません。 Microsoft .NET Framework では、この文字列を次の式から取得します。

var name = Thread.CurrentThread.CurrentUICulture.Name;

この文字列が Facebook を使用するためには、ダッシュ、アンダースコアで交換する必要があります。また、唯一の共通言語トークンがそれ自体で十分でないし、全体のロケール設定は無視されます注意してください。この点はもう一つの興味深い考察に私をリード：何限り言語のようなボタンの既定の動作です心配している

Facebook は、彼女のプロフィールの主要な言語として、ユーザーが選択した言語も、トゥウィッターは、デフォルト設定されます。ユーザーの現在のログインではない場合は、UI ブラウザーで検出された言語設定に基づいています。

JavaScript SDK を導入

一般に、Facebook のプラグインはいくつかの異なる方法で構成できます。標準の URL、ユーザー設定のハイパーリンクからを使用してください。 (この記事で示すように、iframe を使用してください。 HTML5 マークアップを使用してください。拡張 Facebook マークアップ言語（XFBML) を使用して。 HTML5 と XFBML は多くの点で同じです。 HTML5 は、ちょうどより -完全を期すためのサポートされる最近の構文。 HTML5 と XFBML Facebook JavaScript SDK を必要とします。

最も洗練された社会プラグインは HTML5 と XFBML のマークアップを使用できます。これは直接に友人とコメントボックスのコメントは、特定の投稿に表示するコンテンツを送信するには [送信] ボタンのためのケースです。その他のようなボックスやアクティビティフィード (通知通常、ページの右上を持っているすべての友人からの小さなリスト) のようなのようなもすぐに構成でき、インラインフレームを介して埋め込まれたプラグイン。

Iframe または直接 Url を通じて実装されていないプラグイン Facebook JavaScript SDK の使用を必要とします。想像できるように、SDK クライアント Facebook エンドポイントあなたの投稿、コメントの取得認証が好きなようにタスクを実行してその他のアクションのための数のフロントエンドです。

それをダウンロードする前に、JavaScript SDK を使用するのには、アプリケーション ID が必要私は徹底的にこのポイント以前のコラムでは簡単に言うと、どのようなように、アプリケーションを登録し、一意の ID を取得する必要があります以上の基本的な操作が、Facebook のサイトと相互作用を議論アプリケーションは、クライアント (たとえば、Web サイトなど) と Facebook のバックエンド間のコネクタの役割を果たしています。ダッシュボードアプリケーションを登録する Facebook アプリケーションは、 bit.ly/mly4xs。

2 番目のステップは、SDK のダウンロード、Web ページにいくつかのコードを追加するので構成されます。起動する URL です。/connect.facebook。 net/xx_XX/all.js。

Xx_XX の URL で、目的のロケールのプレースホルダーです。この URL から静的なスクリプトタグ内のオプションにリンクします。ファイルのサイズは 180 KB よりもはるかですので、それを同期的に静的なスクリプトタグをダウンロードすることが得策できない可能性があります。ファイルがすぐにキャッシュを取得します、ほとんどの後続の要求は、「変更」HTTP 304 ステータスコードが表示されます。しかし、Facebook は、ファイルを非同期的にダウンロードをお勧めします。これは社会的な相互作用のために必要なすべてのスクリプトブロックに共通のパターンです-たとえば、それは Twitter のプラグインの動作します。ここで必要なコードは次のとおりです。

<script type="text/javascript">   
  (function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.
net/en_US/all.js#xfbml=1&appId=xxx";
    fjs.parentNode.insertBefore(js, fjs);
  } (document, 'script', 'facebook-jssdk'));
</script>

コードは、JavaScript の即時関数として定義されている、それが見つかるとすぐに実行されます。体の開口部とタグと、このコードできれば右配置するメモ、アプリケーション ID を appId パラメーターを埋める必要があります。 (多くの開発者は、スクリプトの本体セクションの下部に、ページのレンダリングのブロッキングが発生を防ぐために配置を支持するという注意してください)。

これは HTML5 と XFBML タグを使用して Facebook のプラグインには、ページを統合する準備が整いました。 [ログイン] ボタンを見てみましょう。

ログインボタン

SDK には、ログインプロセスをプログラムで発生することができますルート FB オブジェクトのメソッドが含まれます。最も簡単なオプションは、独自のリンクやボタンを追加して、次のコードをその click ハンドラーをバインディングで構成されます。

FB.login(function(response) {
  if (response.authResponse) {
    // Display some wait message 
    // ...
FB.api('/me', function(response) {
      $("#username").html('Welcome, ' + response.
name + '.');
    });
  } });

このコードは、過去の 2 つの列内の他の類似したコードよりもはるかに簡単です。この方法では、Facebook に対してユーザーを認証するは簡単です (を参照してください図 4)。

Authenticating Users via JavaScript
図 4 JavaScript を介してユーザーを認証します。

プラグインのログインログインプロセスはさらに簡単にすることができます。 SDK のリンクだけでなく、すべての必要な次の HTML5 マークアップ（または類似の XFBML マークアップに示すよう、Facebook のサイト）です。

<div class="fb-login-button"
  data-show-faces="true"
  data-width="200" 
  data-max-rows="1"></div>

データ-* 属性、ボタンの動作と外観を構成することができます。青色のボタンのページで図4標準的な外観のアイデアを与えます。特に、データで顔を表示属性をユーザーの画像 (およびあなたのアプリ Facebook に接続するために使用彼らの友人のいくつか) を表示することができます。データの最大行属性の面が格納する（プラグインの幅が設定) 行の数を決定します。

また、データで顔を表示は、ユーザーが既にログオンしている場合は、[ログイン] ボタン表示はいないことに注意してください。ユーザーの Facebook からあなたのアプリケーションをログオンできません。データ表示の顔が false の場合は、[ログイン] ボタンはすべてそのまま表示されるとそれをクリックした場合に反応しません。

Web 開発者は JavaScript SDK またはログインプラグインとサーバを使用して、深遠な違いを参照してくださいする必要があります側のコードと Facebook c# SDK。クライアント側の動作し、あなたは本質的に Facebook は、ターゲットにしているログインおそらくより特定の作業を行うために必要な第一歩であります。 Facebook は、ここでの目標です。

Facebook のユーザー認証方法の 1 つとして使用しているまだ ASP.NET および標準のメンバーシップシステムの認証 cookie を処理する必要がある場合は、c# コードをお勧めします。 Facebook はここです。

次回予告

ソーシャルネットワーク経由の認証は、認証が必要なすべてのサイトの機能が必要になりますので、それがないことを提供します。つまり c# SDK は、おそらく最も柔軟なアプローチを残ります。この点では、ASP.NET MVC 4、新しい社会的なクラスは、ちょうど、ケーキにアイシングされます。 Web サイト開発の面で、私は同様にページレイアウトの社会的なボタンとさえずるまたは即時のコンテンツを投稿するプラグインを設定しない理由はないです。次の時間、私は Facebook のプログラミングの詳細をカバーする戻る社会プラグインコメントやようなボックスなど詳細します。一方、Facebook 社会プラグインの詳細については、あなたに見ることができます bit.ly/fAU7Xe。

*Dino Esposito *「設計携帯ソリューションは、企業」（マイクロソフトプレス、2012）の著者である、"プログラミング ASP.NET MVC 3"(マイクロソフトプレス、2011年）との共著者"Microsoft .NET:Architecting Applications for the Enterprise』(Microsoft Press、2008 年) の共著者でもあります。Esposito はイタリアに在住し、世界各国で開催される業界のイベントで頻繁に講演しています。Twitter ( twitter.com/despos、英語) で彼をフォローしてください。

この記事のレビュー、次技術専門家のおかげで。クリストファー・ Bennage とスコット・デンスモア