Adding Social Share Links with Custom Icons and Share Count

Social sharing has become one of the most powerful ways to reach out to larger number of audiences. Whenever we publish anything new, it is always better to promote it on popular social networks to gain some immediate traffic. Integrating popular social sharing buttons on your site might drive more traffic if the reader likes your content and shares it.

One way of adding social share buttons is by adding JavaScript snippets provided by Facebook, LinkedIn, Twitter and Google+ or by using services like AddThis and ShareThis, but it is not the optimal way of doing it, reasons for that are:

1. Additional JavaScript will increase page size
2. Icons cannot be customized
3. More HTTP requests

So what is the better way of doing this? All you need is a simple anchor (with URL?QueryString) and your own social sharing custom icons. You can also combine all those icons into a single image. This technique is called CSS Sprite. Using sprites will reduce the number of HTTP requests to the server and save bandwidth.

Facebook

<a href=https://facebook.com/sharer.php?u={URL} target="_blank">Facebook</a>

Linked In

<a href=http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={Title} 
target="_blank">LinkedIn</a>

Twitter (Via and HashTags are optional)

<a href=https://twitter.com/intent/tweet?url={URL}&text={Title}&via={UserName}&hashtags={HashTags} 
target="_blank">Twitter</a>

Google Plus

<a href=https://plus.google.com/share?url={URL} target="_blank">Google+</a>

You can check out the sample for the same on CodePen here or check out the embedded pen below.

See the Pen jEzEGB by Arun Endapally (@arunendapally) on CodePen.

Now that we have seen how to add sharing with a simple anchor, let's continue to make it look good by adding background image to the anchors.

You can download some free icons from here or here - they are almost similar, I used the same in this blog or else if you have experience with Photoshop, you can also download icons.psd from here and customize them as required. To combine those individual icons into one image, you can use this online sprite generator, combining into one image will reduce number of requests to the server.

You can check out the sample for the same on CodePen here or check out the embedded pen below.

See the Pen WbzvXJ by Arun Endapally (@arunendapally) on CodePen.

We can also get the share count by sending request to the url which returns json and then we can retrieve the count from json, though it is possible to avoid retrieving the count because doing that will increase the requests and the time to load your page will increase.

You can check out the sample for the same on CodePen here or check out the embedded pen below.

See the Pen LEdpNy by Arun Endapally (@arunendapally) on CodePen.

Note: I did not cover getting share count for Google+ as it needs API_KEY and also for Twitter to get the correct count you need to add the count for request with www and without www (Example: http://arunendapally.com and http://www.arunendapally.com will fetch a different count).