Responsible Social Share Links

README.md

Share URLs

Here’s a collection of common social share URLs and examples of their structures along with links to documentations.

(The code has been broken up into several lines for readability—remember to remove any spaces and line breaks in the href if you copy & paste.)

Taken from Responsible Social Share Links

facebook.html

<a href="https://www.facebook.com/sharer/sharer.php
     ?u=https%3A%2F%2Fjonsuh.com%2F"
   target="_blank">Share on Facebook</a>
<!-- Parameter u is required -->

google-plus.html

<a href="https://plus.google.com/share
     ?url=https%3A%2F%2Fjonsuh.com%2F"
   target="_blank">Share on Google+</a>
<!-- Parameter url is required. Read the documentation -->

linkedin.html

<a href="https://www.linkedin.com/shareArticle
     ?mini=true
     &url=https%3A%2F%2Fjonsuh.com%2F
     &title=Jonathan%20Suh
     &source=https%3A%2F%2Fjonsuh.com%2F
     &summary=Short%20summary"
   target="_blank">Share on LinkedIn</a>
<!-- Parameter mini is required and must be true, url is required. Read the documentation -->

pinterest.html

<a href="https://www.pinterest.com/pin/create/button/
     ?url=https%3A%2F%2Fjonsuh.com%2F
     &media=https%3A%2F%2Fjonsuh.com%2Ficon.png
     &description=Short%20description
     &hashtags=web,development" 
   target="_blank">Share on Pinterest</a>
<!-- Parameter url is required. Read the documentation -->

reddit.html

<a href="http://www.reddit.com/submit/
     ?url=https%3A%2F%2Fjonsuh.com%2F"
   target="_blank">Share on Reddit</a>
<!-- Parameter url is required. Read the documentation -->

social-share-links.js

/*
 * Example HTML:
 * <a class="js-social-share" href="https://twitter.com/intent/tweet/?text=Check%20out%20my%20new%20website!&url=https%3A%2F%2Fexample.com.com%2F&via=twitter" target="_blank">Share on Twitter</a>
 */

// windowPopup function
var windowPopup = function( url, width, height ) {
  // Calculate the position of the popup so
  // it’s centered on the screen.
  var left = (screen.width / 2) - (width / 2);
  var 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
  );
}

//jQuery
$(".js-social-share").on("click", function(e) {
  e.preventDefault();

  windowPopup($(this).attr("href"), 500, 300);
});

// Vanilla JavaScript
var jsSocialShares = document.querySelectorAll(".js-social-share");
if (jsSocialShares) {
  [].forEach.call(jsSocialShares, function(anchor) {
    anchor.addEventListener("click", function(e) {
      e.preventDefault();

      windowPopup(this.href, 500, 300);
    });
  });
}

twitter.html

<a href="https://twitter.com/intent/tweet/
     ?text=Visit%20my%20website
     &url=https%3A%2F%2Fjonsuh.com%2F
     &via=jonsuh
     &hashtags=web,development" 
   target="_blank">Share on Twitter</a>
<!-- All parameters are optional. Read the documentation -->