How to link facebook comments widget to the current url? - facebook

Question

I've got a bit of a problem with facebook comments box on my website. I can't figue out a way for it to link the comments to the url they are on. For example a fb comment to Post 1 on my site is shared between all of my post wich can be a bit misleading for the users. I post about hundred posts a day (pics mainly), there's no way I can make a new box for each and every one of them.
Here's the piece of code that's troubling me:
<div class="fb-comments" data-href="funshit.ru" data-num-posts="5" data-width="530" data-colorscheme="dark"></div>
If only there was a way to make it link to the current url the problem'd be solved.
Any help is appreciated m8s.

Answer 1

Because the CMS I was coding in didn't reliably return the current URL and leaving it blank or omitting it failed, I wrote the div tag in Javascript:
<script>
document.write("<div class='fb-comments' data-href='" + window.location.href + "' data-num-posts='2' data-width='400'></div>");
</script>
Of course, this will include the data in the query string but you should be able to exclude that if that's what you want.

Answer 2

You can omit data-href (or leave it blank) so current URL will be used.
Update:
As of Sep 2012 the method above is working only for first version of the Facebook Comments box.
To use newer version of Comments social plugin you will need to specify current URL explicitly.

Answer 3

This one seems to be foolproof and vastly simple:
// In the next line, you must grab the parent element of the div with class fb-comments.
var oComments = document.querySelector("#CONTAINER-OF-COMMENTS-BOX");
oComments.innerHTML = '<div class="fb-comments" data-href="http://www.whatever.com/" data-num-posts="NUMBER OF POSTS TO SHOW" data-width="WIDTH OF CONTENT"></div>';
FB.XFBML.parse(oComments);
You can alternatively select the parent element with jQuery like so:
var oComments = $(".fb-comments").parent().get(0);
Make sure to alter the data-href attribute of the fb-comments div to change the URL for which the comments are about. You should also adjust data-num-posts for the number of posts to show and data-width for the width of the content. That ought to do it!

Answer 4

Use check below script, which is working for me.
<script type='text/javascript'>
var postUrl = '<data:post.url/>';
document.write("<div class="fb-like" data-href='" + postUrl + "' data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true"></div>");
</script>
Its give link of each post accordingly.

Answer 5

I am a blogger, I Used below script in my blog, which is working for me.
<script type='text/javascript'>
var postUrl = '<data:post.url/>';
document.write("<div class="fb-like" data-href='" + postUrl + "' data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true"></div>");
</script>
Its give link of each post accordingly. It might help full for you also.