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>
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. :)