Facebook 应用程序开发

作者:Mike Diehl

您有 Facebook 页面吗?如果您有,那么您就是 6 亿活跃使用该社交网络服务的用户之一。我承认最初我抵制了加入 Facebook 的诱惑。毕竟,我已经有电子邮件、即时消息和 VoIP 了。我还需要另一种通信方式做什么呢?最终,诱惑战胜了我,我尝试了一下。郑重声明,我也试用过 MySpace 和 Twitter,但这些网站似乎对我没什么用。现在,我每次打开电脑,都会查看我的服务器、我的电子邮件和我的 Facebook。

我从没想过会发展到这种程度,但事实证明 Facebook 是一项非常强大的技术。到目前为止,我已经与教会、大学、高中、以前的工作以及我儿子的一些活动中的朋友取得了联系。我设法与我高中最好的朋友在 20 年后重新联系上了。我甚至还设法与我三年级最好的朋友重新联系上了!既然我已经 43 岁了,我认为这真是一项了不起的成就。就像我说的,这是一项非常强大的技术。

但对我来说,还有更多。我还从志同道合的朋友那里获得了博客和新闻文章的链接,以及我感兴趣的突发新闻的线索。很多时候,我在电视上看到或在报纸上读到事件之前,就已经在 Facebook 上听说了。最近,我一直在研究如何利用 Facebook 来推广我的新业务,我将在本文中分享我所发现的一些内容。

首先,让我们处理一些简单的事情。每个人可能都去过某个网站,并看到过 Facebook 的“赞”按钮。当用户点击这个按钮时,如果他们还没有登录 Facebook,系统会要求他们登录。然后,按钮点击会在用户的 Facebook 页面上添加一条简短消息,表明他们喜欢这个特定的网站。所有用户的 Facebook 好友都可以看到这条消息。假设一个人的许多朋友有相同的兴趣,这是一种非常简单的方式,可以将消息传递给潜在感兴趣的人。

在网站上添加“赞”按钮就像在您的页面中嵌入一小段 HTML 代码一样简单。Facebook 甚至提供了一个向导来帮助自定义按钮:https://developers.facebook.com/docs/reference/plugins/like

当我使用这个向导时,我得到了类似于清单 1 中所示的代码。这段代码使得 Web 浏览器显示类似于图 1 的内容。

清单 1。“赞”按钮代码


<iframe src="https://#/plugins/like.php?href=
&rarrhk;www.linuxjournal.com&amp;send=true&amp;layout=
&rarrhk;standard&amp;width=450&show_faces=true&action=
&rarrhk;like&amp;colorscheme=light&amp;font&amp;height=80"
 &rarrhk;scrolling="no" frameborder="0" style="border:none; 
 &rarrhk;overflow:hidden; width:450px; height:80px;" 
 &rarrhk;allowTransparency="true"></iframe>

Figure 1

图 1。“赞”按钮

Facebook 还提供了允许网站发布到用户 Facebook 页面以及将个人或页面添加到他们的好友列表的方法。这些方法记录在 https://developers.facebook.com/docs/reference/dialogs

在我进一步深入之前,让我传递一个我在研究这篇文章时偶然发现的小信息。Facebook 支持一个原始的聊天功能,允许用户与他们的朋友交换交互式消息。这个聊天功能是基于 XMMP 协议的,XMMP 协议与 Google Talk 和 Jabber 使用的协议相同。详细信息记录在 https://developers.facebook.com/docs/chat。本质上,您需要知道您的 Facebook 用户名和密码。然后,将您的用户名添加到 @chat.facebook.com 前面,以形成 Jabber ID。当我将此信息插入 Kopete 时,我能够使用 Kopete 与我的 Facebook 好友聊天。当我的朋友登录和退出 Facebook 时,我也能够获得实时更新。

Facebook 还提供了一种强大的方法来查询其数据库以获取各种类型的信息。使用一种称为 Facebook 查询语言 (FQL) 的语言,您可以请求关于 Facebook 用户的各种信息,但受访问限制约束。最简单的方法是使用 HTTP GET 访问方法。此方法允许您使用标准的 HTTP GET 执行查询。结果以 XML 格式返回。您只需将您的查询附加到此 URL 的末尾即可:https://api.facebook.com/method/fql.query?query=

例如,如果您有一个用户 ID 号码,并且想查找用户的全名,您可以使用类似这样的方法


https://api.facebook.com/method/fql.query?query=select 
 &rarrhk;name from user where uid=1690577964

 

令人惊讶的是,您的结果看起来像这样


<![CDATA[
<fql_query_response list="true">
       <user>
               <name>Mike Diehl</name>
       </user>
</fql_query_response>
]]>

 

FQL 要求您明确列出您感兴趣的每个字段。这意味着您不能像在 SQL 等语言中那样简单地使用 select * from...。因此,了解您可以使用的表和列非常重要。这在以下网址有详细记录:https://developers.facebook.com/docs/reference/fql

冒着重复网站上已有的内容的风险,以下是您可以查询的一些更有趣的表的列表(来自该网站)

  • comment:查询此表以获取与一个或多个 feed comment XID 关联的评论。

  • connectioncomment:查询此表以返回用户的朋友和用户连接到的 Facebook 页面。

  • friend:查询此表以确定两个用户是否链接在一起成为朋友。

  • like:查询此表以返回喜欢给定 Facebook 对象(视频、笔记、链接、照片或相册)的用户的用户 ID。

  • notification:查询此表以获取当前会话用户的通知,即出现在 https://#/notifications.php 上的任何通知。

  • profile:查询此表以返回用户个人资料或 Facebook 页面中显示在故事中的某些(通常是公开的)可查看信息。

  • status:查询此表以返回一个或多个用户的状态。

  • stream:查询此表以返回来自用户流或用户个人资料的帖子。

  • user:查询此表以返回用户个人资料中的详细信息。

您可以查询相当多的其他表,我还没有完全探索可以获得哪些信息。我可以告诉您,使用此查询方法不容易获得电子邮件地址和电话号码。此外,用户可以设置权限来确定可以检索哪些内容。

也就是说,您可以在服务器端程序中使用这些方法来获取关于用户的各种信息。但是,真正的强大之处在于能够通过 JavaScript 在客户端计算机上执行这些查询。(我稍后会向您展示如何做到这一点。)

在您可以使用 Facebook 的 JavaScript API 做任何有趣的事情之前,您需要成为一名开发者。成为开发者很简单,只需将“开发者”应用程序添加到您的 Facebook 个人资料并填写一份表格,该表格可在 https://#/developers 找到。一旦您填写完表格并同意 Facebook 服务条款,您就可以开始添加和配置您的新应用程序。您将为您定义的每个应用程序获得一个应用程序密钥。(我稍后会解释如何使用该密钥。)

Facebook 最近因其经常变化且有时执行不力的隐私政策而受到了很多负面宣传。但是,从阅读其服务条款(所有开发者都必须同意遵守)来看,Facebook 似乎真的在努力做正确的事情。例如,服务条款中的一些项目规定您不能向用户发送垃圾邮件。也就是说,您不能创建预先编写好的消息并将其群发给多个用户。对于您的应用程序执行的任何操作,您都必须始终提供“退出”选项。您不得存储个人数据以供您的应用程序外部使用等等。Facebook 的服务条款似乎都很合理,并且记录在 https://#/terms.php

现在所有的形式都走完了,让我们定义我们的第一个应用程序。通过访问 https://#/developers/createapp.php 开始该过程,并创建一个新的应用程序(图 2)。一旦您创建了新的应用程序,您就必须对其进行配置。

Figure 2

图 2。创建新应用程序

有六个配置选项页面,所以我不会对它们进行太详细的介绍。它们中的大多数都相当直观且有详细的文档记录。只要您理解当用户访问您的应用程序时 Facebook 执行的过程,您就不会觉得这很困难。因为理解这个过程至关重要,所以我将在查看更多代码之前稍微讨论一下。

关键概念是,所有 Facebook 应用程序都占据 Facebook 界面上的一个空间,称为画布。画布是您的应用程序的内容将被渲染的地方,并且嵌入在 Facebook 的其余外观和感觉中。本质上,Facebook 应用程序开发者只需使用 Facebook JavaScript API 和服务器端代码来执行应用程序的功能。因此,您可以使用任何您喜欢的语言编写服务器端代码。

当用户访问您的应用程序时,他们使用的 URL 类似于 http://apps.facebook.com/APP_NAME,其中 APP_NAME 是赋予您的应用程序的名称。因此,如果我创建了一个名为 mikestestpage 的应用程序,它将可以通过 http://apps.facebook.com/mikestestpage 访问。您会注意到此 URL 指向一个 Facebook 页面。当用户的浏览器加载此页面时,Facebook 会按预期向用户发送一个页面。但是,Facebook 还会嵌入您的应用程序画布代码的内容。最终结果是 Facebook 用户体验和您的程序代码之间的无缝集成。

为了避免过于抽象,让我们看一下清单 2 中所示的代码。

清单 2。Facebook JavaScript 演示


 1 #!/usr/bin/perl
 2   
 3   
 4 print <<EOF
 5 Content-Type: text/html; charset=ISO-8859-1
 6   
 7   
 8 <http>
 9 <head>
10 <title>test page</title>
11 </head>
12 <body>
13   
14 <script src="https://#/en_US/all.js"></script>
15   
16 <div id="fb-root">
17 </div>
18   
19 <hr><span id="who"></span>
20 </hr>
21 <p>
22 <div id=result>
23 </div>
24   
25   
26 <script>
27 var user_id;
28   
29 var r;
30   
31 FB.init (
32    {
33   appId  : '206854775749',
34   status : true,
35   cookie : true,
36   xfbml  : true 
37   }
38 );
39   
40 FB.getLoginStatus(t, false);
41   
42 function t (response) {
43   
44   if (response.session) {
45     r = response;
46   
47     var query = FB.Data.query('select name, uid from user 
       &rarrhk;where uid={0}', r.session.uid);
48   
49     query.wait(
50       function(rows) {
51          document.getElementById("who").innerHTML = 
            &rarrhk;rows[0].name + "\'s Minions!";
52       }
53     );
54   
55     var query2 = FB.Data.query('select uid1, uid2 from 
       &rarrhk;friend where uid1={0} order by uid2', r.session.uid);
56     query2.wait(
57       function(rows) {
58          var i = 0;
59          var friends = "";
60   
61          while (rows[i]) {
62              var friend = "<img width='20px' height='20px'
                &rarrhk;src=http://graph.facebook.com/" + rows[i].uid2 
                &rarrhk;+ "/picture> ";
63              friends = friends + friend;
64   
65              if ((i%20) == 19) { friends = friends + "<br>"; }
66              i++;
67          }
68   
69          document.getElementById("result").innerHTML = friends;
70       }
71     );
72   
73   } else {
74     FB.login(function(response) {
75       if (response.session) {
76          // user successfully logged in
77       } else {
78          // user canceled login
79       }
80     });
81     r = null;
82   }
83 };
84   
85   
86 </script>
87   
88 <p>
89 <fb:like href="http://apps.facebook.com/mikestestpage/" 
    &rarrhk;width="450" height="80"/>
90   
91 </body>
92 </http>
93 EOF
94 ;

这是一个简单的 Perl 脚本,但它旨在尽可能与语言无关。它所做的只是输出一些静态 HTML。第 1-13 行是简单的样板代码,用于生成有效的 HTTP 和 HTML 标头。第 13 行加载 Facebook JavaScript API。我发现我的应用程序无法工作,除非我包含了第 16 和 17 行中的代码;Facebook 必须在内部使用该 DOM 容器。其余的代码是有趣的部分。

第 19-23 行通过创建 whoresult DOM 容器来创建简单的应用程序布局。其余的代码都用于填充这些容器。这一切都在从第 27 行开始的 JavaScript 中完成。

第 31-38 行是您通过传递一个包含您的应用程序唯一标识符等的对象来初始化 Facebook API 的地方。第 40 行调用 getLoginStatus 方法并传递两个参数。第一个参数是当此方法返回时调用的回调函数。第二个参数与身份验证缓存有关;我发现如果我将其设置为 True,我的回调会被调用两次,这不太好用。

主要代码在第 42-83 行的回调函数中。第 44 行检查用户是否已登录。如果未登录,则执行第 73-82 行的 else 语句块。在这个简单的应用程序中,用户将有机会登录,然后必须重新加载页面。当然,更复杂的应用程序会为他们重新加载页面。

这留下了第 45-71 行。第 47 行创建一个 FQL 查询,如前所述。此查询所做的只是获取用户的姓名。第 49-53 行使用 wait 方法获取结果,并使用您隐式作为参数传递的回调函数来处理它们。在这里,您所做的只是创建一个包含查询结果的字符串值,并将其放置在 who DOM 容器内。这个方法被称为 wait 有点用词不当。这不是一个阻塞调用。此函数将在结果返回到客户端时异步调用。

在第 55 和 56 行中,您设置了另一个查询,并在另一个回调函数中处理结果。只有这一次,查询选择了当前用户的所有朋友(按 UID 号码)。回调函数(在第 57-70 行中)循环遍历该结果集。每次循环时,您都会构建一个 IMG 标签,该标签指向每个用户朋友的缩略图。在第 65 行,您确保在每渲染 20 张图片后开始新的一行图片。最后,您将所有图像标签批量发送到 result DOM 容器。然后浏览器开始加载图像。

这就是应用程序的大部分内容,除了第 89 行上的那一小段魔法。<fb:like> 标签是 Facebook 在将其结果发送到您的应用程序画布之前解释的标签。在这种情况下,您要求 Facebook 为您提供一个“赞”按钮,您的用户可以按下该按钮来向他们的朋友表明您的程序值得一试。有一整类这样的标签,称为可扩展的 Facebook 标记语言 (XFBML),我只是略微触及了可用的功能。本文旨在作为一个预告片,让您了解此功能是可用的。

图 3 显示了这个简单应用程序的结果。

Figure 3

图 3。我的小兵

正如您所看到的,Facebook 拥有庞大的用户群,并提供了许多强大的方式与这些用户互动。我已经演示了您可以在自己的网页上使用的一些巧妙技巧,并介绍了 Facebook Javascript API。我还简要展示了如何将您的应用程序集成到 Facebook 框架中。我希望这很有趣,并且我希望它能激起您对 Facebook 应用程序开发的兴趣。

加载 Disqus 评论