Add social share icons without javascript requests

So after spending a lot of time and effort getting your site as optimised as possible, you then add in your social sharing icons only to find your page is now riddled with extra requests and slowed down by having to load several different javascript files. I recently checked my site using Google+, Twitter, Facebook and LinkedIn and they were making a total of 20 seperate requests! You're unlikely to even notice this on modern broadband speeds, but if you're accessing the same site on a mobile with a not-so-great connection, those 20 requests could make a big difference. 

Don't let social icons ruin your hard work! With these code snippets you can keep the requests down to just the four for the images (or less depending which ones you want to use!). Obviously by not loading the javascript you are going to lose some functionality (like your share counts), so you'll have to make a call on what's more important for your site.

Social icon share links

Facebook

<a href="http://www.facebook.com/sharer.php?u=URL&t=TITLE"><img src='facebook.png' /></a>

The additional title / 't' parameter is optional.

Twitter

<a href="https://twitter.com/intent/tweet?url=URL&text=TITLE&via=TWITTERHANDLE" class="xml plain">><img src='twitter.png' /></a>

Note the additional TWITTERHANDLE in the 'via' parameter will mean your twitter name will show up in the tweet using "via @yourname". Title is optional.

Google Plus

<a href="https://plus.google.com/share?url=URL"><img src='google-plus.png' /></a>

LinkedIn

<a href="http://www.linkedin.com/shareArticle?mini=true&url=ARTICLEURL&title=ARTICLETITLE&summary=ARTICLESUMMARY&source=ARTICLESOURCE"><img src='linkedin.png' /></a>

ARTICLEURL is the only required parameter here, summary, source and title are optional and must be url encoded. 

jQuery Pop-out Window

OK so I said no Javascript but a little pop-out window here wouldn't go amiss...

$(document).ready(function()
{
    $('.social-button').on('click', function()
    {
        window.open(this.href,'', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes,
        height=600, width=600');
        return false;
    }
}

 

Sign Up
comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.