Suresh Makwana: BLOGGER TIPS

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="background-color: white; color: #5e6f68; font-family: Arial, Verdana; font-size: 12px; line-height: 20px;" trbidi="on">
<div class="MsoNormal">
Are you looking for adding <b>Facebook Comments box</b> in your blogger blog than we will provide you tutorial about how to Add <b><i>Facebook Comments Box for Blogger</i></b>. Facebook has released comments plugin for blogs and websites. You can easily add Facebook comments box to your blog because this plugin can be added in any blog or websites. This comments box help to post comments on your post with Facebook profile and share them on Facebook.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #4a9979; outline: none; text-decoration: none;" target="_blank"><img alt="Facebook Comments Box" border="0" height="361" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGLXN903A4FYzpg9NFF1N-g6ydarAucVvu-iKGXJNcw8qs9lN2SmMIcNZz5H0rNUFMwXt0CSDxY4ocJJhFwjUZBc_eeuk4dI_SmBS81VADEEeT2i2bOFhy8pRmdGjdYnzY-Eicyu7IBUhG/s640/Facebook+Comments+for+Blogger+Blogs.jpg" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="Facebook Comments Box" width="640" /></a></div>
<h2>
How to Add Facebook Comments for Blogger</h2>
<div class="MsoNormal">
You can easily add <i>Facebook comments box</i> to your blogger blog with follow some simple steps as give below:</div>
<h3>
1. Create Facebook Application</h3>
<div class="MsoNormal">
First you need to want Facebook application ID so please follows below steps to get your App ID:</div>
<h4>
Step 1</h4>
<div class="MsoNormal">
Go to Facebook Developers Page.</div>
<h4>
Step 2</h4>
<div class="MsoNormal">
Click on create a new App and enter your application name and name space as shown in below picture.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #4a9979; outline: none; text-decoration: none;" target="_blank"><img alt="Facebook Comments Box For Blogger" border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghuegx9UArSQvQTpx6OY1FlPn0JoLhUut1J2TSSpS2BKwxsNsJHOp_8pC9s3TdIEwGkLjHinKcfhi-4Wfrkc3nbmI9hYWHZdWF8ahJ30gTUN8Ckw37TSxJHT2Mvf4DSVhY-E_BK_BLa9Uj/s400/create-facebook-application.png" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="Facebook Comments Box For Blogger" width="400" /></a></div>
<h4>
Step 3</h4>
<div class="MsoNormal">
Fill all required fields and add your domain name.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #4a9979; outline: none; text-decoration: none;" target="_blank"><img alt="Add Facebook Comments Box For Blogger" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivWmNLQtmP-qkCk9o6FTHvrrEbE-ZrLeTAwmsTI935C7zqDijzWHgglRZRU2GjTijU1H5ZuIK420cvcsBeKc9ejoy6YniXGZkkjsWwOks7I9rOgMXoJzI7-lKWFsm2nA8WlojJLpKiFx3W/s400/851560_569553723066960_538760720_n.jpg" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="Add Facebook Comments Box For Blogger" width="371" /></a></div>
<h4>
Step 4</h4>
<div class="MsoNormal">
Click on save changes and copy your App ID.</div>
<h3>
2. Add Comments Box to Blogger</h3>
<div class="MsoNormal">
Now follow below steps to add facebook comments box to your blogger blog:</div>
<h4>
Step 1</h4>
<div class="MsoNormal">
Log in into Blogger Dashboard and click on Edit HTML as shown in below picture. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #4a9979; outline: none; text-decoration: none;" target="_blank"><img alt="How to Add Facebook Comments Box For Blogger" border="0" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWqhyphenhyphenryQ8Hq4wO5OlU2AnLZasVeyEiJuN3Vyc0ZL6lUCDWECBu75hCTSQzv4M8Ke9At60n6FdXoL7gy-ulBaNlPc1lb7ve_DriYQsJHjVOOGMPzDMtpHNda4u-jLTrdA8Qf-43zAVLM90E/s400/Blogger-Edit-Template-html.png" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="How to Add Facebook Comments Box For Blogger" width="400" /></a></div>
<h4>
Step 2</h4>
<div class="MsoNormal">
Click on Expand Widget Template as shown in below picture.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #4a9979; outline: none; text-decoration: none;" target="_blank"><img alt="How to Add Facebook Comments Box For Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg9oPhaRFI2ArqRE08wIJCcmMHjFPw3JYrGdTdH8Ht43n-xHkiLKsVoqFDQB4o5VodoJsuXwUZD2YYhPa4KU7e6ug3BMRAwYhXx7UAQBfUCjRD4CUfpyJXP5HrMdTKS5tPecOvyuyBX61/s1600/ExpandWidgetTemplates.jpg" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="How to Add Facebook Comments Box For Blogger" /></a></div>
<h4>
Step 3</h4>
<div class="MsoNormal">
Search <html with the help of CTRL + F. Replace <html to following code.</div>
<blockquote class="tr_bq" style="color: black; font-style: italic; overflow: hidden; padding-left: 9px;">
<html xmlns:fb='http://www.facebook.com/2008/fbml'</blockquote>
<h4>
Step 4</h4>
<div class="MsoNormal">
Add below code before </head></div>
<blockquote class="tr_bq" style="color: black; font-style: italic; overflow: hidden; padding-left: 9px;">
<meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='<span style="color: red;">Sureshmakwana</span>' property='og:site_name'/><meta content='<span style="color: red;">BLOG_LOGO_IMAGE_LINK</span>' property='og:image'/><meta content='<span style="color: red;">YOUR_APP_ID</span> ' property='fb:app_id'/><meta content='<span style="color: red;">http://www.facebook.com/Haakblog</span>' property='fb:admins'/><meta content='article' property='og:type'/></blockquote>
<b>Tips:</b>  1.Replace <b>Sureshmakwana</b> to your blog name.<br />
2. <b>Blog_logo_Image_link</b> with your logo link.<br />
3. Change <b>Your_app_ID</b> to your Facebook app ID.<br />
4. Change your Facebook fan page with <b>http://www.facebook.com/sureshmakwana</b><br />
<h4>
Step 5</h4>
<div class="MsoNormal">
Add below code before</body></div>
<blockquote class="tr_bq" style="color: black; font-style: italic; overflow: hidden; padding-left: 9px;">
<div id='fb-root'/><script>    window.fbAsyncInit = function() {    FB.init({      appId  : &#39;<span style="color: red;">YOUR_APP_ID</span>&#39;,      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(&#39;script&#39;);      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;    e.async = true;      document.getElementById(&#39;fb-root&#39;).appendChild(e);    }());</script></blockquote>
<b>Tips:</b> Replace  <span style="color: red;">YOUR_APP_ID </span>to your Facebook application ID<br />
<h4>
Step 6</h4>
<div class="MsoNormal">
Now search below code.</div>
<blockquote class="tr_bq" style="color: black; font-style: italic; overflow: hidden; padding-left: 9px;">
<data:post.body/></blockquote>
<h4>
Step 7</h4>
<div class="MsoNormal">
Now add below code before it.</div>
<blockquote class="tr_bq" style="color: black; font-style: italic; overflow: hidden; padding-left: 9px;">
<b:if cond='data:blog.pageType == &quot;item&quot;'><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><br />
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/></div></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.haakblog.com/2013/07/add-facebook-comments-box-for-blogger.html" target="_blank" title="Facebook Comment Widget">Facebook Comment Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger Tips</a></div></b:if></blockquote>
<h3>
Demo: How to Add Facebook Comments Box For Blogger</h3>
<iframe allowfullscreen="" frameborder="0" height="390" src="//www.youtube.com/embed/XVkNlVByHNY" width="640"></iframe>
</div>
<div style="background-color: white; color: #5e6f68; font-family: Arial, Verdana; font-size: 12px; line-height: 20px; text-align: justify;">
If you have any question or update than you can contact with us any time at our E-mail support<b><a href="mailto:Haakblog@gmail.com" style="color: #4a9979; outline: none; text-decoration: none;">sm596830@gmail.com</a></b>.<b> I am always ready for fixing your css/HTML issues, </b></div>
<div style="background-color: white; color: #5e6f68; font-family: Arial, Verdana; font-size: 12px; line-height: 20px; text-align: justify;">
<i><span class="mail"><b>If you like this post and wish to get more post like this when we add new tutorial about blogger then<span style="color: blue;"><a href="http://feeds.feedburner.com/SureshMakwana" rel="nofollow" style="color: #4a9979; outline: none; text-decoration: none;">SUBSCRIBE TO OUR RSS FEED!</a></span> At Below:</b></span></i></div>
</div>

How to Add Facebook Comments Box For Blogger

Are you looking for adding Facebook Comments box in your blogger blog than we will provide you tutorial about how to Add Facebook Comm...

Suresh Makwana

How to Add Facebook Comments Box For Blogger

Popular Posts

Labels

Letest New Posts