JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<meta property="og:image"content="http://yandex.st/morda-logo/i/share-logo-en.png">
<meta property="description"content="yupyupyupyup">

<div class="social-likes">
    <div class="vkontakte"></div>
    <div class="facebook"></div>
    <div class="twitter"></div>
</div>

########################

<div class="vk" onClick="$('.social-likes__widget_vkontakte').trigger('click')">111</div>
<div class="fb" onClick="$('.social-likes__widget_facebook').trigger('click')">111</div>
<div class="tw" onClick="$('.social-likes__widget_twitter').trigger('click')">111</div>

CSS

.social-likes div {
    display: inline-block;
    text-align: center;
    border: 1px solid #ccc;
    padding: 0px 3px 0px 20px;
    min-width: 30px;
}

i {
    display: inline-block;
    width: 10px; height: 10px;
    background: #000;
}

JavaScript

(function(factory) {  // Try to register as an anonymous AMD module
	if (typeof define === 'function' && define.amd) {
		define(['jquery'], factory);
	}
	else {
		factory(jQuery);
	}
}(function($, undefined) {
'use strict';

var prefix = 'social-likes';
var classPrefix = prefix + '__';
var openClass = prefix + '_opened';
var protocol = location.protocol === 'https:' ? 'https:' : 'http:';


/**
 * Buttons
 */
var services = {
	facebook: {
		counterUrl: 'https://graph.facebook.com/fql?q=SELECT+total_count+FROM+link_stat+WHERE+url%3D%22{url}%22&callback=?',
		convertNumber: function(data) {
			return data.data[0].total_count;
		},
		popupUrl: 'https://www.facebook.com/sharer/sharer.php?u={url}',
		popupWidth: 600,
		popupHeight: 500
	},
	twitter: {
		counterUrl: protocol + '//urls.api.twitter.com/1/urls/count.json?url={url}&callback=?',
		convertNumber: function(data) {
			return data.count;
		},
		popupUrl: protocol + '//twitter.com/intent/tweet?url={url}&text={title}',
		popupWidth: 600,
		popupHeight: 450,
		click: function() {
			// Add colon to improve readability
			if (!/[\.:\-–—]\s*$/.test(this.options.title)) this.options.title += ':';
			return true;
		}
	},
	mailru: {
		counterUrl: protocol + '//connect.mail.ru/share_count?url_list={url}&callback=1&func=?',
		convertNumber: function(data) {
			for (var url in data) {
				if (data.hasOwnProperty(url)) {
					return data[url].shares;
				}
			}
		},
		popupUrl: protocol + '//connect.mail.ru/share?share_url={url}&title={title}',
		popupWidth: 550,
		popupHeight: 360
	},
	vkontakte: {
		counterUrl: protocol + '//vk.com/share.php?act=count&url={url}&index={index}',
		counter: function(jsonUrl, deferred) {
			var options = services.vkontakte;
			if (!options._) {
				options._ = [];
				if (!window.VK) window.VK = {};
				window.VK.Share = {
					count: function(idx, number) {
						options._[idx].resolve(number);
					}
				};
			}

			var index =...