How to add Facebook comments to a blog (WordPress, Blogger, Other)

I have been researching this quite a bit and so I wanted to do a post about it. And it was quite a pain. I wanted to add Facebook comments to a site that didn’t have blog functionality (Big Commerce, I will do another post on this).

The way that Facebook comments work is that if you pull the code off the Facebook developers site, and then you insert it on a page. If you utilize this resource here, then you can only get the code for one URL and it doesn’t allow for dynamic content.

So if you add this to your page to have Facebook comments appear on each post, you get ALL the comments sitewide. They just aggregate and you will have comments on your posts that belong on other posts. So I asked some superfriends how to do this and they suggested PHP. So I researched some PHP code (I am not a developer) and I came across these interesting tidbits.

There are a couple of ways to add Facebook Comments.

Since these articles already exist, I am just going to link to them instead of stealing content:

In WordPress (thanks Orun!)

In Blogger

And here is the code if you want to implement it on a site utilizing Javascript (this works best if you are adding this to an html file I guess). I found the code here.

 <div id="fb-root"></div> <script src=""></script> <script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true }); </script> <div id="fbcomments"></div> <div id="fblike"></div> <div id="fblogin"></div> <script> var elemCommentDiv = document.getElementById("fbcomments"); var elemLikeDiv = document.getElementById("fblike"); var elemLoginDiv = document.getElementById("fblogin"); var markupComments = ''; var markupLike = ''; var markupLogin = ''; markupComments += '<fb:comments href="' + location.href + '" numposts="2" publish_stream="true"></fb:comments>'; markupLike += '<fb:like href="' + location.href + '" show_faces="true" width="450" font="tahoma"></fb:like>'; markupLogin += '<fb:login></fb:login>'; elemCommentDiv.innerHTML = markupComments; elemLikeDiv.innerHTML = markupLike; FB.getLoginStatus(function(response) { if (response.status == 'connected') { elemLoginDiv.innerHTML = ''; } else { elemLoginDiv.innerHTML = markupLogin; } }); } FB.XFBML.parse(elemCommentDiv, elemLikeDiv, elemLoginDiv); </script> 


Here is another code that I found that works better. I don’t remember where I got it from. But it is better.

WIth this one you have to add the following to your HTML file somewhere before the </head> tag (and replace “YOUR_APP_ID” with your Facebook app ID):

 <meta property="fb:app_id" content="YOUR_APP_ID"/> 

Then add this code wherever you want the comments to appear:

<script language="javascript" type="text/javascript"> var uri=document.location.href; //get uri var isFbPrm=uri.indexOf('fb_comment'); if (isFbPrm!=-1) { // fb comment url     try {           var prm=uri.split("?"); //get paramaters         var url=prm[0]; //url         var prmItm=prm[1].split("&"); //parameter items         var newPrmlst='';         var newUrl='';         for(var j = 0; j < prmItm.length; j++) //read all param to get rid of fb param            {               var prmId=prmItm[j].split("="); //get param id                  if (prmId[0]!='fb_comment_id'&&prmId[0]!='notif_t'&&prmId[0]!='ref') { //if parameters are not in the list             newPrmlst +=prmId[0]+'='+prmId[1]+'&';               }            }         uri = url+'?'+newPrmlst;        }     catch (err) {        //Handle errors here              }      } document.write("<div id='fb-root'></div><fb:comments href='"+ uri +"'  num_posts='10' width='500'></fb:comments>"); </script> <script src=''></script>