Loading facebook social plugin into AJAX generated dynamic content. [Solved]

To include Facebook social plugins(ex: Facebook Comments http://developers.facebook.com/docs/reference/plugins/comments/) into our site, we use some java-script and some HTML structure provided by facebook. It works fine until you have AJAXified your pages. If your site refreshes each page on each request then facebook social plugins work perfect.
Problem occurs when the HTML structure is loaded via AJAX and the script used for FB is not called again after the ajax response. This happens because Facebook parses the page only on initial load and so doesn’t pick up the dynamic content. To make it work on AJAXified content, we need to explicitly tell it to re-parse the entire page, or just the new content.

Recently, I used a plugin called “Ajaxify WordPress Site” which makes a wordpress website completly AJAXified semlessly. Really nice plugin to ajaxify WP sites without any hassel, but one problem I faced with this was Facebook Comments not being rendered after AJAX response for which the answer is “FB.XFBML.parse()” function call.

Example:

1. JavaScript SDK which needs to be included once on the page.

2. HTML code to be placed wherever we want facebook plugin to appear on your page.

So, in our case, say this bit of HTML code comes dynamically with AJAX not on page refresh. So how can we display the facebook comments ?

Answer is simple: Call the ” FB.XFBML.parse() ” explicitly inside the AJAX success function, which will re-parse the html and render the Facebook comments section. :)

3. Code for AJAX success block with “FB.XFBML.parse()” call.

Hope this will help someone solving facebook social plugin issue with AJAX content.. :)

8 Comments

  1. Where EXACTLY do I put this in the Advanced-ajax-page-loader plugin? I have ‘advanced-ajax-page-loader.php’,’ajax-page-loader.js’,’jquery.js’, and ‘reload_code.js’? I’m a total noob. Thanx!

    Reply
  2. I got it to work by just putting the following code in the footer:

    Reply
  3. Reply
  4. This simple solution does work, but remember to put inside the tag at the bottom of footer.php and within opening and closing tags, like so:

    jQuery(‘#content’).ajaxComplete(function(){
    //re-render the facebook icons (in a div with id of ‘content’)
    FB.XFBML.parse();
    });

    Reply

Leave a Reply