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.

Twitter

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

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+

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

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

Linkedin Publishers

Pinterest

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.

Twitter

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>

Tweet This

Facebook

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>

Share on Facebook

Google+

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>

Plus on Google+

Linkedin

<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>

Share on LinkedIn

Pinterest

<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>

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

Back to top