HTML5 Like button doesn't show if logged out

Question

I've scoured the Internet and even popped into #facebook to no avail. I have tried the FBXML code and it behaves the same way: if you are not logged into Facebook the Like button will not render to the page.

What's weird is that the code is processed and FB inserts its magic into my fb-like div, however all the elements that would be seen have a width/height of 0. I'm at the end of the line as far as troubleshooting or discovering any helpful leads.

Below is the code I'm using. The FB SDK and fb-like element come straight from https://developers.facebook.com/docs/reference/plugins/like/.

In head:

<meta property="fb:app_id" content="APP ID"/>

Right before the body tag:

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        // Additional initialization code such as adding Event Listeners goes here
        FB.Event.subscribe('edge.create',
                function(response) {
                    $.trackEvent.apply(jQuery, ['Outbound Links', 'Click', 'Facebook']);
                }
        );
    };

    (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>

In body of page:

<div class="fb-like" data-href="http://www.facebook.com/mypage" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false"></div>

Answer 1

I've been able to confirm that the issue was with permissions! Not the permissions of my app, but the permissions of my FB page that I was intended people to Like.

My FB page had an age restriction of 18+ which was causing the issue. I removed the restriction and set it to 13+ and the jsFiddle code worked as expected.

I wouldn't have been able to come to this without the help of zeebonk who gave me a straight forward test to run which allowed me to begin the process of deduction. :)

Answer 2

Another thing you need to make sure is that your facebook page is actually published, ie visible to the public. When you first set up the page it defaults to unpublished. Be sure to un-check the first item in the Manage Permissions section of your facebook page settings titled 'Page Visibility'.

Had this issue and tried everything to sort it out. Once I actually published the page, the facebook button started appearing when I was logged out.

Answer 3

I've just had the exact same problem. If I was signed into Facebook within the same browser it would show the like box. If I wasn't signed in it wouldn't show [tried in all four major browsers]. After searching high and low for the answers it turns out you just have to set your age restriction within your Facebook like page settings to '13+ everyone' and this resolves the issue. Props to creativetim for the solution.

Answer 4

I had the same problem, changed 'Page Visibility' from 'Page Unpublished to 'Page Published'.

Answer 5

As creativetim mentioned this is related to Facebook's display permissions. It is, however, not limited to the age restriction. You must remove Country restrictions as well.