Some of my custom blog design clients ask me to install a "Share" button when I'm creating their blogs. There are many ways to do this and many scripts / buttons available to choose from. The method I'm going to explain is my favorite and it's also the easiest. You don't have to do anything other than copy and paste a little bit of code into your template. Granted, tinkering with your template is not something you should do unless you've got at least a bit of knowledge about it, but in the case of Blogger.com you can always preview your changes and see if it worked before saving -- if it didn't work you can clear your changes and either start over again or find someone else to install it for you.
Add to Any Share Button
The button and script I prefer is that of Add to Any. I like the colors and I like the options and I like the way it's graphically designed. If you'd like to have this share button show up at the end of each blog post you can add this to your blogger.com blog template in the following way:
- Step 1: Go to your Blogger Dashboard
- Step 2: Click on 'Layout'
- Step 3: Click on 'HTML'
- Step 4: Check the box that says "Expand blog widgets"
- Step 5: Scroll downward until you find the bit of code that looks like this <data:post.body/> This code will be quite a ways down and may be difficult to find. If you're having difficulty locating it you can use the Find function in your browser. To do this with Firefox, click EDIT in your menu bar and then highlight FIND. When the box appears at the bottom of your screen type the code into it and you should then be able to find it quickly.
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4c91ae0643c8b3d3" class="addthis_button_compact">Share</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c91ae0643c8b3d3"></script>
<!-- AddThis Button END --> - Step 6: Copy the code you see on 5 line(Red Color) and then paste that code after<data:post.body/>
- Step 7: PREVIEW it! Do not save it yet! If you've made an error it either won't be possible to preview at all (and it will tell you that there is a code error if that's the case) or you will see a preview that has changes you didn't want to make. If that happens, DON'T PANIC. Simply click the blue CLEAR EDITS button at the bottom of the page and start over.
- Step 8: If you got everything right and you're happy with the results, click SAVE.
- Step 9: Enjoy your new Share Button!Time For Comments Now.....!!!