在Blog上面集成Facebook Connect

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

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

步骤

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

  1. 看看这篇文章《尝试Facebook Connect(英文). 按照里面的第一步 (包含8个小步骤),和第二步,注册一个新的API密钥,然后设置一下你的回调文件所在的文件夹。我设的是:http://home.wangjianshuo.com/scripts/facebook folder。这个里面放着Facebook给的xd_receiver.htm文件。按道理我应该复述一下步骤的,不过复述步骤是在99年的时候做微软的支持工程师的几年做腻了的事情,不想再做了。大家移步到那里去看吧。
  2. 进入你的编辑器,来编辑模板。MovableType中要改的是“Invidivial Arcihve Page”,其他的工具应该也有类似的名字。
  3. 把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的命名空间。这个可的确是不容易理解。不理解也罢。

  4. 找到输入名字,邮件和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 />
    <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>

  5. 把下面的一段贴在整个表单的后面,主要把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>

  6. 保存并且重新build一下你的文件

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

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