Facebook like button not displaying properly

4 Views

My goal is to have dynamic Facebook like buttons using a php variable in the url. I figured I’d first just try inserting a static like button to test it out, but I’m encountering some issues. When I first loaded the page, after inserting the FB code, the like button displayed correctly. Though, every time after that it just displays a white box, the size of the like button content, which flickers, then disappears.

My situation may be unique as this is a wordpress site, but I don’t use any of the wordpress features, such as the post loop, or any design layout features. I just use wordpress to publish posts, which get forwarded to my own database, and I display them with my own code.

Read More

Right after <?php get_header(); ?> in my index.php, I’ve put: 

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

Then in a random place on the site I’ve put: 

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

I know I need to add the XML namespace for IE, but I figured it wasn’t necessary yet.

If anyone has any suggestions, I’d really appreciate them.

Post Views: 4

Related posts

Leave a Reply

2 comments

  1. include the below lines of code on the page where your like button is:

    <script>
    if (typeof(FB) != 'undefined' && FB != null ) {
          FB.XFBML.parse();
    }
</script>

    hope it helps. this had solved my very similar problem.

  2. The Facebook code just runs inline, so if it isn’t included at the bottom of the page, you have to call FB.XFBML.parse() to re-parse the page HTML looking for <fb:/> tags. Another option would be to either place this javascript at the bottom of the page, or better yet use a hook in your functions.php to include it in 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');
?>