Helper Blogger: blogspot tutorials

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content">
<style>.fullpost{display:inline;}</style>  <br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<br /></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafzsLsL878t_q8mVKY8SbhlGaJ36h9WX7GKN7wdYEgiJi7EXgLT0FHZZ2JlbLwPFQjLyUP38tBygMR-Jio_tnxXmSVpMZPo2fv9ol8_jq2rQcOliGVNmNgTpZ70qs0c_CM5dJPPc6VPI/s1600/facebook+comment+box.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="facebook comment box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafzsLsL878t_q8mVKY8SbhlGaJ36h9WX7GKN7wdYEgiJi7EXgLT0FHZZ2JlbLwPFQjLyUP38tBygMR-Jio_tnxXmSVpMZPo2fv9ol8_jq2rQcOliGVNmNgTpZ70qs0c_CM5dJPPc6VPI/s1600/facebook+comment+box.jpg" title="" /></a><large>F</large>acebook have successfully released many of the resources and plugins for bloggers. In the whole plugins of Facebook, LIKE and Share were the most inspired one. Now they have released Facebook comment form for bloggers on which I am going to give the tutorial today. Facebook comment form helps the bloggers in getting most comments and more social media exposure. This Facebook comment plugin looks simple, cool and it allows users to comment on your blog by logging into Facebook, Yahoo, AOL and Hotmail. This plugin by them is really an awesome resource for bloggers, so what are you waiting for???!!. lets move on with the tutorial.<br />
<div>
<br />
<a href="http://www.blogger.com/blogger.g?blogID=5633879042047294684" name="more"></a><br />
<h2 style="text-align: left;">
How To Add Facebook Comments form to Blogger</h2>
<h3 style="text-align: left;">
Creating An App in Facebook</h3>
<div>
1. Go to <a href="https://developers.facebook.com/apps/?action=create" rel="nofollow" target="_blank">Facebook developers page</a> to create a new app.</div>
<div>
<br /></div>
<div>
2. Create an <b>new app</b> with your blog details as shown below.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBZyU4lCeRPYJi9mMBv1BjJp2JJf0eM1FQPHIlO9XpAFo1siIYNw2RGRJc2rZ1ybvNklHGCBGmpBY1vNUFP1R8KIFXUPRUjV1jQ7ckPlhPRYGDNDcGEIa5658GjZu6L0vEyynmFziMZ0/s1600/create+new+app+in+facebook.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="create a new app in facebook" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBZyU4lCeRPYJi9mMBv1BjJp2JJf0eM1FQPHIlO9XpAFo1siIYNw2RGRJc2rZ1ybvNklHGCBGmpBY1vNUFP1R8KIFXUPRUjV1jQ7ckPlhPRYGDNDcGEIa5658GjZu6L0vEyynmFziMZ0/s400/create+new+app+in+facebook.JPG" title="" width="400" /></a></div>
<br />
<div>
<br /></div>
<div>
3. Note down your Facebook <b>app id</b> which will be shown like this.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ283qFAfrs-ChJIF723aF2QTDOaKLDYrMJIaP-CZ25nGJo-wgUEHA9KODS4qawRtL8poBmAm-YX5_w9ST-4gX2NjNd6kwo6Dsgu7lBlvUYcHDj9dlDFEeLk1n9V8mHOADny_7481aBd0/s1600/note+facebook+app+id.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="find your facebook app id" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ283qFAfrs-ChJIF723aF2QTDOaKLDYrMJIaP-CZ25nGJo-wgUEHA9KODS4qawRtL8poBmAm-YX5_w9ST-4gX2NjNd6kwo6Dsgu7lBlvUYcHDj9dlDFEeLk1n9V8mHOADny_7481aBd0/s1600/note+facebook+app+id.JPG" title="" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="border: 2px dashed red; color: black; height: 20px; width: 300px;">
<div style="text-align: left;">
  JavaScript SDK for Facebook comment box</div>
</div>
<div>
<br />
<br />
4. Now go to your <b>blogger dashboard </b>--><b> template</b> --> <b>Edit Html</b> (Tick expand widget template option).</div>
<div>
<br /></div>
<div>
5. search(Ctrl+F) for <b><html </b> and replace it with the following code.</div>
<div>
<blockquote class="tr_bq">
<span style="font-family: inherit;"><html xmlns:fb='http://www.facebook.com/2008/fbml'</span></blockquote>
</div>
<div>
<span style="font-family: inherit;"><br />
</span></div>
<div>
<span style="font-family: inherit;">6. Find For <b><body></b> tag and add the following code just after it.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span></div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<span style="font-family: Verdana, sans-serif;"><div id='fb-root'/></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><script></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">        window.fbAsyncInit = function() {</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">        FB.init({</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">          appId  : 'YOUR_APP_ID',</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">          status : true, // check login status</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">            cookie : true, // enable cookies to allow the server to</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">     access the session</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">          xfbml  : true  // parse XFBML</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">        });</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">      };</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">        (function() {</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">        var e = document.createElement('script');</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">          e.src = document.location.protocol +   '//connect</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">    .facebook.net/en_US/all.js';</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">        e.async = true;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">          document.getElementById('fb-root').</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">    appendChild(e);</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">        }());</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">    </script></span><br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
<br />
<br />
<b style="font-family: inherit;">Note::</b><span style="font-family: inherit;"> Replace </span><b style="font-family: inherit;">YOUR_APP_ID </b><span style="font-family: inherit;">with your app id you just noted down.</span><br />
<br />
<div style="border: 2px dashed red; color: black; height: 20px; width: 300px;">
<div style="text-align: left;">
  Facebook Open graph tags</div>
</div>
<br />
7. Now search for <b></head> </b>and add these open graph meta tags just above it.<br />
<br />
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<span style="font-family: Verdana, sans-serif;"><meta expr:content='data:blog.pageTitle' property='og:title'/><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><meta expr:content='data:blog.url' property='og:url'/><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><meta content='Helper Bloggers ' property='og:site_name'/><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><meta content='YOUR_APP_ID ' property='fb:app_id'/><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><meta content='http://www.facebook.com/bloggertricksdotbiz' property='fb:admins'/><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><meta content='article' property='og:type'/></span><br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
<br />
<br />
<b style="color: red; font-family: inherit;">Note::</b><br />
<div style="font-family: inherit;">
Replace <b>Blogger Tricks</b> with your blog name.</div>
<div style="font-family: inherit;">
Replace <b>YOUR_BLOG_LOGO_IMAGE_LINK</b> with your blog logo image url.</div>
<div style="font-family: inherit;">
Replace <b>YOUR_APP_ID</b> with your app id.</div>
<div>
<span style="font-family: inherit;">Replace <b>http://www.facebook.com/bloggertricksdotbiz</b> with your </span>Facebook<span style="font-family: inherit;"> page url.</span></div>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
Facebook Comment box widget code</h3>
8. Now search for this code.<br />
<br /></div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<b:includable id='comment-form' var='post'><br />
<div style="background-color: white;">
</div>
</blockquote>
<div>
<blockquote class="tr_bq">
<br /></blockquote>
</div>
<div>
Add the following code just below it.<br />
<br /></div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<b:includable id='comment-form' var='post'><br /><br />
<br /><br />
Add the following code just below it.<br /><br />
<br /><br />
<b:if cond='data:blog.pageType == "item"'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><br />
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div><br />
 <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='500'/></div><br />
</div><br />
</b:if><br />
<div style="background-color: white;">
</div>
</blockquote>
<div>
<blockquote class="tr_bq">
<b style="color: red;">Note:: </b></blockquote>
</div>
<div>
<ul style="text-align: left;">
<li>You can change the width of widget by replacing<b> 500</b> with your desired width.</li>
<li>As you all know you can change the color scheme to <b>light </b>or <b>dark.</b></li>
</ul>
</div>
<div>
</div>
<div>
9. <b>Save </b>your Template.</div>
<div>
</div>
<div>
</div>
<div>
That's It pals. . .</div>
<div style="font-family: inherit;">
</div>
</div>

Add Facebook Comments form to Blogger Blogs

F acebook have successfully released many of the resources and plugins for bloggers. In the whole plugins of Facebook, LIKE and Shar...

+ Read more »