On my website the Facebook Like box disappears after exactly 45 seconds. I even put just the Like box code in it's own html document, verbatim from what I got from the developers site, but still the same outcome, so it seems like a Facebook issue, but I am not sure. I have tried on IE 11, FF 23.0.1, and the latest Chrome but it's the same thing.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[1];
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="https://www.facebook.com/Awesome.Animals" data-width="300"
data-height="375" data-colorscheme="light" data-show-faces="false" data-
header="false" data-stream="true" data-show-border="false"></div>
It happens because of NoScript. It will be fine if you allow all of Facebook's domains get through (both facebook.com and facebook.net).
For some reason the Facebook JavaScript meddles with the size of the Facebook generated iframe after 45 seconds. Check your browser developer console. Do you see a warning message?
fb:share_button failed to resize in 45s
As a fix, use CSS to force the iframe to be a certain height and width like so:
.fb-like-box iframe {
width: 110px !important;
height: 20px !important;
}
Related
I copy paste the facebook like button from
https://developers.facebook.com/docs/plugins/like-button#configurator
I insert that, problem is:
The button appears,
instead of liking my own page, it likes "social plugins" 2.3 millions !
What may I missed ?
<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/fr_FR/sdk.js#xfbml=1&version=v2.5&appId=1654009128211856";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
You need to enter your url on the configurer which you can find here:
You must have left the default link which is:
https://developers.facebook.com/docs/plugins/
Which has 2.3 million likes!
Good luck!
There is a form on that page that you plug in values, before you click "Get Code" to get cut-in-paste HTML code.
If you left their default URL in "URL to Like" there instead of your URL, this behavior would be explained
I waited for 1 month before posting this question.
On 2 my websites facebook button doesn't work, it shows 0 likes even if I click like and reload the page. On another website (always https) it works.
What it can be?
Example, doesn't work here:
https://www.intherimini.com/en/
<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=185407924984797";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.intherimini.com/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true" style="padding:3px 10px 3px 30px;"></div>
On another website (incinqueterre.com) it works fine with the same code (only href and appID is changed). The both App have the same parameters....
Finally I found the problem.
If your website has more than 1 language and the initial page just redirects you to your language page - it's not possible to set like button to the domain name. You have to set it to the page without redirect.
I have a js fiddle that demonstrates the issue
http://jsfiddle.net/RLQUR/
<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>
<div class="fb-like" data-href="http://www.flickr.com" data-send="true" data-width="450" data-show-faces="true"></div>
The code in the fiddle is directly from the facebook like button generator.
If you change the url to something like "http://www.google.com" it works just as it should. However, when using a flickr url and trying to click "Post to Facebook" it makes an AJAX request and returns with a status of 200 OK but does not post the comment to the profile or close the popup.
I believe this is likely a bug with the facebook like button, however I am unable to create a bug on the developer page for an unknown reason. I do not see a "Create" button on the page.
Any help is appreciated.
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.
I am using facebook like send, tweet and Google plus like this. I am specifying width 320 for facebook div and width 105 for tweet. But the facebook and tweet button's
(div/iframe) should be automatically increased and decreased on their own based on the content width inside them. Can someone suggest me a way to achieve this. My main
idea is to cut the gap between these sections.
<script type="text/javascript">
var SnImpl= "<%=SnImpl%>";
if (SnImpl == "true") {
(document, 'script', 'facebook-jssdk');
(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'));
(function() {
var scrGooglePlus = document.createElement('script');
scrGooglePlus.type = 'text/javascript';
scrGooglePlus.async = true;
scrGooglePlus.src = 'https://apis.google.com/js/plusone.js';
var scrWriter = document.getElementsByTagName('script')[0];
scrWriter.parentNode.insertBefore(scrGooglePlus, scrWriter);
})();
}
<div class="fb-like" data-href="<%=strSNURL %>" data-send="true"
data-width="320px" data-show-faces="false">
</div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url=<%=strSNURL %>&via=SomeOne&text=Something" style="width: 105px; height: 25px;"></iframe>
<g:plusone href="<%=strSNURL %>"></g:plusone>
You need to know ahead of time how wide to make the plugins.
If you specify 320px for Facebook, facebook's iFrame will become 320px. Facebook doesn't even know how much minimum width the iframe's contents will take, so it just follows your orders of 320px. (http://developers.facebook.com/docs/reference/plugins/like/) I would suggest trying to specify 120px and also changing the layout style to "button_count" as this one is fairly narrow as compared to the default "standard". "box_count" will be the most narrow choice of them all, taking up only 50px width.
For twitter (https://dev.twitter.com/docs/tweet-button), you can specify "vertical" for the count property and this will skinny it up to 58px wide.
For google (https://developers.google.com/+/plugins/+1button/), you can specify tall bubble to match the other two. This will give you a width of 50px.