in HTML5

Social Sharing Links

All the major social networks have their own sharing buttons, these make it really easy for visitors on your website to share the page without leaving the website. These are great additions to your website and you shouldn't have a blog without the ability to share your pages on social media networks. One problem with the social network share buttons is that they make a lot of HTTP requests to be displayed on your website, they need to load all external styling, images, click events. They also need to call the API to request the total number of shares the current page has. All of these requests take time and can effect your page loading times. In this tutorial we are going to learn how we can speed up are page by using links to create our own social sharing buttons for Twitter, Facebook, Google+, Linkedin and Pinterest.

Where To Get Social Sharing Buttons

Below is where you can get a collection of some of the most popular social media networks.


With Twitter you can display 4 types of buttons on your website - Share the page

  • Follow
  • Hashtag
  • Mention

    You can get these links from Twitter resources area. Twitter Resources


Facebook also comes with multiple different buttons with Facebook you are have the following buttons. - Share button

  • Like button
  • Send button
  • Follow button

    You can get these buttons from the Facebook developers area. Facebook Developers


Google+ comes with two buttons you can either add a +1 button to your page to share the current page or a Google+ user badge to allow people to circle you from your page. You can get the Google+ buttons from the Google developers area. Google Developers


Linkedin has it's own share page which you can get from the publishers area. Linkedin Publishers


Pinterest comes with a few different widgets the pin it button which allows you to pin the images on the current page, the follow button allows people to follow you from your page, it also has the pin widget, a profile widget or a board widget. Pin It Button

Social Share Links

Each one of these buttons you add to your site have to make a number of HTTP requests and therefore slowing down your page loading times. When you add these to your website you will want to add all 5 buttons which will increase your page loading times even more. Each of these networks also provide a link you can use instead of relying on the embedded buttons to share your page, these links are normally used for non-javascript versions of a website.


To use the Twitter share URL you need to create a link with the URL this link allows you to add a number of querystring parameters to change the text, URL and mention with the Tweet.

<a target="_blank" href="" class="btn-twitter">Tweet This</a>

Tweet This


The Facebook share link allows you to add a querystring to provide the link to share on Facebook.

<a target="_blank" href="" class="btn-facebook">Share on Facebook</a>

Share on Facebook


The Google+ URL also allows you to provide a querystring parameter which tells Google which URL to share.

<a target="_blank" href="" class="btn-google">Plus on Google+</a>

Plus on Google+


<a target="_blank" href="" class="btn-linkedin">Share on LinkedIn</a>

Share on LinkedIn


<a target="_blank" href="" class="btn-pinterest">Pin on Pinterest</a>

Pin on Pinterest

Styling Social Buttons

To style these buttons in the social network buttons you can view this page to get the correct colours to use on your website. Social Network Colours

Subscribe To The Weekly Newsletter

Get weekly updates to your email