Facebook comment box is a useful tool for bloggers to increase & improve conversations and drive more traffic since the post commented on by your blog visitors will be shown on the visitor’s wall on Facebook.
Today, I want to share a simple process that will enable bloggers to add Facebook Comment box to their blogs without any ado.
How to Apply Facebook Comment Box on Blogger Blog
Step:1 ==> Create a Facebook App ID
1. You need a Facebook App Id. Go to Facebook Developers Page to create one.
2. Click on "+ Create New App" a window will pop out, so enter your blog Name and click on "Continue" as shown in the image below:
3. A new app id will be given to you like the one you're seeing below, so note down your APP ID.
Step:2 ==> Add Comment Box Code To Blog Templates
1. Go to your Dashboard >> Templates >> Edit HTML and Expand Widget Templates checkbox.
2.Use CTRL + F key on your computer keyboard to search for <html and replace it with the code below.
<html xmlns:fb='http://www.facebook.com/2008/fbml'
3. Search for <body> tag in you template and add the code below after it.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
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>
4. Replace YOUR_APP_ID with the App ID you note in Step 1 above.
5. Search for </head> tag and add the open graph meta tags below above the </head> tag
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/><meta content='Ideas And Reviews' property='og:site_name'/><meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/><meta content='YOUR_APP_ID' property='fb:app_id'/><meta content='http://www.facebook.com/IdeasandReviews' property='fb:admins'/><meta content='article' property='og:type'/>
Now Make the Following Changes on the Code above:
Replace Ideas Ans Reviews with your blog name.
Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
Replace YOUR_APP_ID with your app id.
Replace http://www.facebook.com/IdeasandReviews with your Facebook page url.
6. Search for the any of these tag:
<p class='post-footer-line post-footer-line-3'><div class='post-footer-line post-footer-line-3'><data:post.body/><b:if cond='data:blog.pageType == "item"'>
<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='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px;'>Facebook Blogger Plugin by <b><a alt='blogger templates' href='http://www.ajaxpanex.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>ajaxpanex.blogspot.com</a></b> | <b><a alt='Facebook-Comment-Box-widgets' href='http://ajaxpanex.blogspot.in/2012/10/add-pinterest-pin-it-button-with.html' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Get Widget</a></b></div></div>
</b:if>
- If you want to use the dark scheme then simply replace light with dark
- To change the Comments box size, change this value width='520'
You can keep Facebook Comment box and Blogger default comment box. But in case you want to make Facebook comment box your default comment box, go to Settings > Posts and Comments and set the Show Comments option to Hide and Save the Settings.
Finish!
It is true that the decisions you take in a business initially, decide the future of the entire set up. Talking about blogging specifically,
there are certain tips that you must know, understanding their
significance in boosting your blog’s popularity. It is obvious that once
you plan to be a blogger, you look forward to a huge traffic
following you along with a considerably great revenue been generated.
However, what makes your blog a hit is your attitude towards adopting
the basic requirements of this domain.
The Tips might differ person to person, but after researching for days
and days about what were the magic ingredients that professional
bloggers added in their blogs that are earning in Billions today, Here
is a list of 35 Must follow tips that you need to add in your blogging
career.
An
ideal length of a post is in between 700- 1500 words, depending on the
nature of post. Do not write lesser than 700, as Google penalize blogs
for that severely. The post can be as long as you wish to, but lengthy
posts make readers lose their interest in it.
Always
give an option on your blog to get subscribed via mails. People who are
busy to visit your blog daily, can subscribe for its RSS feeds and can
still stay connected.
Blogger
just added Custom robots header tags to post editor. One of the
features of search preferences was robots.txt and Robots tags which
could be set only for homepage, archives, posts and pages. But now you
can edit these settings even for individual posts and pages right from
BlogSpot post editor. Unlike Meta Description,
Custom Robots Header tags are not visible and are not shown if you try
to check it by viewing the browser source file for your blog. You will
only see Meta Description if you have added the dynamic code. We will
learn today where are robots tags added in your templates and how can
you view them. Lets first find and locate these Robots header tags.