I want to dynamically change the data-href for the fb ments plugin below based on a javascript variable. I'm running a flash swf file and am passing the new link for data-href into the html wrapper via a javascript function. When I do that, I want the fb ments plugin to refresh to the new data-href link.

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

Called javascript function passing in the new link for the ments plugin:

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

I want to dynamically change the data-href for the fb ments plugin below based on a javascript variable. I'm running a flash swf file and am passing the new link for data-href into the html wrapper via a javascript function. When I do that, I want the fb ments plugin to refresh to the new data-href link.

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

Called javascript function passing in the new link for the ments plugin:

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

• javascript
• flash
• facebook-javascript-sdk
• facebook-social-plugins

2 Answers 2

This will load the initial ments box, the script will when executed will clear the ments div wrapper and replace html5 ments box with new url. JS SDK will then parse the new box.

JS SDK is required for this work. refer to https://developers.facebook./docs/reference/javascript/

fix for xfbml render from dom manipulation

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

user solved:

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

I found the simplest and effective way to make your Facebook Comment box to recognize the individual URL of each page (particularly good for e-merce sites).

Add this script to your top header portion of your website template (it generates de data-href value for your Comment Box div:

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

And then on your Comment Box div, add the id for the value generated on the javascript:

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

Voilá. I dedicated so much time to crack this nut, I just had to share it for you to save some time for break! Cheers!