How to Add a Share This Button to Blogger

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.

Copy and Paste This Code

<!-- Add to Any Share/Save BEGIN -->
<br/><a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Save/Bookmark' border='0' src='http://static.addtoany.com/buttons/share_save_171_16.png' width='171' height='16'/><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p></a><script type='text/javascript'>a2a_linkname_escape=1;a2a_linkurl="<data:post.url/>";</script><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'></script>
<!-- Add to Any Share/Save END -->

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.

  • Step 6: Copy the code you see in the blue box 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!

 

More by this Author

  • How To Place Photos Side By Side In Blogger
    0

    If you're reading this article, you've probably been trying to get pics into your blogger posts in a side-by-side fashion, but couldn't quite figure out how to manage it. That's because the option isn't available in the...

  • How to Insert a Custom Signature in Blogger Posts
    0

    Before I explain how to insert a custom signature at the end of each of your blog posts, please note this is tutorial is only meant for users of Blogger. If you want to do this with Wordpress or something similar,...

  • The Original 7 Signs You're An Empath
    990

    I wrote this article years before it became a popular topic. If you're emotionally overwhelmed and feel as though the weight of the world is on your shoulders, you might be an Empath who is absorbing other people's...


Click to Rate This Article
working