JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<div class="share" data-share="vk">vk</div>
<div class="share" data-share="fb">fb</div>
<div class="share" data-share="tw">tw</div>

CSS

.share {
    border-radius: 100%;
    border: 1px solid #000;
    margin: 20px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

JavaScript

var Sharer = function (options) {
	options = options || {};
	var self = this;

	this._default = {
		"vk": {
			"popup_url": "http://vk.com/share.php?url="
		},
		"fb": {
			"popup_url": "http://fb.com/sharer.php?url="
		},
		"tw": {
			"popup_url": "https://twitter.com/intent/tweet?url="
		}
	};

	this.config = $.extend(this._default, options);

	this.share_vk = function () {
		this._openPopup(this.config.vk.popup_url + window.location.href, "vk");
	}
	this.share_fb = function () {
		this._openPopup(this.config.fb.popup_url + window.location.href, "fb");
	}
	this.share_tw = function () {
		this._openPopup(this.config.tw.popup_url + window.location.href, "tw");
	}

	this._openPopup = function (url, name) {
		window.open(url, name + ' Share', 'width=620,height=430,resizable=no,scrollbars=no,status=no')
	}

	this.bindEvents = function () {
		var self = this;

		Object.keys(this.config).forEach(function (network) {
			var selector = "[data-share=" + network + "]";
			$(selector).on("click", self["share_" + network].bind(self));
		});
	}

	this.run = function() {
		this.bindEvents();
	}.bind(this)
};

var sharer = new Sharer();
$(sharer.run);