Thursday, 17 November 2011

Vertical bar with official share buttons for Twitter, Facebook, Google Plus, LinkedIn

So, today we've been setting up this blog.

Part of the reason why we have chosen is because it is easier to customise some important bits and bobs. And among those bits and bobs is the ubiquitous 'share this post' bar. Vertical share buttons. Easy right?

I trawled around on the Internet and I found loads of variations on this theme, several referencing Mashable's share bar, which seems popular. I also found all sorts of untrustworthy crap marked for the attention of site administrators who don't want to use their brain to customise or learn anything whatsoever. It's a scary world of dodgy bloggers out there!

But I didn't find any that did exactly what I want. This is what I want:
  • Simple. I'll sacrifice complexity for simplicity, any day.
  • Encapsulated. I don't want to have to link to someone else's stuff, and have my site compromised if theirs goes down.
  • Customisable. I'd love an amazing wizard that helps me customise the bar, but on the other hand I want simplicity and tidy encapsulation, so I'll settle for code that's well enough written for me to mess around with directly.
  • Official. I want the official share buttons from the official sites. Lots of bars don't do this. Don't know why.
So, basically, I made one that does exactly (and only) that stuff.

I'm focused on sharing this site on Twitter, LinkedIn, Google Plus and Facebook. So that's what this bar does. You could easily add other stuff though (like StumbleUpon or Digg or whatever).

I've annotated the code so that you can see where the official share button came from, in each case.

Get all the code you need to install this on your blog right here.

Installing the share button gadget

  1. Download the code, which is a single txt file, right here.
  2. Go to the Layout page on your blog.
  3. Click 'Add a gadget'. You can put the gadget anywhere on the page, as it's going to float to the left of your site anyway, but personally I'd stick it under the Header.
  4. Select 'HTML/JavaScript' from the selection of gadgets in Basics.
  5. Don't bother adding a title. It won't show up anywhere.
  6. Copy and paste the text from the file you downloaded from here into the big box.
  7. Customise the code, which is quick and easy. See below.
  8. Click Save.
  9. You're done. Have a look at your blog.

Customise the code if you like

There is one thing you must do. You must edit the bit near where it says TWITTER that says data-via="elecmal". Change "elecmal" to your Twitter user name. Then the tweets from this will say via your user name, rather than mine.

If you want to add other social sites, I'd recommend that you type into Google "official share button" + the name of the site, and you're sure to find a very easy wizard to create the button you need, provided by the official site itself. (I've linked to the ones I used in comment tags in my code.) Once you've got the code, paste it in just like the ones in my code, surrounded by a <div class='sharebutton'> tag.

Otherwise, you could change the layout by fiddling with the code in the <style> tag at the top. I have glued the bar to the bottom left of the browser with the code "bottom:0px; left:0px;". You could change this - maybe "top:30px; right:0px;". Some people prefer the bar to be bolted onto the right or left of their blog. To do that, use something like "top:15%; margin-left:-155px;". Try it out and see what works for you!


  1. Very. very nice was looking for this one for quite a while. thanx to ed. +1 4 u

  2. tnx, great one. just have to figure out how to add facebook ;)

  3. Should be pretty easy. :-)

    There's a link to the page where you can grab the code for your own version straight from the Facebook Developers page. Otherwise, customising the code I put in the widget already should be straightforward.

    Glad you like it - thanks for the thanks!