Monthly Archives: September 2011

使用DeepLink的网站添加Facebook Like Button

这年头使用DeepLink的网站越来越多了,像Flash整的网站,本身在一个页面里,DeepLink是必须的,国外的Flash基本都有这个功能,不过。。。国内这样的网站就差多了,基本不加,无法根据URL导航到特定的内容页,相当得不好用呢。

而现在Ajax之后,Html5也进入实际的使用了,这样的网站很多也不再没事就刷新页面,白一下屏,多不爽,也都是使用DeepLink了。但是这样的网站想使用Facebook Like Button这样的按钮时,有些个麻烦了。

Facebook Like Button 的代码是这样子的:

<div id="fb-root"></div>
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#appId=272021599483200&xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-href="http://www.chrislearn.im" data-send="true" data-width="450" data-show-faces="true"></div>

这里的data-href就是Like的网站地址,Facebook会到这个页面去查找相应的og:title, og:description等等的值,然后将这个显示出来。但是,用DeepLink的网站因为页面没有刷新,因此,og:title这样的值是不会改变的,即使是用js改变它,也是没用的,Facebook不认识js.
我想到的一个解决办法是:
1. 修改这个script代码,原因是我想用js修改data-href的值。如果不改这个js,似乎这个js代码不会重复执行,即使改了data-href的值也不会有什么变化。大致上是移除这里的 script代码,用类似下面的代码代替, 并且在修改完data-href值后执行这个函数。

function createFacebookSdk() {
    var js, id = 'facebook-jssdk'; $('#'+id).remove();
    js = document.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js#appId=219934971396743&xfbml=1";
    $('head')[0].appendChild(js);
}

2. 在每次地址的锚点部分改变后,改变data-href的值。比如http://www.chrislearn.im/#/level0/这个地址时,把data-href的值改成:http://www.chrislearn.im/?path=level0&title=demo&description=des.并且重新调用createFacebookSdk方法,重新生成like button按钮。
3. 下面就是服务器端了,服务器端页面可以根据查询字符串来修改og:title这样的值。因为服务器端修改的,因此Facebook可以取到这些个值。但是我们的网页其实是根据#/level0/部分来显示内容的,我并不想再整一个解析查询字符串的js函数,所以,可以在服务器端可以向页面写入一个location=”http://www.chrislearn.im/#/level0/“的javascript的脚本块,让页面转向。下面是我一个项目里的一小段服务器端代码:

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string year = Request.QueryString["year"];
            string index = Request.QueryString["index"];
            if (!String.IsNullOrEmpty(year) && !String.IsNullOrEmpty(index))
            {
                string redirect = String.Format("window.location=\"Default.aspx#/{0}/{1}/\";", year, index);
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "RedirectByQueryString", redirect, true);

                OGTitle.Attributes["content"] = Request.QueryString["title"];
                OGDescription.Attributes["content"] = Request.QueryString["description"];
            }
        }
    }
}

OK了,大功告成。还有一点,Facebook的like button最后是以iframe来呈现,这样一个额外的好处是,容易浮到flash,silverlight上面。