My Facebook comment box is cut off half way. I saved this as HTML and opened it with Safari, Chrome and Firefox but they're all half cutoff. How do I fix that?
I have been trying for a long time and cannot get it to work. For simplicity's sake, I am using only the necessary code for the comment box:
<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 = "http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=170045126459927";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
</body>
</html>
Also, the page won't stop showing the loading sign.
The problem comes from your CSS file:
If you are using a Pluggin, you have to quit all the codes like
. facebook-comment { width: 95px !important; }
These codes are setting-up automatically by the plugin and don't allow you to settle the facebook comment box as you want.
Once you have done that, you can create a in your PHP console and then adding this class in your CSS file to customize your box as you want.
Related
I have project in wordpress with magazine theme. I noticed the facebook comment box was not displaying on single.php page. when I viewed through 'View Page Source' the code was present even space was left for comment box between the article and advertisement. I checked css for display:none or any other thing that might have caused but no solution yet.
I am getting that div as
where data-href is coming as "./" Please help.
Working sample:
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title></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 = "https://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:comments href="http://stackoverflow.com/" numposts="5" colorscheme="light"></fb:comments>
</body>
</html>
I've been trying to figure out why the code for my likebox will not work when I paste it into my page but it will load just fine when the same code is used in an html file. I got the code from the official facebook dev generator. The script code is in header.php and the code with the div that should call the js up is in the body of the message as raw html. Still, I'm getting nothing.
Has anyone else experienced this?
The following code will work when loaded from my computer. Will not work when I upload the same file to (loft3.com/hp.html) or when I try to use the code in header.php and call the second part in my post.
<html>
<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'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/hp" data-width="800" data-show-faces="true" data-header="false" data-stream="true" data-show-border="false"></div>
</body>
</html>
Update: the button is back : Facebook Share button: is it officially dead?
I have a strange problem. The Facebook share button has stopped displaying. The code used is
<p style="margin-top:-50px; margin-left:300px; width:600px;">Join us on Facebook
<a name="fb_share" type="button" share_url="https://example.com/"></a>
<script src="https://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
</p>
The code has not been changed since I was assigned to handle the website. Any ideas why this is happening? The HTML is there. But no button appears.
Facebook no longer use that.
Instead Use the below code.
And paste this after opening <body> tag
<div id="fb-root"></div>{literal}
<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=YOUR APP ID HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>{/literal}
Anywhere you want this to appear, add this code:
<fb:share-button type="box_count"></fb:share-button>
Make sure you change the App ID, You must create app first
I want to include Facebook share button and comment box to my website.
I have a code for share button:
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
<a name="fb_share" type="icon" share_url="www.example.com"></a>
For comment box:
<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=258471354227171";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="www.example.com" data-num-posts="3" data-width="600"></div>
Separately it works perfect, but when i put it in one page just one of them is working. What is a problem?
I think the solution you need is here:
Facebook Like button sometimes appears sometimes not
Basically you need to add the FB.share script after all.js.
How to make Facebook Comments plugin work on Google Chrome? It shows up in IE9 and Opera, but for some reason isn't accessible on Google Chrome.
Thanks in advance!
Codes Used(From Facebook Developers Comments):
<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>
and
<div class="fb-comments" data-href="http://websiteurl....." data-num-posts="1" data-width="500"></div>
Have you added the facebook xmlns attribute in the html header? I had some problems in a webpage with this plugin untill I added it.
<html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Besides, I use attributes in comments' div without the "data" and it works in all browsers:
<fb:comments href="WEB_URL" num_posts="10" width="500" notify="true"></fb:comments>