Why does the fb-like button not appear?

Question

I am frustrated because I spent hours on this - there are also other threads on this here on SO but none of them solved my problem!

I simply want to implement the fb-like button on my website, www.posti.sh - I wonder why it doesn't work?

Here is the code I use, according to https://developers.facebook.com/docs/reference/plugins/like/ step by step tutorial:

<div id="fb-root"></div> (directly after the opening body tag)

and

<div class="fb-like" data-href="http://www.posti.sh" data-send="true" data-width="450" data-show-faces="true"></div>

where I would like it to be.

I have also added the according meta tags in the head.

Anyone any idea why it doesn't work?

Thank you!!

Dennis

UPDATE 1

I have used the fb debugging tool https://developers.facebook.com/tools/debug and it only says the og image is not big enough - I guess that shouldn't be a problem though?

Draughts

Answer 1

It looks like Step 1 in the HTML5 Like Button code is missing the part that actually adds the Javascript SDK. The code should be:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Messy

awesome, thank you! it works, but do I need to provide an app id and a file channel.html? I don't have either... – Draughts

Nope, according to the FB.init docs all the arguments are optional. – Messy

Answer 2

Just now I resolved similar issue. FB-like button was displayed but didn't work.

In my page <div id="fb-root"></div> was in a div with position: relative; css-attribute. After removing position: relative; it works again.

Seabolt