Search code examples
javascriptfacebook-likefacebook-javascript-sdkfbmlxfbml

how to integrate facebook like button for dynamic content javascript

I want to add a facebook like button to every individual post retrieved from the facebook fql stream from a person's news feed. So the href is dynamic, changes all the time, I have tried 3 ways to implement this;

(1) when I include the following in my html file, it brings up just the like button, but it's not related to that particualar post. obviously as href is empty. 

<div class="fb-like" data-href="" data-send="false" data-width="250" data-show-faces="true"></div>

(2) I included the following div in my html

<div id=fblikebutton></div>

and the javascript: 

fblikebutton_markup += '<div class="fb-like" data-href="'+post_href+'" data-send="false" data-width="250" data-show-faces="true"></div>';
$('#fblikebutton').empty().append(fblikebutton_markup);

post_href is the href for the current post, I am retrieving the correct href. But the above does not display anything.

(3) The following code brings up this error:

Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://static.ak.facebook.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

html: 

<div id ="fblikebutton"></div>

Javascript:

 fblikebutton_markup= '<fb:like href="'+post_href+'" send="false" width="250" show_faces="true"></fb:like>'
 $('#fblikebutton').append(fblikebutton_markup);
 FB.XFBML.parse(document.getElementById('fblikebutton'));

please help! I have looked around stack overflow but nothing is helping.

I now have a 4th try which still brings up the protocols must match error:

(4) jQuery("#fblikeblock").html(''); FB.XFBML.parse(document.getElementById('fblikeblock'));

Now having the 4th method, the button has disappeared! it doesn't work.:(

Solution

  • After you have appended the fb-like content into a container such as $('.container') then run FB.XFBML.parse($('.container')[0]) or FB.XFBML.parse($('.container')).

    I have it implemented in a project that I have previously done.

    Edited: Also make sure that the FB js is included in the page prior to your javascript FB.XFBML.parse being called.