Thursday, December 17, 2015

How to Add Facebook Comments box in to Blogger

Facebook is the most viral social networking site, so it might be the reason why one should always think about making use of all the features that it provides to the publishers and developers. However, I would not push anyone to start using Facebook comments without knowing its advantage. Every site has their own priorities and concerns but for the sake of an ongoing argument, let us first take a look at the following pros of adding Facebook Comments in Blogger.


So how to do this method in to your blogger blog follow the below my instruction step by step.
1. First you need to create a facebook application Click here to get facebook developer application site and click in to "Apps" from the tab menu afterward click on "Create a New App"
 
2. Now fill the form in to Creat a New App and click an "Create App"
 
3. Confirm the security check and click in to Submit  button
Afterward Now you will land of a new page which would provide you your application details like App ID, App name and etc. You need to copy these keys and enter them later.

Now follow the below step how to insert comment box in to blogger blog.
1. First Go to the Blogger Dashboard "Templates > Edit HTML"
2. Now search for the <html and give the below code just after <html tag.

xmlns:og='http://ogp.me/ns#


3. Now search for <body> tag and just below it paste the following code.

<div id="fb-root"></div> <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 your facebook application ID
5. Now search for the </head>  and best the below code just above the</head> tag

<meta property="fb:app_id" content="
YOUR_APP_ID"/> 6. Now replace the YOUR_APP_ID here with your facebook application id.
7. This is last step Now search for the code <b:includable id='comment-form' var='post'> and just after it paste the below code.

<b:if cond='data:blog.pageType == "item"'>     <div     style='padding:20px 0px 5px 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='550'             />         </div>                 </div>                 </b:if>
Now click on "Save Templates and you have successfully added facebook comment box in to your blogger blog. 

0 comments:

Post a Comment