How To Add FACEBOOK LIKE And SHARE Widget To The End Of Every Blog Post With HTML & CSS Code

   Social Networking sites plays important role to drive the huge traffic's to the blog. We have to take the advantage of them! We can use social networking sites to increase blog visitors and readers by posting and sharing blog contents on this sites. There are many ways to auto post blog entry to Facebook or twitter, I will also write about How to Auto-post blog entry to Facebook and twitter.

 

But right now I am going to explain how to add a ultimate Facebook utility or say widget to the end of post content, that the readers can Like your Facebook page or  can share URL of your Facebook page.

Why This Widget Is Important ?

This widget is very simple and designed using HTML and CSS. When audience or reader opens your blog post this widget will appear at the bottom of the post contents. After reading the post, when reader see this widget he will definitely Like your Facebook page.

What You Need Before Adding Facebook Like & Share Widget Below Each Post To Your Blog Or Website :

STEPS:

1. Your blog should have Facebook Like Widget to the Sidebar or anywhere in the blog.
2. If you don't have Facebook Like Widget Click Here to Add it to your blog.

How To Add FACEBOOK LIKE And SHARE Widget To The End Of Every Blog Post :

1.  Log in to your Blogger.
2. Click on  Template  menu.
3. Select Edit HTML tab.
4. Now Click on HTML/XML code of your blog and press Ctrl+F.
5. Then copy and paste        <div id='postbottom'>           to the input box and press Enter.
6. Now copy and paste the following code just above <div id='postbottom'>.

Code to Copy :

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Bybitz Facebook Like & Share Widget Below Each Post START -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='bybitzfb'>
<table style='background-color:#1B949E;'>
<tr><th style="font-family:'Crete Round', serif;color:white;font-size:20px;">
If you like this post..Then..
</th></tr>
<tr><td style="font-family:'Crete Round', serif;color:white;font-size:20px;">
Please give us your just <blink>5 Seconds</blink> To Hit <font color='pink'> LIKE</font> button of Our Facebook Page!
</td></tr>
<tr><td style="font-family:'Crete Round', serif;color:white;font-size:20px;">
<div class='fb-like' data-href='http://facebook.com/bybitz' data-send='true' data-show-faces='false' data-width='50'/>
</td></tr>
<tr><td style="font-size:15px;text-align:right;text-decoration:none;">
<a href="http://bybitz.blogspot.com/2013/07/how-to-add-facebook-like-and-share.html">
<font color="white">Get this widget</font>
</a>
</td></tr>
</table>
</div></b:if>
<!-- Bybitz Facebook Like & Share Widget Below Each Post End -->

Finally :

1. Replace the username bybitz to your username in the code above.
2. Click    (Save template).
3. And You have done it.. Now check your blog.
4. If you encountered any problem contact me.
5. And finally I would like to read your Feedback and Comments, post your thoughts!