Geek Answers Handbook

FB.XFBML.parse () for an individual element does nothing

I have a large page with a “download more” button at the bottom; every click on “download more” loads more content through AJAX. Part of this content is Facebook, like buttons:

<div class="fb-like" data-href="http://mysite.com/a<?=$x ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div>

After downloading additional content, I can ask Facebook to reanalyze the entire page using FB.XFBML.parse(); (which causes these divs to turn into real buttons). This works fine, however, it immediately becomes slow as Facebook re-analyzes the content that was already on the page, and not just the new content. Each time the user clicks "download more", he analyzes the entire page, so for the FB function more and more.

Now here is the good news: docs for the FB analysis method say:

... to evaluate only part of the document, you can go through one element.

FB.XFBML.parse(document.getElementById('foo'));

So, I thought, well, when the user clicks "download more", I will wrap this fresh HTML in a unique div , and then use jQuery to go through the div , find all the Facebook tags and ask Facebook to parse only those. Good idea, right? But that will not work. It seems that the code passes Facebook items after they are downloaded, but they are not parsed. The code:

 // "c" is my container div (a jQuery object, ie c = $('#container'); ) // "load more" button $('#loadmore').click(function() { $.ajax({ url: "/loadmore.php", success: function(html) { if(html) { // wrap new HTML in special div & append newDivName = "d"+String(new Date().valueOf()); var $newHtml = $("<div id='"+newDivName+"'>"+html+"</div>"); c.append($newHtml); // walk through new HTML and get all Facebook "like" buttons and parse them $('#'+newDivName+' .fb-like').each(function() { FB.XFBML.parse(this); }); } } }); });

There is no error message, it just does not give any results. The debugging code on the console looks perfect, it finds all the necessary elements.

UPDATE play with this simple jsfiddle: http://jsfiddle.net/pnoeric/NF2jz/4372/

UPDATE 2 I also tried changing the code from HTML5 to FBML ( click “Get Code” on this page to see the difference), which not only had the same result, but now would also load one extra button on ajax call instead of two. So it got worse! You can play with the FBML version here: http://jsfiddle.net/pnoeric/4QkbX/2/

+8
jquery each xfbml
source share
2 answers

docs indicates that the dom element should be the root DOM node, defaults to body . Therefore, I replace the .each function .each one .parse method .parse with the DOM element created. Here is the jsfiddle .

  FB.XFBML.parse($newhtml[0]);

Note. FB.XFBML.parse () should be called on the parent widget element , and not directly on the XFBML element itself.

+23
source share

In my case, the decision made will not work, because the FB messages are added to the same DOM container.

What I ended up doing is running FB.XFBML.parse () in the container, using the .each loop and removeClass fb-post, adding the facebook-post-loaded class. Then, on subsequent Ajax calls and fb new messages, FB.XFBML.parse () will not select already loaded items, since they no longer have the fb-post class.

+1
source share

More articles:


All Articles