項目主要是歐美項目,是以大多數網站都要內建facebook,twitter和email三個功能。随着google大力推廣google+,而且現在圖檔分享也很火熱。估計越來越多的網站會添加google+和pinterest功能。
但是從目前開放api來看。facebook是做的最好一家,文檔和示例都很豐富,是以開發者也願意接入facebook,不過可惜國内無法正常通路。網站需要相容ie7-10,chrome,firefox和蘋果裝置上safari。
功
能需求界面如下,點選圖1的圖示,彈出一個如圖2的模式對話框。然後就有一些相關的資訊,使用者就把title和description分享出去。點選
like button(這裡使用的西班牙語)。使用者可以輸入評論,然後把内容分享到facebook timeline上。
(圖1)
(圖2)
點選like button應該出現的效果如下圖:
(圖3)
在其他浏覽器中都是正常的。但是在ie中顯示不正常,這個like button有時出現,有時不出現。通過facebook線上代碼生成工具,操作步驟如下圖:
這個是很多開發者容易忘記的一點。但是我們遇到不是這個問題。因為我們使用的javascript動态拼接最後一個html代碼片段。但是我們隻有使用者點
擊了圖1的icon,才出現模式對話框,此時才顯示like
button。就是說一開始這個button根本沒有顯示出來,當我們打開模式對話框,fb:like标簽沒有去重新解析,是以顯示不了。
解決辦法是,需要調用fb.xfbml.parse()方法,讓浏覽器重新去解析一下fb:like标簽。
在
我們項目中,還不能簡單的在拼接html代碼片段之後調用fb.xfbml.parse()方法。因為模式對話框沒有打開,解析了也是沒有用的。是以我們
需要在打開模式對話框的函數裡面,先調用fb.xfbml.parse()方法,然後再顯示對話框。這樣就可以在ie浏覽器中正常的顯示like
button。