Social share links

Social share links

The easy way to create social buttons is with scripts that can overhead your website, affecting the performance and the user experience. You can prevent and save HTTP requests creating your own methods. In this article I will show how to add custom social links with or without a popup.

Loading third-party scripts
Here is a list of loading scripts that every social site uses when it shows a button to share content:

  • Google+: 1 script (15.1kb)
  • Facebook: 3 scripts (73.3kb)
  • Linkedin: 2 scripts (47.7kb)
  • Pinterest: 3 scripts (12.9kb)
  • Tumblr: 1 script (1.5kb)
  • Twitter: 4 scripts (52.7kb)

More than 200k you can save if you do not use third-party scripts. As I said, every HTTP request you can save increments the performance of your website, so if you use share urls your UX will be incremented. Also you can customize your buttons as you want.

Use share urls

Each social website has its own share url we can use instead of loading scripts. For example Facebook's share url is the following:

https://www.facebook.com/sharer/sharer.php?u=URL_TO_SHARE

You have to replace URL_TO_SHARE for the url you want to share.
It's important to note that values of parameters must be url encoded because spaces or special characters will not be recognized in the browser:

https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(http://marioaraque.com; ?>

Here are another examples:

Twitter:

https://twitter.com/intent/tweet?text=TWEET_TO_SHARE&url=URL_TO_SHARE&via=USERNAME_TO_SHARE

Linkedin:

https://www.linkedin.com/cws/share?url=URL_TO_SHARE

Pinterest:

http://pinterest.com/pin/create/button/?url=URL_TO_SHARE&description=DESCRIPTION

Google+:

https://plus.google.com/share?url=URL_TO_SHARE

Tumblr:

http://tumblr.com/share?s=&v=3&t=TITLE&u=URL_TO_SHARE

With this information, you can create your custom button using this url.
Also you can add your styles and track it if you want.

<a class="social-button" href="https://twitter.com/intent/tweet?text=Check%20out%20this%20website!&url=http://marioaraque.com&via=AraqueMario" target="_blank">Share on Twitter</a>

Improving with Javascript

The previous example are good enough but I don't like the target="_blank" because the user see the share screen in a new window, losing all the focus in our website. The best solution is using a modal popup like third-party scripts. Lets do it:

First of all we need a function to open a modal popup in the middle of the screen, this Javascript code does the job.

function modalPopup(url, width, height) {
  var left = (screen.width / 2) - (width / 2),
      top = (screen.height / 2) - (height / 2);

  window.open(
    url,
    "",
    "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
  );
}

Then, with the previous button, you have to add a listener and open the modal windows when the users clicks on it.

<a class="social-button" href="https://twitter.com/intent/tweet?text=Check%20out%20this%20website!&url=http://marioaraque.com&via=AraqueMario" target="_blank">Share on Twitter</a>

//jQuery
$(".social-button").on("click", function(e) {
  e.preventDefault();
  modalPopup($(this).attr("href"), 500, 300);
});

//Vanilla Javascript
var jsSocialShares = document.querySelectorAll(".social-button");
if (jsSocialShares) {
  [].forEach.call(jsSocialShares, function(anchor) {
    anchor.addEventListener("click", function(e) {
      e.preventDefault();
      modalPopup(this.href, 500, 300);
    });
  });
}

Conclusion
With a short piece of code we can save third party scripts that decreases performances and user experience.
I strongly recommend to use that because you can customize that and track if you want.