Reduce Requests and Style Social Media Buttons
06 June 2013
The ever growing social media buttons are request culprits! But you can reduce the request they make and style social media buttons your way by following this simple article.
What Makes Social Media Buttons Request Heavy?
The social buttons are not only requested via your webpage; they are also requesting their own assets once they have loaded. This means several requests are made for each button. Each of these request are slowing down your web page's loading speed.
Creating a GET request that mimics the request that each social media button's JavaScript would otherwise construct will keep the extra requests made down to zero. If the button is clicked only then will a request be made.
How Can I Style Social Media Buttons?
As you are creating the mark-up for the button yourself, you are free to style the link as you wish. Tip: to keep the requests down, add the network's logos to your image sprite.
It is worth noting: the user interaction design principle of continuity. The principle's sub-principle of external continuity would suggest styling the buttons to look like the network's own buttons. Following this principle would suggest your users will already know what your buttons do and how to use them.
Here are Template Links for Social Buttons
Just swap out the UPPER CASE placeholders below . Don't forget to URI encode your variables.
http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT
https://twitter.com/intent/tweet?hashtags=A_HASH_TAG&related=RELATED&text=YOUR_TITLE&url=THE_PAGES URL&via=THE_CLIENT_HANDLE
http://www.linkedin.com/shareArticle?mini=true&url=URL&title=YOUR_TITLE&summary=YOUR_SUMMARY&source=THE_CLIENT_NAME<
Google Plus
https://plusone.google.com/share?url=URL
For the maximum effect combine these links with open graph and twitter cards. Twitter lets you use Open Graph where a meta tag exists. This is good as you get a twitter card as a bonus when adding Open Graph. Here is the perfect mix of the two.
The following template needs to be added in the <head> of the HTML document.
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@ TWITTER NAME "> <meta name="twitter:creator" content="@ TWITTER NAME "> <meta property="og:title" content=""> <meta property="og:image" content=" AN IMAGE ADDRESS "> <meta property="og:site_name" content=" SITE NAME "> <meta property="og:description" content=""> <meta property="og:url" content=""> <meta property="og:type" content="article">
Add the following to each link and you will get the buttons to open in a small window just like how the social network's own buttons work.
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
