Skip to main content

How To Add Facebook Comment Box To Your Website / Blog

As we all know that Facebook is the biggest competitor of Google and Twitter. Facebook's developers always make some unique plugins for bloggers or website owners. Facebook develops Like button/box, Follow button, share button for bloggers. And now they develop comment plugin for bloggers. Read also : How to setup AdSense page level ads.

Facebook comment plugin allows your blog readers to comment on any post of your blog using Facebook account. It also encourage your readers to leave a comment to their favorite post of your blog. In this post I will show you how to add Facebook comment plugin to blog/website. So let's start! Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

How To Generate Facebook Comment Plugin 

Facebook comment box can be added to any blog in two ways.

  • Without creating an App for your blog
  • Creating an App for your blog

Without creating an App

You can add Facebook comment box to your blog without creating an App for for your blog. This does not requite Before doing anything on your blog, you need to visit Facebook developer page to get the Facebook comment plugin. After that you need to enter url address of your website and then click Get Code. Read also : How to create custom AdSense Search Engine and Make Money from it.

The code has two piece. First piece is JavaSript SDK which you need to paste right after the opening <body> tag and second piece is the plugin code and you need to paste this code wherever you want the plugin to appear on you page. This is the simple way to add Facebook comment plugin to your blog/website. Read also : How to setup AdSense matched content and ad unit.
If you do not have knowledge of programming you will face problem. Since blogger template does not allow you to save the template because of the term version=v2.4. If you add Facebook comment box without creating an app to your blog you can't moderate the comments. SO better option is add the plugin by creating an app. Read also : Boost AdSense earning by blocking low paying ads.

Creating an App

If you can't create an app then you can't enable comment notification, moderate comments. To control all things related to your Facebook comment plugin, first you need to create an app. To create your Facebook comment plugin app visit Facebook developer page and click My Apps and then login with your existing Facebook email address and password. Read also : How to make your blog Push Notification ready.
After that select the App platform that is Website and click Skip and Create App ID. Here you need to enter your App name, Namespace and choose Category. After entering the details click Create App ID. Now you are on the dashboard of your app. You can control everything related to your comment plugin. Read also : Best screen recording software for windows.

Now click Settings and enter your Domain url address including http or https for example  http://www.name.com   and Contact email for getting the notification. After that click Save Changes. Read also : How to auto publish blogger post to Facebook.
Now click Status & Review to make this app and its live feature available for general public. Now click Yes to turn on this feature and then click Confirm to confirm changes. There are also many options on the dashboard which you can manage according to yourself. In this way you can manage your app settings. Read also : Best video calling app for 2G/3G/4G mobile phone.


Adding Facebook Comment Plugin to Blogger

Since your plugin is ready now its time to add to your blog. Now click Dashboard and click choose a platform then select Website and copy the code. You can also use the below code. But don't forget to replace the Your App ID with your own id.
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'Your App ID',
      xfbml      : true,
      version    : 'v2.4'
    });
  };

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

Important Note :-

Before changing or doing anything with template or uploading a custom template, always take backup of your blog's template and your blog's data as well. It helps you to recover your blog data and template from an unexpected error.

How to Download Blogger Template

How to Upload Custom Template


Now login to your blogger account and click Template and then click Edit HTML. Now press Ctrl + F to get search box inside the code so that you can easily find any code inside your template. Read also : How to make Money Online from Home.

After getting search box type <body  and hit enter on the keyboard to switch to body tag. Now paste the above code just below <body ........> tag. <body> tag is different depending upon your template. So better option is search only <body instead of <body> tag.

Now you need to copy the below code and paste wherever you want the plugin to appear on your blog. Don't forget to replace the url http://www.allbloggerbuzz.com/ in the code with your own url address.

<div class="fb-comments" data-href="http://www.allbloggerbuzz.com/" data-numposts="5"></div>

Once you have done the above steps click Save template to save the changes. Now click View Blog to see the plugin on your blog. Read also : How lock / track lost mobile phone and erase data remotely.

That's it! Thanks for reading the post. Let me know what plugin you use for comment on your blog. Also let others to experience this plugin by sharing this post on your social networks.



Recommended Post
Big on Hosting. Unlimited Space & Unlimited Bandwidth

Comments

Popular posts from this blog

How To Change Default File Download Path in UC Browser

All of us known that UC browser is the most popular, fast and less data consuming mobile browser for android devices. Many of us use UC browser on daily basis on our smart phones. By default UC browser has download path to internal memory device which is /storage/sdcard0/download. sdcard0 is the built in memory or internal memory of your device. Read also : How to fix HTTP and HTTPS Mixed Content Errors.

Do you know that this default download path can be changed? Since, internal memory is fixed, and once you exceed this value you can't download more. You need to move some data from mobile memory to the external memory which is sdcard1. If you change this default path to external memory card (sdcard1), you can download more data directly to your desired directory. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Here, I will show you, how to change this default download path from internal memory card sdcard0 to external memory card sdcard1. To do so you need to…

Calculation of Total Marks, Percentage, Division, Remarks, Maximum & Minimum Number of Students in MS Excel

In this post, I will help you to learn how to calculate total marks, percentage, division, maximum number, minimum number and remarks of students of a class very fast. At first you need to look over the above image very carefully. The above image shows the marks obtained by six students of a class.

Formula to calculate Total Marks of all students within seconds 

First you need to find out the Total Mark of a single student who is on the top of the list i.e, Mani. To calculate Total Mark of Mani, click on the Total Mark cell address of Mani i.e, H6 and then type the formula =sum(1st subject's cell address i.e, b6:last subject's cell address i.e, g6) and then press Enter on the keyboard or click anywhere on the worksheet. Here b6 and g6 are cell address of 1st subject (English) and last subject (Biology) of that student. Read also : How to Enable HTTPS for Blogger Blog.

After getting results, click on the resultant cell address of Total Mark of the 1st student i.e., Mani an…

How To Rename A WhatsApp Group

We all know that WhatsApp is the most popular messaging service for Android, BlackBerry, iPhone and for other platforms. In this post, I will show you how to rename an existing WhatsApp group. To rename an existing WhatsApp group your smartphone must have internet connection. After that you need to follow the below steps. Read also : How to track lost/stolen mobile phone and erase data remotely.


Step 1. Open WhatsApp application on your smartphone.

Step 2. After that you need to click CHATS tab and click on your group name.



Step 3. Once you click on your group name, you will able to see chat details. Now you need to click vertical dots located extremely top right corner and then click Group info. Read also : How to setup AdSense page level ads.


Step 4. Now you can easily rename your group. To rename the group just click Edit icon and then type the desired group name and click OK. Read also : How to protect your computer from WannaCry ransomware virus.


In this way you can rename a What…

Change UC Browser Default Homepage in Android Phones

We all know that Android OS operated Smartphones and Tablets are great for web browsing. Like other browsers, uc browser has a default search engine Yahoo is set for web search. UC browser provides different kind of search facilities under 5 different categories namely Web, Video, Shop, Image and APP. Read also : How to protect your computer from WannaCry ransomware virus.

In this post, I will show you how to change the default search engines of uc browser in Android devices for their 5 different categories. To do so you just need to follow the below steps. Read also : How to Enable HTTPS for Blogger Blog.

Change Default Homepage for UC Web search

Step 1. At first you need to open UC browser
Step 2. After that click Search. Follow the below image.


Step 3. Once you click Search, you will able to see the default search engine's icon for Web search like y for Yahoo, g for Google. Now you need to click that search icon. Follow the below image. Read also : How to change UC browser defaul…

Enable Auto Save Forms & Passwords in UC Browser

Many of you use UC browser on daily basis on your smart phone but very less enable this feature. Enabling auto save forms and passwords allows the browser to remember the username and passwords. It gives you relief from entering username & password every time whenever you login to your email. Did you enable auto saving form & password? If not, then do it now. Read also : How to track lost/stolen mobile phone and erase data remotely.

In this post, I will show you how to enable auto save forms & password in UC browser in your Android phones. To do so you need to follow the below steps.

Steps to enable auto save forms and passwords

Step 1. At first open UC browser

Step 2. In the second step, tap on the horizontal bar.


On the next image, you will able to see Bookmarks, History, Refresh etc. icons. Now swipe this menu screen to the left and tap Settings. Read also : How to create custom AdSense Search Engine and make money from it.


Step 3.  Now on the Browser Settings, you w…

Best Video Calling App For 2G, 3G, 4G and Wi-Fi Network

More or less every mobile subscriber wishes to chat with their contacts by seeing his/her infront of them. Now a days video calling becomes more popular in urban areas rather than rural areas. After the invention of 3G network it becomes a trend to chat with loved one through video calling. Read also : How to protect your computer from WannaCry ransomware virus.

But what happened if you have 2G network instead of 3G or 4G. Could you be able to chat with your loved one by seeing him on 2G network? There is a good news for those who wishes to see their friends or family members on mobile screen when they talk to them. There are many application software available on internet which provides video calling facility even on 2G network. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Although there are many video calling applications are available, among them my recommendation is IMO. Because IMO provides fast, free and high quality video calling facility to its members…

How To Setup AdSense Page Level Ads on Your Website / Blog

Google has updated a new AdSense ads format called Page-level ads. This Page-level ads feature is still in beta. If you are an AdSense publisher, I am sure you are already experienced with responsive ad unit , custom ad unit size and Custom AdSense search engine. When I logged into my AdSense account today, I noticed this new ad format introduced by AdSense. Read also : How to make your blog Push Notification ready.

Whats New in Page-level Ads

According to AdSense, "Page-level ads are a family of ad formats that offers a new and innovative way for you to monetize your content. With Page-level ads, you place the same piece of ad code once on each page where you want to show the ads. Once you've added the code, Ad Exchange will automatically show Page-level ads at optimal times when they’ll perform well for you and provide a good experience for your users." This Page-level ads are only for mobile sites and it offers two kinds of  ads Anchor/overlay and Vignette ad formats.…