Easy Making Facebook Comment Different For Each Post

Hello all our friends ... Can not wait to meet with us in the topic of bloggers and widgets ... So do I. This time we discuss about how to install the facebook comment in blogger. This is very different from someone else's post, facebook comment that we offer can be different in each post. And way too easy installation. No need to add script that is more difficult.

---

History

Historically, when we look at the site yahoo, yahoo has seen facility facebook comment. Interestingly, comments on the yahoo facebook is different in each post. In addition, many also say it's not possible. Therefore, we try to solve it. And it worked. By applying this tutorial, then you already have a blogger that is similar to yahoo.

Many also believe, is possible but we have to change the basic script provided by facebook. Precisely, we must experts in the javascript SDK to succeed make it. Seeing it all, this time we try to solve it. However, it does not mean we're experts. We're just a bunch of ordinary people. A happy little family trying to share to the world. Hopefully you are willing.

---

To The Point

Ok, to the point. Previously you are expected to have read our post on how to make like button. For those of you who have installed like button, check your script with a script from us. Make sure nothing is left behind.

Once you are sure that the script has been appropriate. The next step is, you have to put the facebook comment just below the post, and just above the blogger comment. The trick is to find the following code (we use standard xml from blogger)

<b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </ b: if> </ div> <b:if cond='data:post.includeAd'> <b:if cond='data:post.isFirstPost'> <data:defaultAdEnd/>

Maybe this is a bit time consuming for you to find it. Actually no, the key word is found <data:defaultAdEnd/> (use Ctrl + F on Windows), and then find <b:if cond='data:blog.pageType == "item"'> (Just note that &quot; same meaning with "). Once successful, then place the following code

<!--facebook comment--> <b:if cond='data:blog.pageType == "item"'> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <fb:comments-count expr:href='data:post.url'/> awesome comments <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='650' data-num-posts='10'/> </b:if> <!--facebook comment-->

You can change width value (width of your facebook comments), colorscheme value (color of your facebook comment: light or dark), and data-num-posts value (number of post will display). With this code, then you have successfully installed your facebook comment in blogger. And you also provided an information about the number of comments on every post. 

Hey ... You have successfully set it up. Have fun, and wait for our next post.

---

Update September 20, 2011

This is report from our user, we call him onino (http://love-edutainment.blogspot.com), he can't find <data:defaultAdEnd/>, because he using third party, so we give him recommendation to put the facebook comment code above <div id='bg_commentblock'>. And he success.

Please help us by making donations to make it better.