Thursday, September 22, 2011

Add A Share Buttons to Blogger Sidebar

Author: Gagan Masoun
Add A Share Buttons to Blogger SidebarI know everyone use a social buttons widget on their blog. What if we add a little more interactivity & unique style to those icons. This is exactly what we're gonna do in this tutorial! We plan to turn an unordered list of sharing icons into a fancy share box using little CSS & Jquery.

You can see my blog's sidebar for demo.Before I proceed with the tutorial, I would like to inform you that this particular widget is browser compatible - works on all major browsers. The code was tested on the following major browsers - Firefox 3+, IE 6+, Safari, & Chrome). Let's get this installed on your blog.

This widget is powered by sharethis website.First of all you should have account on sharethis website.If you do not have sharethis account, make account first.After this sign in to sharethis account.Go to Get the Button option.

Follow these steps now:-

1. In first step you will see many options like Website, Wordpress, Drupal, Joomla, Blogger, Typepad, Tumblr, Posterous, Newsletter. Choose Website option in first step.

First Step

2. In second will see widget styles. There are four styles available in sharethis.Choose second style from the options.You can add more buttons in this widget after chosen the style.Like Facebook, Twitter, Google bookmarking, Digg, Delicious, Friendfeed, LinkEdin, Myspace, Google Buzz, Technorati, StumbleUpon, Orkut, Yahoo bookmarking etc. 

Second Step
3.In third step,you can choose a share widget is two options Oauth Widget & Classic Widget. You can choose anyone.
Third Step

4.Now, click on Get the Button (Green Color Button).Add first code in blogger sidebar HTML Gadget.

Note:- Add your ShareThis script tag first, without it the buttons don't work. You can put it anywhere on your blog. I recommend putting it in your header (between your <head> and </head> tags).

If you still face any problem regarding this widget, I am always ready to help you via mails. Even comments below the post will do!!


  1. can you plz tell me is there any trouble by adsense when we use yeildads and adsense together?

  2. @ravi No,you can not use adsense/yeildads together.But you can use other ads which are not similar with google ads.e.g: Infolinks,Kontera,Buysellads etc.

  3. Thank u for sharing these nice and creative technology for the improvement the business.It can also important for doing the seo for getting the good traffic.

    1. Yes, you are write @SEO Services, social buttons are most important part of any blog or website.

  4. thank you so much, if you didn't warn to add script in Head section, i can't use sharethis code. Well, some people told me it's hard to use (that i agree a bit).

    Using ShareThis = adventure to me. (but beautiful buttons ^ ^)

    In Blogger,
    - If you want hcount buttons , you must add script at Head section and add code of each buttons.
    - If you want chicklet buttons, you must add another script at Head section again and add code of each buttons. (since script of both of them are different)

    oh, how tired.

    I spent time to search tips how to make this ShareThis to share posts (because these buttons will share Homepage only) and ShareThis website will not release codes for that purpose easily (since I met answer at page somewhere in internet). and I must add more code carefully (almost every line) to make them share a post in blog.

    another problem i found and solve it already is you shouldn't use CopyNShare to blogger since it can changed link address in your blog. (it will add some weird words after .html) When I remove CopyNShare, all link addresses are back to normal.

    thanks to let me complain about my adventure in ShareThis land. Whoa, how long I comment!

    1. @Autoin Chance, you are absolutely right, It happens with Addthis buttons also. They share only homepage too. I will send your message to ShareThis team. Keep in touch with us :)