Why is a button like fb not displayed?

Question

I am upset because I spent many hours on it - there are other topics on this, but none of them solved my problem!

I just want to implement a 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:

<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 also added relevant meta tags in my head.

Any idea why it doesn't work?

Thanks!

Dennis

UPDATE 1

I used the fb debugging tool https://developers.facebook.com/tools/debug and it only says that the og image is not large enough - I think this should not be a problem though?

Answer 1

It appears that in step 1, 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> 

Answer 2

Now I have solved a similar problem. The FB-like button is displayed but does not work.

On my page <div id="fb-root"></div> was a div with position: relative; css attribute. After deleting position: relative; he is working again.