Creating ShareThis buttons with custom images in Javascript

This should have been easy!

I wanted to add some ShareThis buttons on a page in an single page web application and update the link to be shared every time the hash was changed.

The shareThis functionality didn’t really allow this ‘out of the box’ and it took me a while to work out the best way to do it using Google and their API documentation.

What I wanted to do

Share an AJAX friendly / hashed url that updates along with the hash, using ShareThis and some custom button images

How I did it

I wrote a small Javascript function to do it (it’s not pure JS as I was using jQuery anyway.

IMHO the solution isn’t ideal as I don’t really like having to recreate te buttons every time, but it seems like the only way to make it work.

You can find the code on github here.

//---->BEGIN
  function updateShareButtons(location, title, imgsrc) {
    $('.share').hide();
    $('.sharethis').html('');

    var services = [
      {type : 'facebook',
        image : './css/img/social-facebook.png'},
      {type : 'twitter',
        image : './css/img/social-twitter.png'},
      {type : 'email',
        image : './css/img/social-email.png'},
      {type : 'sharethis',
        image : './css/img/social-more.png'}
    ];

    var svc, elm;

    for (var i = 0; i < services.length; i++) {
      svc = services[i];
      elm = $([''].join(''));

      $('.sharethis').append(elm);
    }

    stButtons.locateElements();

    $('.share').show();
  }

//----<END