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
You can get these links from Twitter resources area.
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.
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.
Linkedin has it's own share page which you can get from the publishers area.
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.
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.
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>
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.
Learn how to code with Treehouse
- Learn projects with access to 1000+ videos
- Practice live with our Code Challenge Engine
- Get help in our members-only forums
- Access 100s of premium tutorials and downloadable content
- Members content consists of premium WordPress plugins
- CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
- In-depth development tutorials
- Priority tutorial requests
- No ads