在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从

改成

。注意，就是添加一个fb的命名空间。这个可的确是不容易理解。不理解也罢。

• 找到输入名字，邮件和URL的地方（通常是一些input），把下面的代码粘贴进去。这个主要是一些格式上的东西，让你的那个Facebook的按钮在输入框的右边。我最终还是觉得用table来布局远比用CSS float等方式要来的直接和不容易出错。这段代码里面真正重要的，只有Facebook登陆按钮那一段，我用红色粗体表示。

Name: Email Address: (will not show)

You can optionally sign in with your Facebook account. ****

• 把下面的一段贴在整个表单的后面，主要把apiKey,和xdPath替换成你自己的。我假设你的表单叫做comments_form，你的应该叫其他的名字。

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

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