Add Facebook Like Button To Below Each Post ~ www.ganbichchitra.blogspot.com

Sunday, April 22, 2018

Add Facebook Like Button To Below Each Post

April 22, 2018 No comments

In the year 2010 the biggest social networking site Facebook lunched the Like button. With this button people can share interesting thoughts with their friends and family easily. If you are a blogger I recommended to take its advantages. Put Facebook like button on your blogger blog, so that your readers can share your article(s) with their friends on facebook. You can see that I have already added a Facebook like button to below my each post. So, why you are not trying it on your Blogger blog?

Let's see, how to add facebook like button to below each blogger post

1. Log in to Blogger Blog
2. Go to Design, click Edit HTML (Don't forget to backup your template)
3. Click Expand widgets templates box
4. Search for by pressing Ctrl+F
5. Now choose the style and add the following code just below

For Standard Button Style -

</pre>
<br style="box-sizing: border-box;"><i style="box-sizing: border-box;">For Box Count Button Style -</i><br style="box-sizing: border-box;"><br style="box-sizing: border-box;"><pre style="box-sizing: border-box; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvtuEFN0mxXqpcvSJ2hSzhRCyaeoiyavL0MBQ1xB660_1MP3M7OHQ6vIES5_17uJBWYz_1iU4X8O8Y8VixwgGTMJwH7B2UzmXQXdE1X2XTjOHLcF3ps8wHsvB96rSqGJ4t2U8GPb0naXI/s1600/sm-code-background-normal-mode.png") repeat-y rgb(240, 238, 238); border-width: 1px 2px 2px 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(137, 133, 133) rgb(137, 133, 133) rgb(204, 204, 204); font-family: arial; word-spacing: 0.6ex; font-size: 11.5px; line-height: 1.5em; overflow: auto; padding: 15px 5px 15px 25px;"><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=box_count&show_faces=false&width=50&<span style="box-sizing: border-box; background-color: rgb(224, 102, 102);">action=like</span>&<span style="box-sizing: border-box; background-color: rgb(230, 145, 56);">font=arial</span>&<span style="box-sizing: border-box; background-color: rgb(159, 197, 232);">colorscheme=light</span>&height=63"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:50px; height:63px;'/></pre>
<br style="box-sizing: border-box;"><i style="box-sizing: border-box;">For Button Count Style -</i><br style="box-sizing: border-box;"><br style="box-sizing: border-box;"><pre style="box-sizing: border-box; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvtuEFN0mxXqpcvSJ2hSzhRCyaeoiyavL0MBQ1xB660_1MP3M7OHQ6vIES5_17uJBWYz_1iU4X8O8Y8VixwgGTMJwH7B2UzmXQXdE1X2XTjOHLcF3ps8wHsvB96rSqGJ4t2U8GPb0naXI/s1600/sm-code-background-normal-mode.png") repeat-y rgb(240, 238, 238); border-width: 1px 2px 2px 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(137, 133, 133) rgb(137, 133, 133) rgb(204, 204, 204); font-family: arial; word-spacing: 0.6ex; font-size: 11.5px; line-height: 1.5em; overflow: auto; padding: 15px 5px 15px 25px;"><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&show_faces=false&width=95&<span style="box-sizing: border-box; background-color: rgb(224, 102, 102);">action=like</span>&<span style="box-sizing: border-box; background-color: rgb(230, 145, 56);">font=arial</span>&<span style="box-sizing: border-box; background-color: rgb(159, 197, 232);">colorscheme=light</span>&height=25"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:95px; height:25px;'/></pre>
<br style="box-sizing: border-box;">6. Finally click&#160;<b style="box-sizing: border-box;">Save template</b>, and you are done.<br style="box-sizing: border-box;"><br style="box-sizing: border-box;"><div style="box-sizing: border-box; color: rgb(56, 118, 29);">
<span style="box-sizing: border-box; font-size: large;">Customization area:</span></div>
<hr style="box-sizing: border-box;">
1. By default, the action set as&#160;<span style="box-sizing: border-box; background-color: rgb(224, 102, 102);">action=like</span>, to make it "Recommended", simply change the code as&#160;<span style="box-sizing: border-box; background-color: rgb(224, 102, 102);">action=recommended</span><br style="box-sizing: border-box;">2. To change the font style, replace&#160;<span style="box-sizing: border-box; background-color: rgb(230, 145, 56);">font=arial</span>&#160;to<br style="box-sizing: border-box;">&#160;&#160;&#160;&#160; font=verdana font=tahoma<br style="box-sizing: border-box;">&#160;&#160;&#160;&#160; font=verdana font=tahoma<br style="box-sizing: border-box;">3. To change the color theme, replace&#160;<span style="box-sizing: border-box; background-color: rgb(159, 197, 232);">colorscheme=light</span>&#160;to&#160;<span style="box-sizing: border-box; background-color: rgb(159, 197, 232);">colorscheme=dark</span><br style="box-sizing: border-box;">4. To change the position to left, right or to give a little space between text and like button do as following<br style="box-sizing: border-box;"><br style="box-sizing: border-box;"><pre style="box-sizing: border-box; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvtuEFN0mxXqpcvSJ2hSzhRCyaeoiyavL0MBQ1xB660_1MP3M7OHQ6vIES5_17uJBWYz_1iU4X8O8Y8VixwgGTMJwH7B2UzmXQXdE1X2XTjOHLcF3ps8wHsvB96rSqGJ4t2U8GPb0naXI/s1600/sm-code-background-normal-mode.png") repeat-y rgb(240, 238, 238); border-width: 1px 2px 2px 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(137, 133, 133) rgb(137, 133, 133) rgb(204, 204, 204); font-family: arial; word-spacing: 0.6ex; font-size: 11.5px; line-height: 1.5em; overflow: auto; padding: 15px 5px 15px 25px;"><div style='float:<span style="box-sizing: border-box; background-color: rgb(213, 166, 189);">
right</span> padding:<span style="box-sizing: border-box; background-color: rgb(213, 166, 189);">7px</span>'>

YOUR FACEBOOK LIKE BUTTON CODE GOES HERE...

</div>
</pre>
<br style="box-sizing: border-box;">5. If you wish to add the like button just below your post title simply add the code just above&#160;<b style="box-sizing: border-box;"><data:post.body/></b><br style="box-sizing: border-box;"><br style="box-sizing: border-box;">That's all. Don't forget to like us, and if you have any problem to setup or customization please don't late to let me know.<br style="box-sizing: border-box;">May Allah bless you all.</div>
</div>
</div>
</div>
<div class="postftag" style="box-sizing: border-box; overflow: hidden; padding-top: 15px; padding-bottom: 15px; line-height: 1.9em; border-top: 4px solid rgb(220, 220, 220); margin-top: 20px; font-family: arial, Helvetica, san-serif; font-size: 14px; background-color: rgb(255, 255, 255);">
<b style="box-sizing: border-box;">Written By:&#160;</b><a href="https://plus.google.com/101870758229162541726" itemprop="author" rel="author" style="box-sizing: border-box; transition: all 0.4s ease-in-out; color: rgb(255, 255, 255); text-decoration-line: none; display: inline-block; padding: 0px 5px; height: 20px; font-size: 11px; line-height: 20px; background-color: rgb(51, 51, 51); text-transform: uppercase;" title="author profile">ASHRAFUL HAQUE SAIMOOM</a>&#160;</div>
</div>