Setting up Facebook Comments and Like Button on WordPress

1 Views

I would like to install Facebook Comments and Like button for WordPress blog. So I set up this block of code right after <body>. The first part is Facebook SDK set for web, and I think that there is no error here. And the second part is a block of code for web application. (I have replaced appId with XXXXX.) 

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'XXXXXX',
      xfbml      : true,
      version    : 'v2.4'
    });
  };

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

<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/sdk.js#xfbml=1&version=v2.4&appId=XXXXXX";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Then I place Facebook Like Button right after single post.

Read More
<div class="fb-like" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div>

And Facebook Comments after it. 

<div class="fb-comments" data-numposts="3" data-width="100%" data-href="http://<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>" data-mobile="false"></div>

But in my WordPress temp demo, Facebook Comments shows up and Like Button does not. Is there any wrong here?

Post Views: 1

Related posts

1 comment

  1. Originally, I’d like to make the Facebook Comments flexible so give it a value 100% width. But in that case, I also unintentionally specified some div inside Facebook Like Button. So the 100% width of the child just make the parent collapsed, and the whole Like Button collapsed.

    You can check the whole current structure of Facebook Like Button in this temp demo or image.

Comments are closed.