Recents in Beach

How To Add Facebook Comment Box with Notifications in Blogger


 Facebook comment box has become a strategy to increase the quality comments and user engagement. When you are using the Facebook comment box on your website, you can reduce spam comments and maintain the quality of your comments. Another thing is, Facebook allows people to share their comments to their timeline.

So, if you have installed Facebook comment box on your BlogSpot blog, you can expect some decent traffic from those comments too.

This tutorial has three major parts:

  •     Create an app for your blog.
  •     Add Facebook comment box to Blogger
  •     Enable notifications for comments
  •     Moderate comments (optional, the later part after adding a Facebook comment box)

Create a Facebook App

Before Facebook new design, it was easier to create an app. But after their new design, it was a difficult work to create a new Facebook app for some people. Follow below instructions respectively to create your app.

Go to Facebook developer apps official web page and click on “Create New App” button.

Alternatively, you can click on “Apps” menu link and select on “Create a New App” button.

After you created your new Facebook App, you can change its settings to see everyone. After Facebook’s latest update they have changed their user settings too. For some instances, you can’t see the App secret ID directly (you have to enter your Facebook password to see it) and they have a clear button to promote your App through Facebook advertising. You only want the APP ID, which you can see from the app’s dashboard page.

Now you should do one thing in order to connect new Facebook app with your website or blog (here we’re going to add your BlogSpot blog).

Go to “Basic Settings” page and find “App Domains” field. It’s used to connect your blog platform (you know your blog platform is BlogSpot). So type your blog URL (ex: bestlodge.blogspot.com or problogtricks.com) in the “App Domains” field. Then you should render your exact blog address (ex: www.allbloggermag.blogspot.com, www.talktalkfornaija.blogspot.com, or example.com/blog/).

Click on “+Add Platform” button and then select “Website”. Type your blog address correctly starting with http:// or https://( if you use SSL encryption) and ending with / (slash) for the Site URL field as shown in below screenshot. Type the same URL for mobile Site URL, if you’re using a responsive template for your BlogSpot blog. The last steps of configuring the Facebook App are making it live and available to all users. Type your email address in the “Contact Email” field. Then click on “Save Changes” button.

 Now navigate to “Status & Review” section and select the “Yes” for “Do you want to make this app and all its live features available to the general public?” A popup box will be shown, confirm your change.

Go to your Dashboard and save the app id and app secret on your computer. We need them later.
Add Facebook comment box to Blogger

Now you created a new Facebook app for your Blog. Then you need to install the Facebook comment box on your blog. So follow below few steps respectively.

Step 1: Sign in to your Blogger account and go to Template.
Step 2: Now you have to make some changes to your blog template. So before we put into it, first of all make a backup of your existing blog template. Then click on “Edit HTML” button.
Step 3: Find this “<html” code in your template and in front of this code, paste below code.

xmlns:fb=’http://www.facebook.com/2008/fbml’
Make sure to add a space before and after the above code. See the example below.
<html b:version="’2′" class="’v2′" expr:dir="’data:blog.languageDirection’" xmlns:expr="’http://www.google.com/2005/gml/expr’" xmlns:fb="’http://www.facebook.com/2008/fbml’" xmlns="’http://www.w3.org/1999/xhtml’"></html>

  

Step 4: Use CTRL + F Blogger keyboard shortcuts and find where below HTML element is located.


    </head>

Now replace below block of code just above of </head> code.



<meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <meta content='All Blogging Mag' property=’og:site_name’/> <meta content='Image-Link-Of-Blog-Logo' property='og:image'/> <meta content='YOUR_APP_ID ' property='fb:app_id'/> <meta content='http://www.facebook.com/Your-Facebook-Page-Name' property='fb:admins'/> <meta content='article' property='og:type'/>

   

Customization

  •     Replace your blog title or blog name instead of All Blogging Mag
  •     Copy and paste the logo image URL instead Image-Link-Of-Blog-Logo.The logo will appear next to your post titles on Facebook profiles of commentators.
  •     Replace YOUR_APP_ID with the App ID which you saved on your computer earlier.

Find below HTML code using above keyboard shortcut.

    <body>

If you could not be able to find above code in your existing blogger template, then try to find below code. It should be located in your template.

    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

After one of above codes, paste below piece of code.

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'MY APPLICATION ID HERE', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script>

  

Make sure that you changed the MY APPLICATION ID HERE with your real application ID.

Step 6: Now you’re half done. You just need to display Facebook comment box on your blog. You can put the  Facebook comment box in your post and static pages manually. But it’s not an easy work to add a Facebook comment box to whole pages manually (think if you have 1000+ posts on your blog, do you use this method to add comment box?). So we use an automatic technique to add the Facebook comment box. It’s done from template editor. So you have to do nothing from post editor. Find below blogger data tag in your template.

     <data:post.body/>

or

    <p><data:post.body/></p>

If you’re using a magazine blogger template, you will encounter two or three similar codes. As using a wrong <data:post.body/> code, Facebook comment box might not work on your blog. So try all code paces and choose the correct one. In case if you’re not sure which code to add or didn’t work that method, then find below HTML code in your template.

    <div class='post-footer-line post-footer-line-1'>

or

    <p class='post-footer-line post-footer-line-1'>

Step 7: Now paste  HTML code of Facebook comment box just below of the above codes.


<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div> </div> </b:if>

Enable notifications for comments

Now you are already done almost every hardest work! You can overlook these steps if you don’t want to receive notifications for comments & replies and make some useful changes such as enabling grammar filter, member wishlisting etc. But this tutorial is for receiving notifications for comments. (That’s why we created a Facebook App!). In the last part of this tutorial, let’s see how to enable notifications for comments.

Visit this web page:  https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID

Replace YOUR_APP_ID with the your Facebook application ID.

Click on “Settings” link.

Now a pop out box would be shown and you can change some settings. Make yourself as a moderator (important to receive comment notifications). Allow other options to login and comment on your blog. Set grammar filter to maintain the comment quality. Use comment composer to reduce the page loading time. See below screenshot. After making these changes, click on “Save” button.


That’s all. Whenever someone comments on your blog, you will receive notifications for the comments to your Facebook account. Tell a friend to comment on your blog to see the results! Here is the notification message for my test comment which is put on our demo website.



Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.

Post a comment

4 Comments

  1. Facebook currently has 300 million subscribers and is growing rapidly. 45 Million updates are made on Facebook every day and world wide users spend around 8 billion minutes per day.buy facebook comments

    ReplyDelete
  2. welcome to Gclub Casino please join on online
    Please click on this post if you wanna paly with online casino.Thank you.

    ทางเข้าจีคลับ
    โกลเด้นสล็อต

    ReplyDelete
  3. welcome to Gclub Casino please join on online


    gclub
    บาคาร่า

    ReplyDelete
  4. เลเซอร์หน้าใส เป็นอีกหนึ่งของใหม่ทางความสวยสดงดงามที่ช่วยฟื้นฟูผิวหนังที่แห้งแข็ง บริเวณใบหน้าหมองคล้ำให้กลับมาผ่องใสมองสดชื่น ผ่องใสภายในช่วงระยะเวลาอันเร็ว นับว่าเป็นทางลัดความสวยสดงดงามที่กำลังเป็นที่นิยมสูง ช่วยเอาใจใส่ผิวให้ขาวกระจ่างขาวใส จากการลดลางเลือนริ้วรอยจุดด่างดำได้อย่างมีคุณภาพ


    เลเซอร์หน้าใส
    เลเซอร์ลดริ้วรอย
    เลเซอร์รอยสิว

    ReplyDelete