How to Add Social Media Buttons to Blogger Posts

Sometime we do not satisfied with the original Social Media Buttons on blogger.

We wanna mix the Original Social Media Buttons,

and hope our blog looks a bit different with others.

You know it is pretty simple.

How to Add Social Media Buttons to Blogger Posts?

1.

Go to Dashboard >> Design - Edit HTML >> Expand Widget Template 

2.

Use (CTRL + F) to find this code:

<data:post.body/>

Button positioning :

1. To position the buttons at the bottom of post, place te code bellow <data:post.body/>

2. To position the buttons at the top of post, place te code above <data:post.body/>

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='float: left; margin:0px 0px 0px 30px; width:44px;'>

<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>

<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>

</div> 

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>

<style type='text/css'> 

#pin-wrapper > a {background-image:none !important;}

</style> 

</b:if> 

<!-- Pinterest End -->

</div>

<div style='clear: both;'/>

<!-- Horizontal social buttons End -->

3.

When done, save your template and exit.

Thanks for coming, and share this article if you find it useful.

source : http://www.digitalkonline.com/blog/how-to-add-social-media-buttons-to-blogger-posts/