All-in-one Share Buttons on your Blog Post

Tweet

Last year I created a post about how to "Add Facebook Like Button on Blogspot". This time I'm gonna share you on how to add all-in-one share buttons on each of your blog post for easy content sharing!

With the code below you can easily integrate the important social share buttons like twitter, google +, facebook like, or even share it with your facebook friends!

You can add share buttons before or after your post, as easily as a snap! Here's how:

1. Go to your Blogger Dashboard.
2. Then on Layout/Design Tab > Page Elements.
3. Click on "Add a Gadget" link, choose HTML/Javascript from the list, and paste ALL the code below, on it. Save.
4. Position your html gadget - display it at the top or at the bottom of your blog post, then Save!

 Copy all this code.
 <div> <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 --> <b:if cond='data:blog.pageType != "static_page"'> <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 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> </div> </b:if> <div style='clear: both;'/> </div>

If the feature of adding a gadget is not available on your layout/design tab,
Go to Design Tab > Edit HTML, and paste the code above, before or after this code:

<data:post.body/>  


(CTRL + F, too easily find this code in the html file.

Save and you're done! :)

>> Kindly "LIKE" this post if it helped you : )