CODEWITHSUNDEEP
javascripthtmlfacebook
user4643472
user4643472

Reputation: 483

Facebook like button rendered with 0 width and 0 height?

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?

Upvotes: 9

Views: 1816

Answers (2)

SmallBusinessHelper aka-Steve
SmallBusinessHelper aka-Steve

Reputation: 11

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!

Upvotes: 0

Ishan Kulkarni
Ishan Kulkarni

Reputation: 34

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.

Upvotes: 1

Related Questions