Friday, 23 September 2016

kelvin Ehiozefe

EASY AND COMPLETE GUIDE FOR ADDING FACEBOOK COMMENT BOX

Facebook has continually strived to make user experience better with its features and Facebook itself. Among the many social plugin introduce by Facebook is the stylish “Facebook comment box” for developers.

Facebook comment box was introduced to aid blog visitors share comment on blogs with ease using their Facebook account. Since the introduction of this stylish plugin it has become one of the best strategy for every publisher to increase quality comments and engage with followers. Using Facebook comments plugin also helps to increase your site traffic- HOW? when someone use his/her Facebook account to make comment on your post then your commented post automatically comes in their news feed, which automatically increases chances of getting more visitors to your site.

facebook comment plugin

For publishers who would love to integrate the Facebook comment box on their BlogSpot site, here is an easy guide in adding Facebook comment plugin. (Please follow each step carefully) 

                                         GETTING SET AS A DEVELOPER

STEP 1: REGISTER AS A DEVELOPER

LOGIN to your Facebook account, at the bottom of you Facebook page look for ‘Developer’ or simply follow this URL http://www.developers.facebook.com/  login with your Facebook account, a new tab will open click on register if you are not already a member of Facebook developer.

STEP 2: CREATE APP

Upon successful registration select create app at the top right corner to create your app, a new window will pop-up click on basic setup within few seconds new app will get created.

facebook comment plugin


facebook comment plugin

STEP 3: CHANGE APP PREVIEW SETTINGS
Now as indicated on this screenshot you have to change app review status from developer mode to public.

facebook comment plugin

Don’t forget to Copy Save your App ID somewhere else you will need it in future steps.
If you have done all this correctly then SAVE. Congratulations! you are just a step away from using Facebook comment box on your site.


                    ADDING FACEBOOK COMMENT BOX PLUGIN TO BLOGGER

STEP 4: login to blogger go to Template click on edit html. Your site html shows click anywhere inside these code then on your keyboard press CTRL + F to find this code <html
Add the code below it

<html xmlns:fb='http://www.facebook.com/2008/fbml'>

Use CTRL+ F to find </html> and Add another </html> above or below where you found the code "else saving template will give an error sign"

STEP 5: Search for <head> tag and Add this code below

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='infoexposure' property='og:site_name'/>
<meta content='Blog-Logo-Image' property='og:image'/>
<meta content='Your-App-Id' property='fb:app_id'/>
<meta content='http://www.facebook.com/infoexposure' property='fb:admins'/>
<meta content='article' property='og:type'/>


Please Replace:

infoexposure                                                     with your Blog name
Blog-Logo-Image                                               with your logo image
Your-App-ID                                                     with App ID from Facebook
www.facebook.com/infoexposure                        with your Facebook fan page


STEP 6: Search for <body> and add this code below

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1791347234415014',---------------------------------Replace with the App ID
      xfbml      : true,
      version    : 'v2.7'
    });
  };
  (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/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Your code should appear like this……….
coding for facebook comment plugin


STEP 7: Now do a Search for <b:include data='post' name='post'/>
Copy and Paste the following codes below it

<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>

You may replace 600 with your preferred width

coding for facebook comment plugin


STEP 8: Finally save your template, view any of your blog post to see whether or not Facebook comment box is showing.

           TO HIDE BLOGGER DEFAULT COMMENT BOX (this part is optional)

STEP 9: To hide your default blogger comment box go Settings tab of your blog then click on Post, Comments and share.

STEP 10: Go to where you have Comment Location and Change from Embedded to Hide and then save settings

                                   ENABLING COMMENT NOTIFICATION

STEP 11: Go to https://developers.facebook.com/tools/comments/ 
do the following settings

Click on > settings, a new window will pop up > Enable Notification > go over to moderators rules and set to your taste> Go to moderators and add yourself > then Save.

You can as well play around with other setting on this stage

Conclusion
If you follow these steps carefully you wouldn't have any trouble integrating Facebook comment box to your site. But if you fall into any trouble feel free to contact me. I do hope or believe that this guide will be very helpful to you in integrating your site with Facebook comment Box

kelvin Ehiozefe

About kelvin Ehiozefe -

My name is Kelvin Ehiozefe am an ICT entrepreneur and freelance writer with interest in promoting business start-up, sharing tips on technology and Entertainment. My blog infoExposure is a mojor resource center for many information seeker.

Subscribe to this Blog via Email :