Facebook Comments: Dynamic Urls on Static Pages

Posted by Anandajoti on Sunday, 18th September, 2011

If you are interested in using the Facebook commenting system you can get the code and set the main parameters for your plugin from the following Facebook developer’s page. Basically they all work on the same principles, but the design and url will be different, of course.

To set it up, first of all in the <head> section you need to include your Facebook Id, and the application Id (get one from here), just before the closing </head> tag:

My Facebook Id, for example, is “anandajoti” and the application ID (which I can’t share) is a 15-digit number.

Then it is necessary to write the code into the page at the place where you want the Comments Box to appear. If you want to insert the html via javascript so you don’t have to update each and every page, the code looks like this:

However, the problem then was that commenting on one page inserted the comment site-wide, i.e. all the pages showed the same comment, and they all linked back to the Home Page, which is not what was needed, of course. This is because the href is set at the Home Page in the coding (http://www.mywebsite.com, on line 3 above).

So how to make the address dynamic? There are a few solutions out there, but more than half involved php, which you may not be using; and some others seem to be using out-of-date Facebook code, which no longer applies.

I did see one solution which said leave out the address, and it will automatically be filled in with the current one, but these days, at least, if you leave out the address it returns an error.

In the end – though the end was a long time coming – it was quite easy: give the href an Id, empty the href, and afterwards write in the address of the current page dynamically by finding out its location.

I am using jquery to write the address in here, but there are other ways. The trick is in the last line below:

20 comments to Facebook Comments: Dynamic Urls on Static Pages

Thank you sooo soo much for your script. When i needed to embed a comment box for my dynamic product pages i searched for long beforen i got you. Later on I realised that when someone clicked on a shared url, they were taken to a page with no previous comments! (the comment box you gave cannot detach the url query-string so every comment has its own unique url! ) The solution took me some time to figure out (Im new to javascript) but finally, its here: replace the last line with: jQuery(“#FC”).attr(“href”, window.location.href.split(‘?’)[0]);

You are welcome. I have the code running perfectly on vhdmedia.com pages – amazon astore products. But I am still struggling with making the comment box retrieve the product image to be shared as thumbnail over facebook. How would you deal with this issue?

Dear Karl, you put the top code (including the id etc.) in the head section of the htm page, and the rest of the code is inserted wherever you want the comments to appear (normally near the bottom of the page).

Dear Karl, it depends on how the website is set up. If you have a non-cms website (ie not wordpress, drupal or something similar) you just put the javascript into a separate file, call it ‘facebookcommentbox.js’ or something similar, and then insert it with the code pointing to the location of your file.

If you are using cms it would need to be inserted through your template, which differs according to whatever you are using. Best then to look it up with the cms themselves, on their forum or whatever.

Hi Anan, I have designed a text decorator for use on social networks. Since the text is generated to a text box and should be shared on social sites, i need to enable mobile phone users to copy-paste the decorated text into a social comment box by just clicking one button. The challenge is that the fb comment box, or disqus and others are offered in iframes. Can someone figure out the correction for my button code:

Hi Mike, Sumit, all. I am very sorry I experimented with Facebook comments on my site for a while, but it didn’t work out, and I moved to Disqus. Therefore it is difficult to offer advice on this anymore, as I do not have a site to check through. I will leave the comments here open though in case someone else can help with this.

Warning: this comments plugin is operating in compatibility mode, but has no posts yet. Consider specifying an explicit ‘href’ as suggested in the comments plugin documentation to take advantage of all plugin features.

thanks for this info, im about to upgrade my website to allow facebook comments and before implement it was my first question… how to support dinamyc url??
my website is http://www.amazoniabeats.com/
thanks!!