Custom Icons and Social Sharing on your Website
Social media websites give us easy ways to add social sharing to our own websites and they even allow us to select which button to use and how it should be formatted.
At first glance this is fantastic, but on closer inspection there are two drawbacks to it.
1. Branding
Each social media website has their own 'look' and design for their button which in most cases is either blue (Facebook, Twitter, LinkedIn) or red (Google+, Pinterest). If your branding does not contain either of these colours, and your website is in keeping with your branding, they might stand out like a sore thumb!
2. Website Load Speed
Website Statistics and Research continue to point to the fact that consumers expect things NOW. This is not really a new thing though the definition of "NOW" seems to be changing over time, with approximately 47% of website visitors leaving if the site hasn't loaded within 2 seconds.
2 SECONDS!
I remember when 7 day photo processing was "now". I also remember when that shifted to 24 hours, then even 1 hour and it's obviously now possible to sit at a little processing system and have them printed out right there and then.
When you use the buttons that social media websites give you to use, and you implement them in the way they need to be implemented, your website slows right down to a horrific 9 seconds or thereabouts. 9 seconds. Nothing to write home about in the IT world.
So how can we overcome this?
Here's one suggestion, I'm sure there must be others.
Create an optimised graphic containing all the social media icons you plan on using. Make the design consistent with your branding and website. Create normal <a> links then use CSS to display the relevant icon for the link.
Only one image gets loaded and no external websites or scripts are called. Simple eh?
Where should the links point to? The below list should get you started :)
https://twitter.com/home?status=[TITLE]+[URL]
https://www.facebook.com/share.php?u=[URL]&title=[TITLE]
Digg
https://www.digg.com/submit?phase=2&url=[URL]&title=[TITLE]
StumbleUpon
https://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]
Delicious
https://del.icio.us/post?url=[URL]&title=[TITLE]]¬es=[DESCRIPTION]
https://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]
Slashdot
https://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]
Technorati
https://technorati.com/faves?add=[URL]&title=[TITLE]
Posterous
https://posterous.com/share?linkto=[URL]
Tumblr
https://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]
https://www.reddit.com/submit?url=[URL]&title=[TITLE]
Google Bookmarks
https://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]
Newsvine
https://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]
Evernote
https://www.evernote.com/clip.action?url=[URL]&title=[TITLE]
Friendfind
https://www.friendfeed.com/share?url=[URL]&title=[TITLE]