Facebook喜欢按钮无法正常显示

时间:2012-10-29 16:01:51

标签: wordpress facebook-like

我的目标是在网址中使用php变量创建动态类似Facebook的按钮。我想我首先尝试插入一个静态的按钮来测试它,但我遇到了一些问题。当我第一次加载页面时,插入FB代码后,正确显示了类似的按钮。虽然,每次之后它只是显示一个白色的盒子,然后闪烁的类似按钮内容的大小就会消失。

我的情况可能是独一无二的,因为 是一个wordpress网站,但我不使用任何wordpress功能,例如post loop或任何设计布局功能。我只是使用wordpress发布帖子,这些帖子会转发到我自己的数据库,然后用我自己的代码显示它们。

在我的index.php <?php get_header(); ?>之后,我放了:

<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_GB/all.js#xfbml=1&appId=293105884122762";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


然后在我放置的网站上的随机位置:

<fb:like href="mysite.com" send="false" layout="button_count" width="450" show_faces="true"></fb:like>

我知道我需要为IE添加XML命名空间,但我认为它还没有必要。

如果有人有任何建议,我真的很感激他们。

2 个答案:

答案 0 :(得分:2)

在您喜欢的按钮所在的页面上包含以下代码行:

<script>
    if (typeof(FB) != 'undefined' && FB != null ) {
          FB.XFBML.parse();
    }
</script>
希望它有所帮助。这解决了我非常相似的问题。

答案 1 :(得分:0)

Facebook代码只是内联运行,因此如果页面底部未包含该代码,则必须致电FB.XFBML.parse()重新解析页面HTML,以查找<fb:/>代码。另一个选择是将此javascript放在页面底部,或者更好地使用functions.php中的钩子将其包含在wp_footer中。

<?php
// this function will output the facebook javascript code
function add_facebook_javascript(){ ?>
    <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_GB/all.js#xfbml=1&appId=293105884122762";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>
<?php
}
// this will hook your function to the "wp_footer" action
add_action('wp_header', 'add_facebook_javascript');
?>