王建硕: 在Blog上面集成Facebook Connect

刚刚把Facebook Connect在我的中文和英文的blog上面实施了一下。这样子，如果你有Facebook的账号，你就可以直接点那个Facebook的按钮，你的Facebook的信息，就自动填在评论的表单里面，你的评论旁边就有了你在Facebook的头像，而且接下来，我还可以让在这里的评论自动发表在Facebook里面，可以让别人看到。

做这些事情还是需要一点简单的JavaScript的编程。我有两个惊讶的事情：第一，Facebook的编程模型的确诡异，几乎所有的函数调用都接受一个回调函数作为最后一个参数，函数执行不是以返回结束，而是通过调用回调函数结束，这样就出现了迷宫一样的一个函数潜逃一个函数的状况，以及结束时候多达10个的右花括号或者右括号。第二，Facebook如何在一个Blog站点上面集成这样一个通用的应用，居然在他们的网站上面没有例子。如下的几行代码，倒还真是让我花费了一段时间，直搞得我眼花缭乱，耗时2个小时才搞定。所以想我应该把过程记录下来，以便其他blogger可以借用，同时也显摆一下，说明Hello World级别的编程，我还是可以的。

步骤

假设你有一个blog，无论是MovableType架的，还是WordPress，或者自己写的，只要你有一个留评论的表单，应该都可以使用这个办法。这是一个纯JavaScript的应用，不需要服务器端的编程。

看看这篇文章《尝试Facebook Connect（英文）. 按照里面的第一步（包含8个小步骤），和第二步，注册一个新的API密钥，然后设置一下你的回调文件所在的文件夹。我设的是：http://home.wangjianshuo.com/scripts/facebook folder。这个里面放着Facebook给的xd_receiver.htm文件。按道理我应该复述一下步骤的，不过复述步骤是在99年的时候做微软的支持工程师的几年做腻了的事情，不想再做了。大家移步到那里去看吧。
进入你的编辑器，来编辑模板。MovableType中要改的是“Invidivial Arcihve Page”，其他的工具应该也有类似的名字。
把HTML的根tag html从
<html xmlns="http://www.w3.org/1999/xhtml">
改成
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
。注意，就是添加一个fb的命名空间。这个可的确是不容易理解。不理解也罢。
找到输入名字，邮件和URL的地方（通常是一些input），把下面的代码粘贴进去。这个主要是一些格式上的东西，让你的那个Facebook的按钮在输入框的右边。我最终还是觉得用table来布局远比用CSS float等方式要来的直接和不容易出错。这段代码里面真正重要的，只有Facebook登陆按钮那一段，我用红色粗体表示。

<table width="80%" cellpadding="0" cellspacing="0">
<tr><td valign="top" id="authorInfo">
Name: <br />
<input name="author" /><br />
Email Address: (will not show)<br />
<input name="email" /><br />
URL: (optional)<br />
<input name="url" /><br />
</td><td width="50%" align="right" valign="top" style="border-left:1px solid #336699">
You can optionally sign in<br/> with your Facebook account.<br/>
<fb:login-button autologoutlink="true" length="long"></fb:login-button>
</td></tr></table>
把下面的一段贴在整个表单的后面，主要把apiKey,和xdPath替换成你自己的。我假设你的表单叫做comments_form，你的应该叫其他的名字。

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
      var apiKey = "655b6e2e042a5426d8f0b13dca4708fa";
var xdPath = "/scripts/facebook/xd_receiver.htm";
      FB.init(apiKey, xdPath);
      FB_RequireFeatures(["Connect", "Api"], function() {
                  FB.Facebook.init("655b6e2e042a5426d8f0b13dca4708fa", xdPath);
                  FB.Facebook.get_sessionState().waitUntilReady(function(){
                              FB.Facebook.apiClient.users_getInfo(new Array(FB.Facebook.apiClient.get_session().uid), ["name","proxied_email", "profile_url", "pic_small"], function(result, ex) {
                                          if(result.length > 0) {
                                                document.comments_form.author.value = result[0].name;
                                                document.comments_form.email.value = result[0].proxied_email;
                                                document.comments_form.url.value = result[0].profile_url;
                                                document.comments_form.author.readOnly = "readOnly";
                                                document.comments_form.email.readOnly = "readOnly";
                                                document.comments_form.url.readOnly = "readOnly";
                                                var authorInfo = document.getElementById("authorInfo");
                                                var img = document.createElement("img");
                                                img.src = result[0].pic_small;
                                                var td = document.createElement("td");
                                                td.appendChild(img);
                                                authorInfo.parentNode.insertBefore(td, authorInfo);
                                          }
                                    }
                              );
                        }
                  );
            }
      );
</script>
保存并且重新build一下你的文件

如果幸运的话，你看到的应该和我的这个blog的样子一样。不过。。。因为Facebook的异步和跨域通讯特征，我觉得一次调试成功的几率不大，尤其是根据这份极为简略的攻略来做。

如果有任何问题，可以留言。

很不错的hello world介绍，最近我也在研究facebook connect。回调函数作为参数应该是为了javascript异步操作，如果都等返回值的话页面会比较卡。

Posted by: Jack Yan on December 13, 2008 09:18 AM

我也测试一下，不过觉得不太爽，邮件地址自动填了这个：
apps+38313773529.500092955.84f0da6200cfd182ae1fde1f1899d1f7@proxymail.facebook.com

URL则是这个：
http://www.connect.facebook.com/profile.php?id=500092955

Posted by: Herock Xia on December 13, 2008 12:06 PM

成功的人各有不同，失败者大同小异

我觉得王建硕大哥是个成功者，而且是很有亲和力的成功者。你成功让我觉得成功并不是整天要一副郁郁寡欢的样子，一个男人的乐观并非总是一副冷峻的样子，也可以很洒脱，笑容背后才反映出一个男人的坚韧不拔

向博主学习，用笑容和努力面对生活！

Posted by: Owen on December 24, 2008 11:54 PM