Custom Social Share Buttons – No Script Option

By Anil Gupta, 0  Tech Tips

Custom social share buttons with no script download. A new window dialog is opened on use click to show the share page for the clicked social network.


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.

For me, the ideal solution was to show up a button or a clickable icon to help visitor’s share the story on social networks. It would off-course not show up the ‘share’ counts that would need the Javascript to be added.

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.

Custom social share buttons with no script loading

Custom social share buttons with no script loading

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:

  1. Facebook
    <a title="Share this story on Facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
        <span class="fa fa-facebook fa-lg"></span></a>
    
  2. Google Plus
    <a title="Share this story on Google Plus" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
        <span class="fa fa-google-plus fa-lg"></span></a>
    
  3. Twitter
    <a title="Share this story on Twitter" href="https://twitter.com/home?status=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
        <span class="fa fa-twitter fa-lg"></span></a>
    
  4. Linked In
    <a title="Share this story on Linked In" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
        <span class="fa fa-linkedin fa-lg"></span></a>
    

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.