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:
<meta property="fb:admins" content="YourFacebookId"/ > <meta property="fb:app_id" content="YourApplicationId"/>
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:
document.write('<div id="fb-root"></div>');
document.write('<script>(function(d){ var js, id = "facebook-jssdk"; if (d.getElementById(id)) {return;} js = d.createElement("script"); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName("head")[0].appendChild(js)(document));</script>');
document.write('<fb:comments href="https://www.mywebsite.com" num_posts="10" width="500"></fb:comments>');
which effectively inserts the following to all the pages:
<div id="fb-root"></div>
<script>(function(d){ var js, id = "facebook-jssdk"; if (d.getElementById(id)) {return;} js = d.createElement("script"); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName("head")[0].appendChild(js);}(document));</script>
<fb:comments href="https://www.mywebsite.com" num_posts="10" width="500"></fb:comments>
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 (https://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:
<div id="fb-root"></div>
<script>(function(d){ var js, id = "facebook-jssdk"; if (d.getElementById(id)) {return;} js = d.createElement("script"); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName("head")[0].appendChild(js);}(document));</script>
<fb:comments id="FC" href="" num_posts="10" width="500"></fb:comments>
<script type="text/javascript" language="javascript">jQuery(“#FC”).attr(“href”, window.location.href.split(‘?’)[0]);</script>');
Here is the javascript code;
document.write('<div id="fb-root"></div>');
document.write('<script>(function(d){ var js, id = "facebook-jssdk"; if (d.getElementById(id)) {return;} js = d.createElement("script"); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName("head")[0].appendChild(js);}(document));</script>');
document.write('<fb:comments id="FC" href="" num_posts="10" width="500"></fb:comments>');
document.write('<script type="text/javascript" language="javascript">jQuery(“#FC”).attr(“href”, window.location.href.split(‘?’)[0]);</script>');
Why the Facebook development team don’t offer such a solution is best known to them, but I hope this will help someone else who is facing the same problem.
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]);
Dear Timothy, many thanks for finding that bug, and also for providing the solution. I have updated the code to suit.
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?
Hi Timothy, Facebook should retrieve the thumbnail automatically, this is bound up with their coding (I believe) not mine. If anyone has a solution then it would be good to hear.
Could you elaborate on how /where to apply the code you’ve offered us less-enabled readers?
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 Anan,
Thank you kindly for your advice. I am that far with it – but where I am stuck is the javascript.. I’ve no idea what or where to put it.
I presume the last FB code (above JS) will call the javascript. So do I just create a file with the JS code and save it to my root?
I thank you for your speedy reply to my previous question.
Regards
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.
Thank you Anan, much obliged for your assistance & advice. 🙂 I now have it at the bottom of my SHOWTHREAD template 🙂
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:
input value=”Encool” type=”button” class=”button” style=”width:70%”
onclick=”
window.frames[‘iframename’].document.getElementById(‘formname’).textareaname.value =
document.getElementById(‘decoratedtextarea’).value;
“
Dear
when i try to apply the code for my dynamic url i.e http://abc.com/page.aspx?id=1 then the following error occurs in facebook comment box …
The comments plugin requires an href parameter.
HI Anan,
thanks for the helpful post. Could you try to figure out also a Pin button URL for dymanic page and image. Here’s the sample code i generated in Pinterest Goodies website:
I assume it can be a similar solution as a Facebook comments, using jQuery – but i don’t know JavaScript
Thanks, have a good day.
Artur
Hi all,
I have the same problem like Sumit Dobriyal.
Any toughts ?
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.
Thanks for the tutorials but unfortunately I received this error.
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.
Nice tutorial but do not work for me as espected.
href error returned because I wanted dynamic url.
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!!
Easily achievable with php:
<?PHP
$currentlink = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
echo "”;
?>
Hola, he tratado incansablemente de activar este sistema, pero hasta ahora no he tenido resultados…
me sigue dando el siguiente mensaje:
El plugin de comentarios requiere un parámetro href.
así esta el código en la pagina:
(function(d){ var js, id = “facebook-jssdk”; if (d.getElementById(id)) {return;} js = d.createElement(“script”); js.id = id; js.async = true; js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”; d.getElementsByTagName(“head”)[0].appendChild(js);}(document));
jQuery(“#FC”).attr(“href”, window.location.href.split(‘?’)[0]);’);
As this page is way out of date I am closing the comments on it now.