I have been on lookout for adding the social share buttons to my blog and applications but was reluctant to add the extra weight that the individual share buttons carry with them.
If you carefully look at most used social share buttons like Facebook and twitter. you would find their script’s getting loaded on each page they are visible.
These scripts add to the individual page load time in a big way.
This certainly is the best option as it does not load any extra baggage and still allows users to share. When a user clicks the share button/icon, a new window opens up to show the social network’s share page and the URL of your story is automatically passed on to it.
You can check out this analysis, from sitePoint on how much extra baggage weight does the social sharing buttons carry with scripts.
If you are interested in this kind of solution, here is the code for you.
Please note that I am using FontAweSome icons to show the button icons. You can use any image or plain text as well.
Code I used to include CDN hosted Fontawesome in head section of webpage (optional):
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Custom Social Share Buttons WordPress
If you are using wordpress, blog, here is the code for most popular social networks:
<a title="Share this story on Facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" >
- Google Plus
<a title="Share this story on Google Plus" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" >
<a title="Share this story on Twitter" href="https://twitter.com/home?status=<?php the_permalink(); ?>" >
- Linked In
<a title="Share this story on Linked In" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>" >
If you are using the above codes on a blog or website other than WordPress, you can simply replace the following portion of code to add the URL as per your needs:
<?php the_permalink(); ?>
The OnClick event comes into action whenever user clicks the button to share the story. It opens in a new window (similar to a dialog box in windows) and lets them share the story on selected social network.
You can use any image or icon or a button to replace the span code listing the fontawesome icons.
Custom Social Share Links Demo
Click the share buttons provided for this article to see the above code in action.
I hope it helps.