How to dynamically change facebook plugin url based on javascript variable?

Question

I want to dynamically change the -href data for the fb comments plugin below based on a javascript variable. I run the Flash swf file and pass the new link for the hh file to the html shell using the javascript function. When I do this, I want the fb comments plugin to be updated to the new data-href link.

<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="www.example.com" data-num-posts="20" data-width="380"></div> 

The javascript function is called, passing in a new link for the comment plugin:

 function changeCommentsUrl(newUrl){ // should refresh fb comments plugin for the "newUrl" variable } 

Answer 1

This will load the source comment window, when you run the script, the div comment shell will be cleared and replace the html5 comments field with a new URL. Then the JS SDK will analyze the new box.

This job requires the JS SDK. refer to https://developers.facebook.com/docs/reference/javascript/

fix for xfbml rendering from dom manipulation

---

 <div id="comments"> <div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="www.example.com" data-num-posts="20" data-width="380"></div> </div> <script> function changeCommentsUrl(newUrl){ // should refresh fb comments plugin for the "newUrl" variable document.getElementById('comments').innerHTML=''; parser=document.getElementById('comments'); parser.innerHTML='<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="'+newUrl+'" data-num-posts="20" data-width="380"></div>'; FB.XFBML.parse(parser); } </script> 

---

user decided:

 document.getElementById('comments').innerHTML='<div style="float: left; padding-left:5px; min-height:500px" class="fb-comments" data-href="'+link+'" data-num-posts="20" data-width="380"></div>'; FB.XFBML.parse(document.getElementById('comments')); 

---

Answer 2

I found the simplest and most effective way to make your Facebook Comment block to recognize the individual URL of each page (especially good for e-commerce sites).

Add this script to your top of the header of your website template (it generates a data-href value for your comments window:

 <script type="text/javascript" language="javascript">jQuery("#FC").attr("data-href", window.location.href.split('?')[0]);</script> 

And then in your comments block for comments, add an id for the value generated by javascript:

 <div id="FC" class="fb-comments" data-href="" data-width="700" data-numposts="5" data-colorscheme="light"> 

Voila. I devoted so much time to crack this nut, I just had to share it with you to save time for a break! Hurrah!