在 Wordpress 上设置 Facebook 评论和点赞按钮

Setting up Facebook Comments and Like Button on Wordpress

我想为 Wordpress 博客安装 Facebook Comments and Like button。所以我在 <body> 之后设置了这个代码块。第一部分是Facebook SDK set for web,我认为这里没有错误。第二部分是 web 应用程序的代码块。 (我已将 appId 替换为 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>

然后我在单个 post 之后放置 Facebook Like 按钮。

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

然后是 Facebook 评论。

<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>

但是在我的 Wordpress temp demo 中,Facebook 评论出现了,而“赞”按钮没有出现。这里有什么问题吗?

最初,我想让 Facebook 评论变得灵活,所以给它一个 100% 宽度的值。但在那种情况下,我也无意中在 Facebook Like Button 中指定了一些 div。所以child的100%宽度只是让parent折叠起来,整个Like Button都折叠了。

您可以在 this temp demo or image.

中查看 Facebook Like Button 的整个当前结构