Creating Non-Tracked Social Media Buttons

From time to time, a "Why I'm Quitting X" type of article pops up where X = social media buttons. Then it gets yakked about on Hacker News, reddit, etc. The discussions usually boil down to two things - do social buttons work, and why should I let Facebook et al. track my users?

Do Social Buttons Work?

They do for me. When I added them, referrals from social media sites went up. When I removed them, referrals went down. When I added them back, the numbers went up again. Other site owners have numbers that indicate the opposite, so the only logical answer is: test them yourself.

N.B.: I removed the buttons temporarily because I wasn't thrilled with the idea of my visitors being tracked by social media sites. Plus, I had originally used the AddThis buttons, and they were causing page load times to increase - sometimes dramatically. I added social buttons back after creating the non-tracked versions below.

Creating Non-Tracked Share Buttons

Social Share Privacy allows user opt-in, but that is a click-twice solution. Other sites list non-JavaScript share URL's, which are fine if you always link to the same page on your site. Additionally, there is sharingbuttons.io, however their share URLs are static and the buttons rely on SVG (which is supported by most browsers, but there are still some users who would be excluded).

What I wanted, though, was a mixed implementation. I wanted the social buttons on all pages so the site design is consistent. On "share worthy" pages, the social media buttons needed the share URL to match the visitors current page, but on boring pages (about, privacy policy, etc) the default share URL would be to the home page.

Since JavaScript itself wasn't the problem (the external scripts were), I cobbled together the following:

The HTML

<div class="social_buttons">
  <ul>
    <li>
      <a id="social_link_twitter"
          href="http://twitter.com/intent/tweet?url=http://www.example.com&text=Default%20Text"
          rel="nofollow noopener" target="_blank">
      <img alt="twitter" src="/images/twitter.png" /></a>
    </li>
    <li>
      <a id="social_link_linkedin"
          href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fwww.example.com"
          rel="nofollow noopener" target="_blank">
      <img alt="linkedin" src="/images/linkedin.png" /></a>
    </li>
    <li>
      <a id="social_link_facebook"
          href="http://facebook.com/sharer.php?u=http://www.example.com"
          target="_blank">
      <img alt="facebook" src="/images/facebook.png" /></a>
    </li>
    <li>
      <a id="social_link_gplus"
          href="https://plus.google.com/share?url=http%3A%2F%2Fwww.example.com"
          rel="nofollow noopener" target="_blank">
      <img alt="google+" src="/images/gplus.png" /></a>
    </li>
    <li>
      <a id="social_link_email"
          href="mailto:?Subject=Default%20Text&Body=http://www.example.com">
      <img alt="email" src="/images/email.png" /></a>
    </li>
  </ul>
</div>

The CSS

.social_buttons {
    position:absolute;
    top:0;
    right:-10px;
    z-index:300;
    width:220px;
}
.social_buttons ul {
    overflow:hidden;
    margin:40px auto 0;
    padding:0 0 5px;
    width:100%;
    text-align:center;
}
.social_buttons ul li {
    display:inline-block;
    margin:5px 3px 3px 4px;
    list-style:none;
    text-align:center;
}
.social_buttons ul li a {
  display:block;
}
.social_buttons ul li img {
    width:30px;
    height:30px;
    margin:0 auto;
}
.social_buttons ul li span {
    display:block;
    margin-top:10px;
}

The Script:

$(document).ready(function() {
  var pageTitle = $(document).attr('title');
  pageTitle = encodeURIComponent(pageTitle);
  var pageUrl = window.location;
  var encodedPageUrl = encodeURIComponent(pageUrl);
  var twitterShare = "http://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + pageTitle;
  var linkedInShare = "http://www.linkedin.com/shareArticle?mini=true&url=" + encodedPageUrl + "&title=" + pageTitle;
  var facebookShare = "http://facebook.com/sharer.php?u=" + pageUrl;
  var googlePlusShare = "https://plus.google.com/share?url=" + encodedPageUrl;
  var emailShare = "mailto:?Subject=" + pageTitle + "&Body=" + pageUrl;
  if($('#social_link_twitter').length > 0) {
    $('#social_link_twitter').attr('href', twitterShare);
  }
  if($('#social_link_linkedin').length > 0) {
    $('#social_link_linkedin').attr('href', linkedInShare);
  }
  if($('#social_link_facebook').length > 0) {
    $('#social_link_facebook').attr('href', facebookShare);
  }
  if($('#social_link_gplus').length > 0) {
    $('#social_link_gplus').attr('href', googlePlusShare);
  }
  if($('#social_link_email').length > 0) {
    $('#social_link_email').attr('href', emailShare);
  }
});

The Implementation

This option is nice because it's relatively easy to set up on your site, it loads more quickly than external script calls, and it protects your users' privacy - all while facilitating social sharing. What's not to love?

The BreezeTree website uses a commercial theme, so I'm not at liberty to provide the social icon images. However, a quick Google search will provide you with plenty of options.