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.

[php]

[/php]

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

[php]

[/php]

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.

[php highlight=”15,16,17,18,19,20,21,22,23″]
…
…
// Ajax Request the Traditional Page
$.ajax({
url: url,
success: function(data, textStatus, jqXHR){
// Prepare
var
$data = $(documentHtml(data)),
$dataBody = $data.find(‘.document-body:first’),
$dataContent = $dataBody.find(contentSelector).filter(‘:first’),
$menuChildren, contentHtml, $scripts;
…
…

//facebook comments
var isFacebook = $data.find(‘.fb-comments’);
if(isFacebook != ‘undefined’ ) {
var scriptText = ‘FB.XFBML.parse();’;
var scriptNode = document.createElement(‘script’);
scriptNode.appendChild(document.createTextNode(scriptText));
contentNode.appendChild(scriptNode);
}

…
…
},
[/php]

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

Posted

July 30, 2012

Facebook, jQuery, PHP, WordPress

Subharanjan

Tags:

facebok ajax issue, facebook comments plugin, FB social plugin issue on AJAX content, FB.XFBML.parse(), wordpress ajaxify website

Comments

14 responses to “Loading facebook social plugin into AJAX generated dynamic content. [Solved]”

jim

September 23, 2012

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
jim

September 26, 2012

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

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

Reply
1. Subharanjan
  
  September 26, 2012
  
  Wow… nice to hear that !!
  
  Reply
2. sudoGrateful
  
  March 14, 2014
  
  Thank you!!! I’ve been trying all kinds of solutions in different places – this one actually worked.
  
  Reply
3. swapnil pal
  
  March 25, 2014
  
  it worked for me also thanks
  
  Reply
4. maari
  
  June 14, 2017
  
  hi,
  
  i am using facebook comment plugin to get comments count but s i am facing one problem due ajax loadmore when it loads first five comments count display in post after each post loading facebook comment is not display (not working ). Give me the solution how to solve it.
  
  Reply
Akmal

May 25, 2013

Wow… Thanks

Reply
sunvibol

February 2, 2014

Dear Sir
I don't know how to configure it about this code . I have problem also ... ... // Ajax Request the Traditional Page $.ajax({ url: url, success: function(data, textStatus, jqXHR){ // Prepare var $data = $(documentHtml(data)), $dataBody = $data.find('.document-body:first'), $dataContent = $dataBody.find(contentSelector).filter(':first'), $menuChildren, contentHtml, $scripts; ... ... //facebook comments var isFacebook = $data.find('.fb-comments'); if(isFacebook != 'undefined' ) { var scriptText = 'FB.XFBML.parse();'; var scriptNode = document.createElement('script'); scriptNode.appendChild(document.createTextNode(scriptText)); contentNode.appendChild(scriptNode); } ... ... }, Put this code where ? Please me to resolve it
Thanks

Reply
Houston Golden

March 22, 2014

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

January 21, 2015

I have a ColdFusion app with jQuery and I dynamically select and display videos. With a simple inclusion on the Ajax loaded page, this solved the problem:

$("#div1").load("OneExercise.cfm?Ex=" + $(this).val(), function () { $(".js-lazyYT").lazyYT(); FB.XFBML.parse(); });

Reply
JustinLim

March 21, 2016

Hi Subharanjan,

In your suggested solution, I see this line of code:

“contentNode.appendChild(scriptNode); ”

May I ask how was the “contentNode” defined in your example? I do not see this “contentNode defined in the example, so my console was throwing an undefined “contentNode”.

Thank you

Reply
1. Subharanjan
  
  March 21, 2016
  
  Hi Justin,
  
  Thanks for reaching out to me.
  
  It’s been a long time I wrote this article and not very sure if this Facebook function still works. However, the `contentNode` is defined like this. https://github.com/subharanjanm/ajaxify/blob/master/ajaxify-html5.js#L22-L24
  
  Let me know if you need any other information.
  
  Thanks !
  
  Reply
JustinLim

March 22, 2016

Hi Thanks for your reply. I thought this post still has a lot of value as I think it’s still a common problem to users of the Facebook Comments Plugin. 🙂

Let me write here what I am trying to achieve.

In my Ajax call to dynamically populate an area tagged as “facebook_comment_area”:
$.ajax({ type: "POST", url: urlString , success: function(result) { //console.info("result"+result); $("#facebook_comment_area").html(result); $("#comment").find("script").each(function(i) { eval($(this).text()); });
} });

The “result” returned to the above ajax call is the entire facebook comment plugin codes:
(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.5'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));

Question:
So when the ajax call is called, I can clearly see that the facebook comment plugin codes are returned in the “result” and updated into the area tagged as #facebook_comment_area. However, although the codes a there. the facebook comment plugin was not visible on the page. What other codes should I put into the above ajax codes? Something to “reload” the plugin? I can confirm that the facebook comment plugin works if I load it directly into the page (e.g not via ajax dynamic load). But if I load it via ajax, the facebook comment plugin does not get loaded/does not appear.

Any help will be very much appreciated. Thank you.

Reply
maari

June 14, 2017

Hi,
I have worked on facebook comment count plugin to get facebook comment count when ajax loadmore loads the post first time counts are visible but after that fb comment count is not working (not display). Can u tell me the solution…

Reply