How To Add Facebook Comment Box On Blogger Blog?

Well, everybody. Just like i've said yesterday, now i'd like to disscuss about "how to add facebook comment box on blogger?". I know, This is not something new to be published of course, many poeple have known, shared, discussed, and added it to their own sites, And you could be the one of them. I'll all just believe it if you say to me that you knew and have got it one. Yet, i still mean to discuss about it. It's just for a simple reason: cuz there always be a new guy in any cares.

Well, let's just go down to the bussiness - First of all, i wanna make sure that: "Sure you know the advantages that you can grab by adding this tool to your blog, don't you? And therefore, it's useless that i explain about it to you. :)

Step#1.

Before you step forward and run the code that will load the comment box, firstly you have to create your own "facebook app id", which you may get from: http://developers.facebook.com. It's simply easy to create, just visit the site and then click the link titled "get started" on the top side and follow the step by step guidance that will lead you to get your app id. You'll have to provide only some informations and specify the parameters. like to provide your site url, name your app, specify the width of your comment box, and some more. What you should note is that you should provide your site url along with the "http://" as well as the ending punctuation "/". And, that: the codes generated after you click the "get code" when you're creating your comment box on its official site, will be loaded in the bottomost layer instead of on top where you provide your informations ("On Operamini" ). - Go to the following link to know further on how to get your app id, facebook username to verify that you're the admin who built the app so you get your administeration access, and the complete step to set your facebook application parameter: How To Create Or Set Up Facebook Open Graph?.

Step #2

Now let's talk about your comment box code.

1. Go to your blogger.
2. Design.
3. Edit html.
4. Check the "expand widget template" box to load the whole codes in your template.
5. Copy the entire codes in the text box for anticipation of making any mistakes when you modify your template. Or simply download the codes by clicking the "Download Template Codes".
6. Find this code in your template: <html, which is placed in the top side of your template. Have you found it? Simply add the below code after it.

Here is how i'd place the code in my template: <html expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:fb='https://www.facebook.com/2008/fbml'>
<head>

7. Now look for the code <head or even could be <head>. Copy and paste the code below just beneath that code:

To be the lesser arrangement the code in the box above looks like the below:

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/></b:if>
<meta content='your application id' property='fb:app_id'/>
<meta content='Eg. website' property='og:type'/>
<meta content='Some Description' property='og:description'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiljM64M5nWK9KWoFycW7IhFKzONioWu5VYPpiX0BmnvycIm9X3-OwVZehaWsWmGTE-J8r_OVssKmpJQF4fOJCZTL40ufW-EFxzy-JYykbHExoV44hsP9qlI9BvU3_aC37OOBFTHtuSwV_o/s1600/Spiderman.jpg' property='og:image'/>
<meta content='your facebook id' property='fb:admins'/>

Change the values with yours

I got the above code from my application. If you want to get your code from your own application, you can go to Facebook Developers> App (the link is located in top right, left to your picture)> Edit Open Graph. You should find these now: Action Types, Object Types, and Aggregation. Right to the Object Types must be there a link titled Get Code, just click the link. After, you'll be given a code similar to the code in step 7 above, to place in your template. Just scroll down your mouse and copy the code and then replace the tag < head> (or < head>) in your template with the code you copied.

8. Find this code in your template: <body, or could be this: <body>. Copy and paste the code below just beneath it.

To be the lesser arrangement it looks like the below.

<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/en_US/all.js&amp;appId=123456789123456789#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Replace the line in red with your app id.

9. You're almost done everybody - This is your last step: copy and paste the code below just beneath the code <data:post.body/>, or where you suppose the comment to show up.

To be the lesser arrangement the above code looks like the below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments expr:href='data:post.url' expr:title='data:post.title' num_posts='5' width='580'/>
</b:if>

*Set the width and total post to show as you want

10. Now save your template and see if your site is now showing a facebook comment box below every posts.

Actually you don't realy have to add so much code into your template for having a comment plugin facebook. But since facebook has launched a quite much plugin, i think it could be usefull for you. After you put the codes above in your template, later you'll need to add only a realy short code into your template to add a facebook plugin into your site. Isn't it great? :)

at Wednesday, January 25, 2012

2 comments:

  1. Unknown11/25/2017

    Are you tired of seeking loans and Mortgages,have you been turned down constantly By your banks and other financial institutions,We offer any form of loan to individuals and corporate bodies at low interest rate.If you are interested in taking a loan,feel free to contact us today,we promise to offer you the best services ever.Just give us a try,because a trial will convince you.What are your Financial needs?Do you need a business loan?Do you need a personal loan?Do you want to buy a car?Do you want to refinance?Do you need a mortgage loan?Do you need a huge capital to start off your business proposal or expansion? Have you lost hope and you think there is no way out, and your financial burdens still persists? Contact us (gaincreditloan1@gmail.com)

    Your Name:...............
    Your Country:...............
    Your Occupation:...............
    Loan Amount Needed:...............
    Loan Duration...............
    Monthly Income:...............
    Your Telephone Number:.....................
    Business Plan/Use Of Your Loan:...............
    Contact Us At : gaincreditloan1@gmail.com
    Phone number :+44-75967-81743 (WhatsApp Only)

    ReplyDelete
  2. Unknown10/04/2018

    Ever wanted to get free Facebook Followers, YouTube Views, Google+ Circles, Twitter Followers, Instagram Likes, or maybe SoundCloud Listens?
    Did you know you can get these Likes, Followers, Views & Subscribers AUTOMATICALLY AND ABSOLUTELY FOR FREE?
    All you need to do is join the following Social Exchange sites, earn free credits and exchange them for Followers, Subscribers, Likes or Views to your
    Social Accounts.
    1. Add Me Fast
    2. Like 4 Like
    3. You Like Hits
    Advertising networks that allow you to earn free advertising credits every day:
    1. MellowAds
    You can use these credits to advertise your social network accounts for free.

    ReplyDelete