I've got this code for the Facebook like button on an HTML page, taken directly from the FB developer site:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>FB Like button test</title>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:like href="http://developers.facebook.com/docs/reference/plugins/like" send="false" layout="button_count" width="90" show_faces="true"></fb:like>
</body>
</html>
When I look on Firefox or other non-IE browsers, I see a normal looking Like button, like this:
{Like} <[1.5m]
However, when I look at the same page on IE8, it doesn't show the like count, it seems to ignore the width="90", and I just end up with a long string like this:
{Like} Be the first of your friends to like this.
What's going on?
Related
I have a prolem with IE when i using the social facebook plug in.
This is my code:
<!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:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
....
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
...
</body>
And when i need to show the social plugin in my page, use this code from facebook
<fb:like-box href="http://www.facebook.com/pages/MYPAGE" colorscheme="dark" show_faces="true" header="false" stream="false" show_border="false"></fb:like-box>
This code work done in Firefox, Chrome, Opera but not on IE11.
I have tried to use this:
<html xmlns:fb="http://ogp.me/ns/fb#">
But, also in this case, IE doesn't show the plugin, all other browser yes.
Why is this??
I'm trying to display the like + send button on a test page. The code i'm using to display the button is:
<fb:like href="http://developers.facebook.com/docs/reference/plugins/like" send="true" layout="button_count" width="450" show_faces="false"></fb:like>
You can see that i have specified "layout=button_count" and "send=true" parameters. However only the like button is showed on IE8 (other browsers works fine) and not with the "button_count" layout but with the "standard" layout.
Do you have any clue?
Here is the full html+sdk+fbml code you can paste in your testpage:
<!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://ogp.me/ns/fb#" xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<meta name="DESCRIPTION" content="Just a test page" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="http://developers.facebook.com/docs/reference/plugins/like" send="true" layout="button_count" width="450" show_faces="false"></fb:like>
</body>
</html>
It seems to me that it's a Facebook bug.
I've posted it here: https://developers.facebook.com/bugs/216063688545697.
Since yesterday, I cannot see the full widget for comments from facebook. I have a website with articles, and for every article, a fb comments widget. First, I've thought it was a problem of layers or something, but i've created a new file and same problem is happening.
The code is:
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=386320764714835";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://steagu.ro/index.php?id=2806&cat=1" data-num-posts="5" data-width="630"></div>
</body>
</html>
You can see it in action here.
I've test it on Firefox 16.0.1 and also in IE 9.0.7
Any idea what's wrong?
include this line :
<html xmlns:fb="http://ogp.me/ns/fb#">
Use this Code and check
<!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">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=386320764714835";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://steagu.ro/index.php?id=2806&cat=1" data-num-posts="25" data-width="630"></div>
</body>
</html>
I have this simple html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
The comments list shows incomplete, and the loader images never stops nor disappear. What can be going on
Thanks
I've found that adding OpenGraph tags to the page fixes the issue. It seems that the tags are used by Facebook to link back to the Comments on the page. I've also seen the issue appear in local environments, but resolve themselves when hosted.
The following codes works in FF and Chrome, but IE6 does not render the connect button.
What am I missing here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title></title>
</head>
<body>
<fb:login-button>Login button</fb:login-button>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init("API_KEY", "/xd_receiver.htm");
});
</script>
</body>
</html>
Seems the problem is with the Maxthon browser and not the straight forward IE6.
Replace the javascript to this one:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=261463080590982";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>