micro share example.md

First use this html (this is from a Middleman template):

<a class="share-anchor" id="share_<%= $share_count %>" href="#share_<%= $share_count %>"></a>
<div class="share">
  <ul class="share__tools"
    data-title="<%= title %>"
    data-handle="<%= current_page.data.share.handle %>"
    data-deeplink="<%= deeplink %>"
    data-subject="<%= subject %>"
    data-hashtag="<%= current_page.data.share.hashtag %>"
  >
    <li class="share__tool"><span class="share__icon share__icon--twitter"></li>
    <li class="share__tool"><span class="share__icon share__icon--linkedin"></li>
    <li class="share__tool"><span class="share__icon share__icon--facebook"></li>
    <li class="share__tool"><span class="share__icon share__icon--google"></li>
    <li class="share__tool"><span class="share__icon share__icon--mail"></li>
  </ul>
</div>

Then use this Javascript:

function Share() {

	this.types = [
		"facebook",
		"twitter",
		"google",
		"mail",
		"linkedin"
	];

	this.$tool = null;
	this.props = {};
	this.defaults = {};
	this.defaults.url = this.getParameterByName("canonicalUrl");
	this.defaults.handle = "@whatever";

	this.enableEvents();
	var that = this;

	$(window).on("refresh-share-events", function() {
		that.enableEvents();
	});

}

Share.prototype.getParameterByName = function(name) {
	name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
	var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
		results = regex.exec(location.search);
	return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Share.prototype.enableEvents = function() {
	var that = this;

	$(".share__icon").off().on("click", function(e) {
		that.handleIconClick($(this));
	});
}

Share.prototype.handleIconClick = function($icon) {
	var that = this;

	$.map(this.types, function(type) {
		if ($icon.attr("class").indexOf(type) > -1) {
			that.setProps($icon);
			that.handleShare(type);
		}
	});
}

Share.prototype.setProp = function(prop, attrName) {
	var attr = this.$tool.attr(attrName);
	if (attr && attr.length) {
		this.props[prop] = attr;
	}
}

Share.prototype.setProps = function($icon) {

	this.props = {};
	this.$tool = $icon.parents(".share__tools");

	this.setProp("title", "data-title");
	this.setProp("handle", "data-handle");
	this.setProp("deeplink", "data-deeplink");
	this.setProp("subject", "data-subject");
	this.setProp("hashtag", "data-hashtag");
	this.props = $.extend({}, this.defaults, this.props);

}

Share.prototype.handleShare = function(type) {

	var href = null;
	var h = 515;
	var w = 550;

	switch (type) {
		case "facebook":
			href = "http://facebook.com/share.php?u=" + this.props.url;
			break;
		case "twitter":
			href = "https://twitter.com/share?text=" + this.props.title + "&url=" + this.props.url + "&via=" + this.props.handle + "&hashtags=" + this.props.hashtag;
			h = 255;
			break;
		case "google":
			w = 500;
			href = "http://plus.google.com/share?url=" + this.props.url;
			break;
		case "linkedin":
			href = "https://www.linkedin.com/shareArticle?mini=true&url=" + this.props.url + "&title=" + this.props.title;
			break;
		case "mail":
			window.location = "mailto:?subject=" + this.props.subject + "&body=" + this.props.url;
			break;
	}

	if (href != null) {
		window.open(href, "_blank", "height=" + h + ",width=" + w);
	}
}

$(document).ready(function() {
	var share = new Share();
})