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.
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
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
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
To use the Twitter share URL you need to create a link with the URL https://twitter.com/intent/tweet 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="https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE" class="btn-twitter">Tweet This</a>
The Facebook share link allows you to add a querystring to provide the link to share on Facebook.
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=YOUR-URL" class="btn-facebook">Share on Facebook</a>
The Google+ URL also allows you to provide a querystring parameter which tells Google which URL to share.
<a target="_blank" href="https://plus.google.com/share?url=YOUR-URL" class="btn-google">Plus on Google+</a>
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL" class="btn-linkedin">Share on LinkedIn</a>
<a target="_blank" href="http://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC" class="btn-pinterest">Pin on Pinterest</a>
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
Get weekly updates to your email