9

I am new to facebook api, so I don't know if this is a newbie question. What I did is I followed after Quick Start

I put the following snippet at the open tag of <body> (with my-app-id replaced, of course)

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.3'
    });
  };

  (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 = "http://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

and I have the following snippet at the place where I want the like button to appear:

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

This is the result of the rendering:

<div class="fb-like fb_iframe_widget" 
     data-send="true" 
     data-width="450" 
     data-show-faces="true" 
     fb-xfbml-state="rendered" 
     fb-iframe-plugin-query="...">
    <span style="vertical-align: top; width: 0px; height: 0px; overflow: hidden;">
        <iframe name="f246b6fae4" width="450px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like Facebook Social Plugin" src="..">...</iframe>
    </span>
</div>

I omitted the query and src part. I don't understand why it rendered with 0 width and 0 height. Both parent and self div are not styled to hidden. Please tell me what am I doing wrong?

user4643472
  • 483
  • 1
  • 3
  • 10
  • 1
    Please show an actual, testable/live example, without omitting parts that might be crucial. – CBroe May 28 '15 at 07:51
  • Can you provide a link to your Like Button? This will make it much easier to see if you're doing something wrong. – Sleepy Panda Jun 01 '15 at 04:27
  • Is it possible you rendered it in a hidden part of the page? See this related issue: [http://stackoverflow.com/questions/12291017/facebook-like-buttons-not-displaying-when-loaded-hidden](http://stackoverflow.com/questions/12291017/facebook-like-buttons-not-displaying-when-loaded-hidden). – DRosenfeld Jan 18 '16 at 15:50
  • 3
    Did you figure out what the problem was? I'm facing the same issue... – dennis-tra Jan 13 '17 at 13:49
  • Possible duplicate of [Facebook Like button not displaying/showing in any browser](https://stackoverflow.com/questions/14935287/facebook-like-button-not-displaying-showing-in-any-browser) – leymannx Jun 14 '17 at 13:41

2 Answers2

1

It's hard to give an answer without seeing the entire code, but it may be because of the following:

You are using http instead of https and due to this, Facebook is not allowing your request to go through. Running your script gives the following error in the browser console upon running:

Mixed Content: The page at 'https://jsfiddle .net/v98vq53r/' was loaded over HTTPS, but requested an insecure script 'http://connect.facebook.net/en_US/sdk.js'. This request has been blocked; the content must be served over HTTPS.

Ishan Kulkarni
  • 34
  • 4
  • 1
    It must be a comment not answer. – geminiousgoel May 17 '17 at 07:25
  • Ah I see, @geminiousgoel thank you very much for the feedback. It seems that I need 50 reputation in order to comment on other people's questions, which is why I could not comment on his question. – Ishan Kulkarni May 17 '17 at 17:16
  • if you post direct link in answer it converts to comment. You may read documentation. I am not pinching you, just sharing purpose only. – geminiousgoel May 18 '17 at 05:08
0

Maybe it MIGHT be something to do with EU Regulations imposed on Facebook? The usual Consent & Cookie nonsense... https://developers.facebook.com/docs/plugins/like-button/#like-button-for-the-web

Not sure if it helps you, but it's at least worth crossing this one of your checklist!

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
SmallBusinessHelper aka-Steve
  • 11
  • 3