Facebook like button bug on IE

The project is mainly for European and American projects. Therefore, most websites must integrate Facebook, Twitter, and email functions. As Google promotes Google +, image sharing is also booming. It is estimated that more and more websites will add Google + and Pinterest features.

However, from the current open API perspective. Facebook is the best company, with rich documents and examples. developers are also willing to access Facebook, but unfortunately they cannot access Facebook in China. Websites require compatibility with IE7-10, chrome, Firefox and Safari on Apple devices.

The functional requirement interface is as follows. Click the icon in figure 1 to bring up a 2 mode dialog box. Then there will be some relevant information, and the user will share the title and description. Click like button (Spanish here ). Users can enter comments and share the content to Facebook timeline.

(Figure 1)

(Figure 2)

The following figure shows the effect of clicking like button:

(Figure 3)

Facebook developer documentation: http://developers.facebook.com/docs/reference/plugins/like/

It is normal in other browsers. However, the like button sometimes appears and sometimes does not appear normally in IE. Use the Facebook online code generation tool to perform the following operations:

As mentioned in the second point, in the future to adapt to the old version of IE, you need to add the XML namespace in the HTML Tag, http://ogp.me/ns/fb#. This is a point that many developers easily forget. But this is not the case. Because we use JavaScript to dynamically splice the last HTML code snippet. However, the "like button" dialog box is displayed only when the user clicks the icon in Figure 1. That is to say, the button is not displayed at first. When we open the mode dialog box, the FB: Like tag is not re-parsed, so it cannot be displayed.

The solution is to call the FB. xfbml. parse () method and ask the browser to parse the FB: Like tag again.

 

 

 

Reference: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

In our project, we cannot simply call the FB. xfbml. parse () method after splicing HTML code snippets. Because the mode dialog box is not opened, parsing is useless. Therefore, in the function that opens the mode dialog box, call the FB. xfbml. parse () method first, and then display the dialog box. In this way, like button can be normally displayed in IE browser.