Facebook Like button not displaying/showing in any browser

Question

We are having an issue with the Facebook like button not showing/displaying, on this page:

http://powertextblog.esvelte.net/

It appears that the span and iframe that are generated have an inline style of width:0px and height:0px , I have tried overriding this to no avail.

The button is not showing in any browser.

This is the code we're using on the page (from AddThis) to generate the button.

<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:url="http://www.facebook.com/PowerText"></a>

I also tried inserting the Facebook like button using Facebook's own button generator, but the same problem occurs (which would indicate its not an AddThis issue)

Any help would be appreciated.

Styria

Answer 1

I had the same problem, tried everything until I figured out that was something really stupid. If your facebook page has any restriction, like Country restrictions or Age restrictions, facebook does not show the like button if you are not logged in.

Ransom

Hi, yes in the end it was because the page had an 18+ age restriction - removing that meant that it showed up everywhere! So it wasn't a code problem at all. :) Thanks for your help. – Styria

Answer 2

I think it is a Facebook bug causing the issue.

Removing the defined URL addthis:url="http://www.facebook.com/PowerText" and using the site domain instead, fixed the issue.

So I think there is some sort of FB bug where defining the URL as a Facebook page causes it to not display, as it works fine without it.

Styria

Answer 3

Try this facebook like code it should be work.

<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:action="recommend" fb:like:width="135"></a>

Maximalist

<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:action="recommend" fb:like:width="135"></a> – Maximalist

I added that code for the width and now it shows on Safari but not on Chrome or Firefox (didn't test IE). – Styria

set display: none; into your CSS and then - also via CSS - just add display: block; on hover.clear up your all z-index in my css file and set z-index: ....; set this jquery code <script> $(document).ready(function() { $('#li-id').hover(function() { $(this).addClass('pretty-hover'); }, function() { $(this).removeClass('pretty-hover'); }); }); </script> – Maximalist

Answer 4

Had the same problem yesterday. I then played around with the widget on https://developers.facebook.com/docs/plugins/like-button a while. Turned out this only happened with Facebook Page URLs (the URL to like). Even https://facebook.com/facebook itself didn't work correctly anymore. Simply rendered with 0px. All other URL worked as expected. Tried to reach FB on Twitter and they sent this link to the filed issue. Which says bug is known and fixed now.

So we simply had to wait. After one night the next morning all Like buttons with Facebook Page URLs rendered correctly again.

Pulverulent