發行項
08/24/2015

本文章是由機器翻譯。

技術最前線

基本的 Facebook 程式設計：JavaScript 和 SDK

Dino Esposito
我要老實了：我不知道確切的社會戰略可能是什麼樣子，我只不過是一個微弱思路可以發揮社會專家，以使您的內容更受歡迎的技巧。同樣，我從來沒有注意很多 Web 網站中搜尋引擎搜尋引擎優化（SEO），但我相信這社會優化是今天更多有關和比以往任何時候都是 SEO 的回報。

過去兩個分期付款的此列，討論如何使用 Facebook 的 Web 或 Windows 的應用程式的使用者進行身份驗證以及如何發佈到代表同意這項申請的使用者的社交網路。（這兩列可以發現在 msdn.microsoft.com/magazine/jj863128 和msdn.microsoft.com/magazine/jj883950.)

Facebook 而言，有很多你可以將添加到 Web 網站的"社交圈"。社會層結果從三個主要成分的組合：身份、社區和互動。在那些以前的列，我解決身份和相互作用的一點。在這裡，我要探討的主要工具，您可以利用它們添加到您現有的 Web 網站上的真實社會層。Facebook 指出，這些工具都統稱為社會的外掛程式。外掛程式的社會是功能強大的混合的 HTML 標籤，CSS 和 JavaScript 代碼。它是你的責任，作為一個 Web 開發者，這些元素融合到使用者體驗

像按鈕一樣無處不在

社會的外掛程式的主要目的是創建 Web 網站訪問的使用者和使用者的 Facebook 頁面上的內容之間的橋樑。通過承載一個或多個社會外掛程式，Web 網站使使用者能夠與朋友分享的具體內容。一個網站要讓使用者分享內容通過 Facebook 的最直接方式是 Like 按鈕。

只需按一下 Like 按鈕，使用者可以讓朋友知道她喜歡的東西在給定的 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 必須完全限定的方式，有點像 HTTP://www.contoso.com/cool 表示。

標記的大部分被旨在造型 iframe。通常情況下，您不希望的 iframe，在滾動或被陷害。您還希望它採取了相應的區域。前面標記生成的輸出圖 1。

The Standard Interface of the Like Button
圖 1 Like 按鈕的標準介面

如果 iframe 的高度太小（小於 25 個圖元左右），您將丟失包含按鈕將附加注釋的面板。如果您正在使用水準功能表列內的 Like 按鈕，然後高度是一個關鍵的問題。否則，讓使用者有機會還張貼他們自己的意見補充了功能的滲透。

有幾個參數，您可以利用自訂的外觀、感覺和按鈕的功能。 圖 2 列出了可用的選項。所有將分配通過附加查詢字串參數。

圖 2 自訂外觀、感覺和功能

Parameter	說明
動作	指示文本的按鈕和應採取的後續行動。它可以是像或建議。預設值是一樣。
計畫	不同樣式的按鈕。它可以是亮或暗。預設值為輕。
字體	設置外掛程式所需的字體。可能的選擇包括 arial 字體、宋體、宋體和其他幾個國家。
配置	更改按鈕的佈局。可能的值為標準（如圖 1），button_count 和 box_count （如圖 3）。
Locale - 地區設定	指示使用者介面的語言。它必須是一個字串格式 xx_XX 中。請注意使用底線分隔的區域性名稱的兩個部分。
show_faces	Boolean 標誌，用於指示您是否希望使用者的圖片呈現一次的使用者喜歡的內容。
寬度	指示該外掛程式的寬度。最小寬度還取決於使用的佈局。

雖然圖 1 顯示標準佈局， 圖 3 顯示的 button_count 和 box_count 的佈局。

Additional Layout Formats (Button Count and Box Count) for the Like Butto
圖 3 附加版式格式（計數按鈕和框計數）為 Like 按鈕

你可以考慮到的另一個參數是使用 ref 參數。它可以説明您跟蹤您的 Web 網站上的類似按鈕的使用。讓每一個像按鈕（即使在該網站的不同頁面）不同 ref 值 — — 平原的字母數位字串 — — 您可以輕鬆地跟蹤引用可以追溯回至像按鈕是特定的伺服器日誌中。尤其是，從 Facebook 返回到您的網站任何點擊，您將收到兩個額外的參數引用的 URL。 Fb_ref 查詢字串參數是僅僅是你原來的 ref 字串； fb_source 查詢字串參數是一個字串，它為您提供有關在 Facebook 中按一下源自何處從上下文的資訊。

當地語系化 Like 按鈕

即使 Like 按鈕可以視為普遍，仍有可能是您要在其中翻譯之類的情況下為給定語言外掛程式。如圖所示，在圖 2，您需要做的就是將地區設定參數添加到查詢字串，並將它設置為一個自訂的字串，指示所需的語言和文化。

若要使事情有點棘手，不能表達文化使用規範 xx XX 格式的語言和文化 XX xx 指示的位置。在 Microsoft.NET 框架中，您將獲得此字串從下面的運算式：

var name = Thread.CurrentThread.CurrentUICulture.Name;

這個字串可以使用 facebook，您需要在破折號替換為底線。此外注意到的唯一語言標記並不是足夠本身和整個地區設定將被忽略。這點我導致了另一個有趣的考慮因素：就語言 Like 按鈕的預設行為是什麼呢？

Facebook，以及作為 Twitter，預設為使用者已選擇作為她的設定檔中的主要語言的語言。如果使用者不當前登錄，然後使用者介面基於檢測到瀏覽器的語言設置。

引入 JavaScript SDK

一般情況下，您可以在幾個不同的方式配置 Facebook 的外掛程式：使用自訂超連結；從平原 URL 使用 iframe （如本文中所示）；使用 HTML5 標記；和使用擴展的 Facebook 標記語言 (XFBML)。 HTML5 和 XFBML，在很多方面；相等 HTML5 是只是更多的最近語法支援的完整性。 HTML5 和 XFBML 要求使用 Facebook JavaScript SDK。

最先進社會的外掛程式才可用通過 HTML5 和 XFBML 的標記。這是這種情況的內容直接發送到給定的帖子看到評論的朋友和注釋框中的發送按鈕。其他外掛程式如喜歡、像框和活性飼料（從所有朋友通知您通常對你頁面的右上角的小清單）還可以快速配置和通過 iframe 嵌入。

外掛程式通過 iframe 或直接的 Url 不執行需要使用 Facebook JavaScript SDK。你可以想像，SDK 是一個用戶端前端有好幾個 Facebook 終結點來執行任務，如身份驗證、過帳和檢索注釋，喜歡，和其他行動。

要使用 JavaScript SDK，甚至在你下載它之前，您必須擁有一個應用程式 id。我徹底討論這一點在前一列，但總括來說，進行任何交互與 Facebook 網站超出基本操作，如一樣，您需要註冊一個應用程式並得到一個唯一的 id。該應用程式支援您的用戶端（例如，Web 網站）和 Facebook 後端之間的連接器的作用。為註冊 app 的 Facebook 應用程式儀表板是發售 bit.ly/mly4xs。

第二步將一些代碼添加到您的網頁上下載 SDK 的由組成。要調用的 URL 為：/ connect.facebook。 net/xx_XX/all.js。

在 URL 中的 xx_XX 是預留位置，所需的語言環境。一個選項將此 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 立即函數和運行儘快找到它。注意您放置此代碼最好是右後開放身體標記和您應該填寫 appId 參數與您的應用程式 id。（請注意許多開發商主張在正文部分的底部放置腳本，以便防止任何阻塞頁面的呈現）。

在這一點上，你可以使用 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 + '.');
    });
  } });

此代碼是遠比在過去的兩個列中的任何其他類似代碼更簡單。這種方式，對 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 通過您的應用程式。如果資料顯示的臉是假的然後登錄按鈕保持可見所有的時間並不快速反應如果按一下。

作為 Web 開發人員，您應該看到使用 JavaScript SDK 或登錄外掛程式和伺服器之間的深刻差異端代碼和 Facebook C# SDK。如果您工作在用戶端，然後你基本上針對 Facebook，並登錄可能是必要的第一步要做更具體的工作。 Facebook 是我們的目標。

如果您使用 Facebook 的作為只是一種方式對使用者進行身份驗證，仍需要處理ASP.NET和標準成員資格系統的身份驗證 cookie 的 C# 代碼是可取的。 Facebook 是這裡的手段。

即將推出

只要它不是已經這樣通過社交網路的身份驗證將成為一個必須為所有需要身份驗證的網站。這意味著 C# SDK 可能仍然是最靈活的方法。在這方面，ASP.NETMVC 4 中新的社會階層都只錦上添花。在 Web 網站的開發，我同樣看到沒有理由不填充頁面配置與社會按鈕和外掛程式 tweet 消息，或立即發帖子。下一次，我會將回與 Facebook 程式設計涵蓋更多先進社會外掛程式評論和像框等。同時，對 Facebook 社會外掛程式的詳細資訊，您可以看一看 bit.ly/fAU7Xe。

Dino Esposito 是"構建移動解決方案的企業"(微軟出版社，2012年) 的作者和"程式設計ASP.NETMVC 3"（微軟出版社，2011年）和他的"Microsoft.NET：構建企業應用程式"（微軟出版社，2008年）。總部設在義大利，埃斯波西托是經常在世界各地的行業活動中發表演講。按照他在 Twitter 上 twitter.com/despos。

感謝以下技術專家對本文的審閱： Christopher Bennage and Scott Densmore