Custom share icons

Add in custom share links

If your anything like me you will have been asked or wanted to add share icons to your site or clients site / app. But the designers have proposed custom icons so adding in the default social share icons will make the design look crap or your haven’t managed to convince them that the default functionality is actually ok. Having said that the default look is ugly. So what to do? I have used this method in production and all has went well. Here is the code and a simple explanation.

How it works

You start by building up a url using the relevant url for each of the share services. So for example twitter url is https://twitter.com/intent/tweet?status= then you get the the document page title using this js:

$(document).attr('title')

This js gets the page title

$(location).attr('href')

This gets the link of the current page. The after you have the page title, the page url you can also get some other bits you may want to build up the url. Such as an image or a message.

data-message="I love this product @"

I used data attributes to get these as required.

Custom twitter

      <a class="twitter" href="#" data-message="I love this product @" title="Share this on twitter">
  var twitterComment = $('.twitter').attr('data-message');
  var twitterUrl = 'http://twitter.com/intent/tweet?status='+twitterComment+' '+$(document).attr('title')+'+'+$(location).attr('href');
  $('.twitter').attr('href', twitterUrl);

Custom google+

      <a class="google" href="http://www.plus.google.com/" title="Share this on google plus">
  var googleUrl = 'https://plus.google.com/share?url='+$(location).attr('href');
  $('.google').attr('href', googleUrl);

Custom pinterest

      <a class="pinterest" data-image="http://link-to-image-url" href="http://pinterest.com" title="Share on pinterest">
  var pinterestImage = $('.pinterest').attr('data-image');
  var pinterestUrl = 'http://pinterest.com/pin/create/bookmarklet/?media='+pinterestImage+'&url=[URL]&is_video=false&description='+$(document).attr('title');
  $('.pinterest').attr('href', pinterestUrl);