Lightweight Social Share Buttons

by Ross Phillips

Blog | Tutorials | Lightweight Social Share Buttons February 01, 2017

Social share buttons are commonplace on a range of websites. Many social networks provide embed code to build them quickly, however these solutions load a number of additional requests and resources. This increases the load time for your pages.

Social networks also provide a share URL as an alternative to the embedded buttons. Linking to these with a few <a> tags is much more lightweight than the embedded solution. They can also be styled to match your branding. Here are the buttons and everything you need to recreate them for your site:


Markup and Styling

The social share buttons can be a simple anchor tag:

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fexample.com%2F"
  class="share-button facebook"
  target="_blank">Share on Facebook</a>

Adding an icon has a nice effect (from materialdesignicons.com):

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fexample.com%2F"
  class="share-button facebook"
  target="_blank">
    <svg fill="#000000"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"><path d="M19,4V7H17A1,1 0 0,0 16,8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" /></svg> Share on Facebook</a>

Here are the base styles for the buttons shown above:

.share-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px 2px 8px;
  margin: 10px;
  color: #fff;
  background-color: #333;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
}

.share-button:hover {
  color: #fff;
  background-color: #4f4f4f;
}

.share-button:active {
  top: 1px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
}

.share-button svg {
  fill: #ffffff;
  width: 19px;
  height: 19px;
  margin-right: 5px;
}

.share-button.facebook { background-color: #4A66B7; }
.share-button.facebook:hover { background-color: #556fbb; }

.share-button.twitter { background-color: #1B95E0; }
.share-button.twitter:hover { background-color: #269ce5; }

.share-button.pinterest { background-color: #c92228; }
.share-button.pinterest:hover { background-color: #cf4146; }

.share-button.linkedin { background-color: #0077B5; }
.share-button.linkedin:hover { background-color: #1e84b9; }

.share-button.reddit { background-color: #5f99cf; }
.share-button.reddit:hover { background-color: #75a6d4; }

.share-button.tumblr { background-color: #35465c; }
.share-button.tumblr:hover { background-color: #455166; }

.share-button.hacker-news { background-color: #ff6600; }
.share-button.hacker-news:hover { background-color: #ff7515; }

.share-button.designer-news { background-color: #2d72d9; }
.share-button.designer-news:hover { background-color: #3d82e9; }

.share-button.google-plus {
  background-color: #fefefe;
  color: #333;
}

.share-button.google-plus:hover {
  background-color: #f6f6f6;
  color: #333;
}

.share-button.google-plus svg {
  fill: #DB4437;
}

URL Reference

Here’s a collated list of provided share URLs and relevant options. It’s better to only use relevant share buttons rather than bombard the visitor with every choice.

Options are provided for developers to customise the share experience. Previews are often generated automatically from the URL provided. The url query parameter is required on all share URLs except email:

Facebook

https://www.facebook.com/sharer/sharer.php?u={url}

https://plus.google.com/share?url={url}

Twitter

https://twitter.com/intent/tweet?url={url}&text={text}&via={via}&hashtags={hashtags}

Pinterest

https://pinterest.com/pin/create/button/?url={url}&description={description}&media={media}

LinkedIn

https://www.linkedin.com/shareArticle?url={url}&title={title}&source={source}&summary={summary}&mini=true

Tumblr

https://tumblr.com/widgets/share/tool?canonicalUrl={url}&tags={tags}&caption={caption}

Reddit

https://reddit.com/submit?url={url}&title={title}&resubmit=true

Hacker News

https://news.ycombinator.com/submitlink?u={url}&t={title}

Designer News

https://www.designernews.co/submit?url={url}&title={title}

Email

mailto:?subject={subject}&body={body}


Tips

The previews that are automatically generated rely heavily on the Open Graph tags and well structured content. Facebook offers this preview tool to test and ensure these are set correctly on your sites.

Encode your query parameters on your Jekyll sites with the cgi_escape filter. The uri_escape filter is for entire URLs, so won’t escape some characters (e.g. “?”) and may break your buttons.

<a class="share-button facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | prepend: site.url | cgi_escape }}" target="_blank">Share on Facebook</a>

Jekyll includes are a great way to reuse SVG icons in your buttons and the rest of a site.

<a class="share-button facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | prepend: site.url | cgi_escape }}" target="_blank">{% include facebook-icon.html %} Share on Facebook</a>

Tracking your share buttons can help you discover how your visitors are interacting with the site and focus your resources more effectively. Track custom events for clicks on your share buttons with Google Analytics using the following code:

var buttons = document.getElementsByClassName("share-button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function handleOutboundLinkClicks(event) {
    ga("send", "event", {
      eventCategory: "Outbound Link",
      eventAction: "click",
      eventLabel: event.target.href,
      transport: "beacon"
    });
  });
}

Be sure to let us know in the comments if you’ve got any tips or feedback on the topic!


Keep up to date with CloudCannon articles, tutorials, templates and other Jekyll news

Subscribe