Adding Top Social Media Sharing Buttons to your blog posts

Tweet

Wish to add a social Media Sharing Buttons in a snap? Here's my latest updates!

Compare with my previous posts,

• All-in-one Share Buttons on your Blog Post
• Easiest Way to Add Facebook Like Button on Blogspot 

I think this one, is a lot easier and updated, since 'PIN' button has been added too! So if you want to add social media sharing buttons like Google +1, Twitter, Facebook like+send, Pinterest to your blogger posts ALL at once, here are the steps to follow:

1. Once sign-in to gmail, go to Google dashboard.
2. Look for the blogger section and on the left side of it, click manage blogs. 
3. Select the blog you wish to modify. Look for the dropdown menu at the left side, then select Template and then Click Edit HTML.

NOTE:  Make sure to back-up first your Template before proceeding with the next steps.


4. In the window that appears, Tick the box that says, "Expand Widget Templates". 
5. In the HTML code, find <data:post.body/>  (Note: This line of code appears twice. Make sure to choose the first one.)
6. Copy all the code from the box and paste above the code: <data:post.body/>
7. Click the "Save Template" button and then just click the "Close" button.

 <!-- 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 = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Google +1 --> <script type='text/javascript'> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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 --> <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='"http://pinterest.com/pin/create/button/?url=" + 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> <!-- Pinterest End --> </div> <div style='clear: both;'/> <!-- Horizontal social buttons End -->

Kindly hit like if it helps you. :)