Does the Javascript SDK version of the Facebook Like button w/ comments work on IE?
There are lots of questions about how to get a Facebook Like button working, but I would like to know: does anyone know of an example of the Facebook Like button, coded in XFBML and Javascript, where clicking on it makes the comments box show up, in Internet Explorer? Specifically, I'm trying to figure out if this behavior is broken on IE. I know that particular behavior works under Firefox and Safari.
I see examples of the iframe version of the Like button that pops the comments box in IE when you click "Like". But that's the iframe version, not the xfbml / javascript version. Also, (weirdly enough) the iframe version of the Like button doesn't display the comments box if you don't have show_faces turned on.
The Levi's site is sort of the gold standard in Like usage. Check out http://us.levi.com/family/index.jsp?categoryId=4305605&cp=3146842.3146844.3146854 -- the Like button with comments works in 开发者_运维问答Firefox and Safari, but not IE.
There are lots of different moving pieces here to track down -- for example, namespaces, app_ids, xhtml doctype, etc, etc. But before I get that far, I'm just wondering if the javascript / FBML version of the Like button with comments ever works under IE? And if does, is there an example somewhere? I have never seen one.
Thanks!
Yes, I have this working in IE on http://www.WasupPalmSprings.com. If you click on any of the stories from the home page, there is a like button at the bottom that shows the comments box in IE.
I have had issues with the comment box not showing in IE on other sites. Here is the checklist I use:
- Make sure you have the right xmlns attrs in the HTML tag on your page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http:// www.facebook.com/2008/fbml" xmlns:og="http:// opengraphprotocol.org/schema/">
Make sure you have <div id="fb-root"></div> somewhere on your page.
Make sure you have set up an app for your webpage because you need an app id. If you don't have an app, create one here: http:// www.facebook.com/developers/
Use javascript to load the Facebook connect javascript file. Do not just drop a <script src="..."> tag on the page. If you use jquery or similar, ideally this would go in the onReady handler. Otherwise, put it in <script> tag at bottom of the page.
Be sure to substitute your actual app id from the Facebook app you create where it says 'INSERT YOUR APP ID HERE'
window.fbAsyncInit = function() {
FB.init({appId: 'INSERT YOUR APP ID HERE', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Add meta tags with open graph information for your page. <meta property="og:title" content="YOUR PAGE TITLE HERE"/> <meta property="og:site_name" content="YOUR WEBSITE NAME HERE"/> <meta property="og:type" content="website"/> <meta property="og:url" content="URL OF PAGE HERE"/> <meta property="og:image" content="URL OF IMAGE YOU WANT TO SHARE"/> <meta property="og:description" content="YOUR PAGE DESCRIPTION HERE"/> <meta property="fb:app_id" content="YOUR FB APP ID HERE"/>
Finally add the like button wherever you want it to appear on the page. Be sure to substitute your own page URL.
<fb:like href="INSERT YOUR PAGE URL HERE" layout="button_count" show_faces="false" width="570" font="arial"></fb:like>
加载中,请稍侯......
精彩评论