Search code examples
javascriptfacebookfacebook-like

How can I embed a Facebook Like Box in my website?


I get the feeling this should be easy but I can't get anything to work.

I've created an app on Facebook for my website. I've set my site URL and made my app public.

According to the instructions I should add this code near the top of my body

<script>
window.fbAsyncInit = function() {
  FB.init({
    appId      : 'MY_APP_ID',
    xfbml      : true,
    version    : 'v2.2'
  });
};
(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/sdk.js";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Then I can embed plugins like this:

<div
  class="fb-like"
  data-share="true"
  data-width="450"
  data-show-faces="true">
</div>

When I do this I don't see any content inside the fb-like div.

I dug a little deeper and it seems that the sdk.js file that should be pulled in by the first bit of code is not. Instead the //connect.facebook.net/en_US/sdk.js URL returns a 307 Internal Redirect to about:blank.

I've cleared my cache and I've tried this code on localhost as well as on my actual domain and I changed the site URL to match.

What am I doing wrong?


Solution

  • In my case I had the Disconnect Chrome plugin running. It blocks requests to social media sites.

    I turned off the blocker plugin and all was well.