I have a page with multiple posts. And I am trying to add a Facebook LIKE button for every post on this page. I am using XFBML code for populating like buttons under each post with a different URL i.e. Post URL.
The Code Goes Here :
First of all I have included:
in Head
<meta property="og:title" content="TITLE" />
<meta property="og:url" content="http://MY_URL" />
<meta property="og:description" content="TEST" />
<meta property="og:site_name" content="TEST" />
<meta property="fb:app_id" content="MY_App_ID" />
in HTML tag:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" >
And in Body, I am generating the each post in a loop using javascript this way
strHTML += '<span>Hello This is a Post Start</span>';
// generating a variable url for each post using my Object List
varUrlTemp = 'https://17path.wordpress.com/?date=' + objListing.ListingId ;
strHTML += '<fb:like href="' + varUrlTemp + '" layout="button_count" action="like" show_faces="false" share="false"></fb:like>';
strHTML += '<script>(function (d, s, id) {';
strHTML += 'var js, fjs = d.getElementsByTagName(s)[0];';
strHTML += 'if (d.getElementById(id)) return;';
strHTML += 'js = d.createElement(s); js.id = id;';
strHTML += 'js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_APP_ID_Here";';
strHTML += 'fjs.parentNode.insertBefore(js, fjs);';
strHTML += '<span>Hello This is a Post End</span>';
strHTML += '} (document, "script", "facebook-jssdk"));</script>';
The Code is working fine whenever the page loads. All the like buttons for intial posts loaded correctly But When I click on "Load More" Button in the End, its not loading "Like Buttons" for newer posts on the page.
After appending buttons with iframe parse the Dom again with
make sure that every button has parent with different ids.
and try with
FB.XFBML.parse();I hope it works :)