CODEWITHSUNDEEP
htmlfacebookfacebook-graph-apifacebook-javascript-sdkfacebook-like
Jhonnatan Gonzalez Rodriguez
Jhonnatan Gonzalez Rodriguez

Reputation: 573

Like button doesn't display on my site

I'm trying to do some test with the like button of Facebook. I want to add it to my site, but it doesn't display. I'm testing it locally using Mamp for Mac OS. I am adding my code here; could you help me figure out the error? I've been trying with the FB SDK and iframe but they don't display anything.

<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
     FB.init({
      appId      : '145033796136',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>   
  <h1>Rumba Babylon</h1>
  <section>
    here probably show content
  </section>
  <aside>
    <h1>SOCIAL PLUGINS</h1>
    <div class="fb-like" data-href="https://www.facebook.com/enbodega?fref=ts"data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
  </aside>
  <script src="js/jquery.js"></script>
  <script src="js/main.js"></script>
</body>

Upvotes: 2

Views: 274

Answers (2)

Kumar Raushan
Kumar Raushan

Reputation: 1

Hey First try with the simple implementation, You are trying to load it asynchronously it will look for channel.html at the root or your domain. 

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

Also in the data-href tag you should pass your own page url where you are trying to add the Like button else you will not get the correct Like count for your page. Add the script with "fb-root" div just below the the body tag and use the following code where ever you want like button.

<div class="fb-like" data-send="false" data-layout="standard" data-width="450" data-show-faces="false" data-colorscheme="light" data-action="like"></div>

Hope it will work fine. If yes then you can start customizing it.

Upvotes: 0

smalu
smalu

Reputation: 441

Try to use XFBML version of like plugin:

replace 

<div class="fb-like" data-href="https://www.facebook.com/enbodega?fref=ts"data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>

to

<fb:like href="https://www.facebook.com/enbodega?fref=ts" send="false" layout="box_count" width="450" show_faces="false"></fb:like>

If it still don't work, add this just after FB.init:

FB.XFBML.parse();

Upvotes: 2

Related Questions