How To Get Counter Buttons

1. Go to Template > Edit HTML > Proceed
2. Don't go any further until you back up your template.
3. Click the Expand Widget Templates checkbox on top right of the code window.

(Click to enlarge)

Locate the code <data:post.body/> tag and paste the following code immediately above that code if you want the counters on top of your posts or immediately below for it to show up below posts.   See the search bar at the top of the image followed by Find? Enter the code in that box and it will highlight the code for you.  It can be pulled up by simply pressing "CTRL F".

Here is the code:

<!-- Scripts 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'> 
 (function() { 
 var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; 
 po.src = &#39;https://apis.google.com/js/plusone.js&#39;; 
 var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s); 
 })(); 
 </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> 
 <!-- Scripts End -->
 <!-- Horizontal social buttons Start -->
 <div class='horizontal-social-buttons' style='padding:10px 0 10px;'> 
 <!-- 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 annotation='bubble' expr:href='data:post.url' size='medium'/> 
 </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> 
 <!-- Pinterest Start -->
 <b:if cond='data:blog.pageType == &quot;item&quot;'> 
 <div id='pin-wrapper' style='display: inline;'> 
 <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> 
 <a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/> 
 </div>  
 <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script> 
 <script type='text/javascript'> 
 function run_pinmarklet() { 
     var e=document.createElement(&#39;script&#39;); 
     e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); 
     e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); 
     e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); 
     document.body.appendChild(e); 
 } 
 </script>   
 </b:if>  
 <!-- Pinterest End -->
 </div> 
 <div style='clear: both;'/> 
 <!-- Horizontal social buttons End -->

Note: Pin It button will only appear on post pages.  it is because the button only pins from the page on which it appears.  Preview before saving.

This is what it will look like if you want it at the bottom.

Source: this posts images are my own.