天天看點

Facebook Like Button在IE上的bug

項目主要是歐美項目,是以大多數網站都要內建facebook,twitter和email三個功能。随着google大力推廣google+,而且現在圖檔分享也很火熱。估計越來越多的網站會添加google+和pinterest功能。

但是從目前開放api來看。facebook是做的最好一家,文檔和示例都很豐富,是以開發者也願意接入facebook,不過可惜國内無法正常通路。網站需要相容ie7-10,chrome,firefox和蘋果裝置上safari。

能需求界面如下,點選圖1的圖示,彈出一個如圖2的模式對話框。然後就有一些相關的資訊,使用者就把title和description分享出去。點選

like button(這裡使用的西班牙語)。使用者可以輸入評論,然後把内容分享到facebook timeline上。

Facebook Like Button在IE上的bug

(圖1)

Facebook Like Button在IE上的bug

(圖2)

點選like button應該出現的效果如下圖:

Facebook Like Button在IE上的bug

(圖3)

在其他浏覽器中都是正常的。但是在ie中顯示不正常,這個like button有時出現,有時不出現。通過facebook線上代碼生成工具,操作步驟如下圖:

Facebook Like Button在IE上的bug

這個是很多開發者容易忘記的一點。但是我們遇到不是這個問題。因為我們使用的javascript動态拼接最後一個html代碼片段。但是我們隻有使用者點

擊了圖1的icon,才出現模式對話框,此時才顯示like

button。就是說一開始這個button根本沒有顯示出來,當我們打開模式對話框,fb:like标簽沒有去重新解析,是以顯示不了。

解決辦法是,需要調用fb.xfbml.parse()方法,讓浏覽器重新去解析一下fb:like标簽。

我們項目中,還不能簡單的在拼接html代碼片段之後調用fb.xfbml.parse()方法。因為模式對話框沒有打開,解析了也是沒有用的。是以我們

需要在打開模式對話框的函數裡面,先調用fb.xfbml.parse()方法,然後再顯示對話框。這樣就可以在ie浏覽器中正常的顯示like

button。

繼續閱讀