Responsive Ad Slot

Latest

latest

How to add Facebook Like Button Counter Buttons To Blogger every post

Tuesday, August 28, 2012

/ by Umesh shrestha
Hello Friends Today I am going to share some Blog tips.  How to add Facebook like button,Retweet, Stumble and Digg Counter Buttons below blogger post title. This article will help you how to make Your blog little Unique or professional  .The widget includes most popular sicial site Facebook Like Button which is highly appreciated throughout the our favorite the retweet button, Stumble and Digg Counter Buttons. All these buttons are eye catching so the visitors would love clicking them and thus bringing you more and more traffic by sharing your an blog post with people in their social media networks. You can see these buttons in action just under my post titles. So how do we add them? Simple few step Here we go –>

Look hare demo screenshot: social-media-buttons


How to add Social Media Buttons To Blogger?

The method is as simply as throwing a peanut in air and swallowing it. Simply follow these steps,

  1. Go To Blogger > Design > Edit HTML
  2. 1st Back up your previous  template design.
  3. Check mark the Expand Widget Templates box
  4. Then click (Ctrl + F) and in the browser search box paste this code,
data:post.body
    5. Just above this code paste the code below,

<!--script Start --> <b:if cond='data:post.isFirstPost'> <!-- Facebook --> <div id='fb-root'/> <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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;)); </script> <!-- Google +1 --> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script> <!-- Twitter --> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script> </b:if> <!-- ScriptsEnd --> <!-- Horizontal social buttons Start --> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <div class='horizontal-social-buttons' style='padding:5px 0 5px;'> <!-- Twitter --> <div style='float:left;'> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <!-- Google +1 --> <div style='float:left'> <g:plusone size="medium" expr:href="data:post.canonicalUrl"/> </div> <!-- Facebook Like+Send --> <div style='float:left;'> <fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/> </div> </div> </b:if> <div style='clear: both;'/> <!-- Horizontal social buttons End -->

 
6.  Save your template and see your blog with some best Beautiful social media buttons.your Post title below .
Enjoy...............!!
 Liked Our Post ?? Click below Like Facebook like button.


www.meroconcept.blogspot.com
Code source - Blogger Trics  


Don't Miss
© all rights reserved
made with by templateszoo