Skip to content
All posts

Lightweight social share icons

  Admin  ·  6 minute read

The problem with Facebook's and similar JavaScript share buttons or with services like SumoMe is that they add many additional HTTP requests and can slow down your site quite significantly.

In today's tutorial, I would like to show you how to create a set of working and lightweight social share icons for your website. I will teach you how to create nice looking modern icons and how to add the necessary functionality to make them work without decreasing your site's performance with many additional requests.

Before we begin, you can have a look at the demo to see the result of the tutorial and download the source files.

Demo Download files

HTML template

As usual, we will start with the main HTML template file. You can call it, as you like, I have just named it index.html in this example.

As the template will serve just as an example article, there is not much to explain.

Things you should not forget to include are custom.css and custom.js files, which we will use to define the sharing icons' look and behaviour.

For the social networks' logos, we will be using an icon font called Socicons and we will include a link to its stylesheet on myfontastic CDN too. The reason I chose this icon set is that it is up to date and contains a really wide choice of icons. I wanted to use FontAwesome at first but it does not contain, for an unknown reason, an icon for Buffer.

For the demo purposes, I included Bootstrap CSS and JS and also a Roboto web font and some dummy text too.

Html 
<html>
    <head>
        <title>Share Icons Tutorial by Bootstrapious.com</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700,900' rel='stylesheet' type='text/css'>

        <link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">
        
        <link href='custom.css' rel='stylesheet' type='text/css'>
        
        <meta property="og:title" content="Share Icons Tutorial by Bootstrapious.com">
        <meta property="og:site_name" content="Bootstrapious">
        <meta property="og:image" content="template-homepage.png">    
        <meta property="og:description" content="This is a demo for our tutorial showing you how to nice custom share icons to your website.">    

        <meta name="twitter:card" content="summary">
        <meta name="twitter:creator" content="@bootstrapious">
        
    </head>
    <body>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <h1>Share Icons Tutorial by <a href="https://bootstrapious.com">Bootstrapious.com</a></h1>
                    <p class="lead">This is a demo for our tutorial showing you <strong>how to create nice custom share icons</strong> for your website.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                </div>
            </div>
        </div> 

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="custom.js"></script>
    </body>
</html>

Icons - HTML

Now, we can proceed to the HTML code of our sharing icons.

We work with a <p class="social">, in which we will place the links to each of the sharing services.

The link itself includes an <i> icon and also a span element <span class="sr-only"> what will be shown the users using a screen reader.

We will place <p class="social"> behind the last paragraph in our template. The list of the available icons from the Socicons set can be found here.

As you can see, the format and the number of parameters that you need to pass to the social network's URL varies and I will describe some of them further in the article. Also, the classes of the links (e.g. class="facebook") will serve us in the next parts of this tutorial.

When using this code on your site do not forget the replace the URLs and other parameters with your own. If you will use it on a small website, you can edit it manually, otherwise, it would be a good idea to have e.g. PHP replace it for you.

Html 
<p class="social">
    <a href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons" class="facebook">
        <i class="socicon-facebook"></i><span class="sr-only">Share on Facebook</span>
    </a>
    <a href="https://plus.google.com/share?url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons" class="gplus">
        <i class="socicon-googleplus"></i><span class="sr-only">Share on G+</span>
    </a>
    <a href="https://twitter.com/intent/tweet?text=Share%20Icons%20Tutorial%20by%20Bootstrapious.com&amp;url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons&amp;via=bootstrapious" class="twitter">
        <i class="socicon-twitter"></i><span class="sr-only">Share on Twitter</span>
    </a>
    <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons&amp;summary=Check%20out%20this%20nice%20tutorial&amp;source=https%3A%2F%2Fbootstrapious.com%2F" class="linkedin">
        <i class="socicon-linkedin"></i><span class="sr-only">Share on LinkedIn</span>
    </a>
    <a href="https://buffer.com/add?url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons&amp;text=Share%20Icons%20Tutorial%20by%20Bootstrapious.com" class="buffer">
        <i class="socicon-buffer"></i><span class="sr-only">Save to Buffer</span>
    </a>
    <a href="https://getpocket.com/edit?url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons" class="pocket">
        <i class="socicon-pocket"></i><span class="sr-only">Save to pocket</span>
    </a>
</p>

Icons - CSS

So, let's have a look at the CSS stylesheet for share icons and let's give them a nice and decent look. The stylesheet should be named custom.css, save it to the same folder as the template.

If you will be using the code on a page using the Bootstrap framework, you can omit the first definition for the .sr-only element, as it is also part of the Bootstrap's CSS. 

The code is quite self-explanatory, I think, so I will just briefly describe the result:

I formatted the p.social a links as round inline blocks with 3em width and height.

When not hovering over the link, it will have a grey border, also the icon itself will be grey. When the user hovers over it, the border and text colour will change to dark blue.

You can easily modify the hover colour by simply replacing the occurrences of the darkblue colour in the code.

CSS 
/* you can remove this if using with Bootstrap */
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}

/* monochromatic share icons */
p.social a {display: inline-block; margin: 0 10px 10px 0; color: #fff;  width: 3em; height: 3em; border-radius: 1.5em; line-height: 3em; font-size: 1.2em; vertical-align: bottom; text-align: center; border: solid 1px #ccc; color: #ccc; transition: all 0.2s ease-out;}
p.social a:hover, p.social a:focus  {color: darkblue; border-color: darkblue; text-decoration: none;}
p.social a i {vertical-align: middle;}
p.social a i:before {line-height: 3em;}

Icons - JavaScript

We could work without Javascript completely, but we would have to open the links in the same or new tab of the browser. With this bit of JavaScript, when the user clicks on the share link, the link will nicely open itself in a small window with no scrollbars, toolbar, etc.   

JavaScript 
$(function () {

    $('.social a').on('click', function (e) {

        e.preventDefault();

        window.open($(this).attr('href'), 'shareWindow', 'height=450, width=600, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 300) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');


    });
});

The result

Icons - URLs and parameters

The links in our social icons will lead to their API scripts that will take care of the sharing itself. The number of the parameters differs, but most of them need the URL to be shared and you can add additional parameters to it to enhance the sharing experience for the user.

Important to mention is that all the parameters in the URL should be URL-encoded. If you will be using the icons on HTML only website, you can encode them manually with this tool, if you are using PHP, you can encode the parameters using urlencode() function in PHP.

Now, we will go quickly through all the services to have a look at what parameters they need:

Facebook

Html 
<a href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons" class="facebook">...</a>

Needed parameters:

  • u - URL-encoded URL to share

G+

Html 
<a href="https://plus.google.com/share?url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons" class="gplus">...</a>

Needed parameters:

  • url - URL-encoded URL to share

Twitter

Html 
<a href="https://twitter.com/intent/tweet?text=Have%20a%20look%20at%20this%3A&amp;url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons&amp;via=bootstrapious" class="twitter">...</a>

Optional parameters:

  • url - URL-encoded URL to share
  • via - account handle to mention in the tweet as a source
  • text - URL-encoded text of the prefilled tweet

LinkedIn

Html 
<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons&amp;summary=Check%20out%20this%20nice%20tutorial&amp;source=https%3A%2F%2Fbootstrapious.com%2F" class="linkedin">...</a>

Needed parameters:

  • url - URL-encoded URL to share
  • mini - must be set to true

 

Optional parameters:

  • summary - URL-encoded summary text
  • source - your website main URL

Buffer

Html 
<a href="https://buffer.com/add?url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons&amp;text=Check%20out%20this%20nice%20tutorial" class="buffer">...</a>

Needed parameters:

  • url - URL-encoded URL to share

Optional parameters:

  • Text- URL-encoded summary text

Pocket

Html 
<a href="https://getpocket.com/edit?url=https%3A%2F%2Fbootstrapious.com%2Fp%2Fshare-icons" class="pocket">...</a>

Needed parameters:

  • url - URL-encoded URL to save

Wrapping up

This could be easily the end of this tutorial. You should now have a working set of nice social share icons for your website that would not have any negative effects on your site's performance. 

As a bonus for you, I have prepared a second look for the icons - now with more colour. There won't be any big changes to the already written code, so let's have a look.

Add colours to the icons

HTML

We will make the changes mostly via the stylesheet, so all we need to do in our HTML file is to add class="social-colour" to our <p class="social">.

Html 
<p class="social social-colour">...</p>

CSS

To colour our icons, we will use their classes that we added in one of the first steps. To each of the classes, we will apply a colour for its background and border based on the service's brand colour, i.e. a blue background and border for the Facebook icon, a red one for G+, etc.

CSS 
/* coloured share icons */
p.social-colour a {color: #fff;}
p.social-colour a:hover, p.social-colour a:focus {color: #fff;}
p.social-colour a.facebook, p.social-colour a.facebook:hover, p.social-colour a.facebook:focus {background-color: #4460ae; border-color: #4460ae;}
p.social-colour a.gplus, p.social-colour a.gplus:hover, p.social-colour a.gplus:focus {background-color: #c21f25; border-color: #c21f25;}
p.social-colour a.twitter, p.social-colour a.twitter:hover, p.social-colour a.twitter:focus {background-color: #3cf; border-color: #3cf;}
p.social-colour a.instagram, p.social-colour a.instagram:hover, p.social-colour a.instagram:focus {background-color: #cd4378; border-color: #cd4378;}
p.social-colour a.buffer, p.social-colour a.buffer:hover, p.social-colour a.buffer:focus {background-color: #000; border-color: #000;}
p.social-colour a.pocket, p.social-colour a.pocket:hover, p.social-colour a.pocket:focus {background-color: #f04056; border-color: #f04056;}
p.social-colour a.linkedin, p.social-colour a.linkedin:hover, p.social-colour a.linkedin:focus {background-color: #0373b4; border-color: #0373b4;}

The result

The result of these few little tweaks in the stylesheet should like pictured below.  

Conclusion

I hoped this little tutorial has helped you and you will use it on the web soon.

Which colour version did you like - the monochromatic one or the coloured one? Did I miss some of the important social networks? Let me know in the comments below.

Where to go next?

To learn more similar stuff, check out the collection of my Bootstrap tutorials.