领先技术

  • 项目

Facebook 基本编程：JavaScript SDK

Dino Esposito

 

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 必须完全限定的方式，有点像 https://www.contoso.com/cool 表示。

标记的大部分被旨在造型 iframe。 通常情况下，您不希望的 iframe，在滚动或被陷害。 您还希望它采取了相应的区域。 前面标记生成的输出图 1。

The Standard Interface of the Like Button
图 1 Like 按钮的标准接口

如果 iframe 的高度太小 （小于 25 个像素左右），您将丢失包含按钮将附加注释的面板。 如果您正在使用水平菜单栏内的 Like 按钮，然后高度是一个关键的问题。 否则，让用户有机会还张贴他们自己的意见补充了功能的渗透。

有几个参数，您可以利用自定义的外观、 感觉和按钮的功能。 图 2 列出了可用的选项。 所有将分配通过附加查询字符串参数。

图 2 自定义外观、 感觉和功能

参数 描述
行动 指示文本的按钮和应采取的后续行动。 它可以是像或建议。 默认值是一样。
计画 不同样式的按钮。 它可以是亮或暗。 默认值为轻。
字体 设置插件所需的字体。 可能的选择包括 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 为：/ con­nect.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.NET MVC 4 中新的社会阶层都只锦上添花。 在 Web 站点的开发，我同样看到没有理由不填充页面布局与社会按钮和插件 tweet 消息，或立即发帖子。 下一次，我会将回与 Facebook 编程涵盖更多先进社会插件评论和像框等。 同时，对 Facebook 社会插件的详细信息，您可以看一看 bit.ly/fAU7Xe。

Dino Esposito是《Architecting Mobile Solutions for the Enterprise》（Microsoft Press，2012 年）和《Programming ASP.NET MVC 3》（Microsoft Press，2011 年）的作者，同时也是《Microsoft .NET：Architecting Applications for the Enterprise》（Microsoft Press，2008 年）的合著者。Esposito 定居于意大利，经常在世界各地的业内活动中发表演讲。有关他的情况，请访问 Twitter twitter.com/despos。

衷心感谢以下技术专家对本文的审阅：克里斯托弗 · Bennage 和斯科特 · 登斯莫尔