JSFiddle - React, Tailwind, and code Playground
HTML
<div class="popularity-count" data-descr="There is no such thing as a “page” nor a “webpage”" data-image="http://pixeline.be/wp-content/uploads/2012/01/dwm_wkid01_sensflux_017.png" data-url="http://pixeline.be/blog/design/there-is-no-such-thing-as-a-page-nor-webpage-912.html">
<span class="pop-trigger">
<span class="pop-total"></span>
♥ (hover here)
</span>
<ul class="pop-details"></ul>
</div>
CSS
.popularity-count{position:relative}
.pop-trigger{cursor: pointer}
.pop-details{
top:10px;
width:10em;
min-height:10em;
height:auto;
background:white;
display:block;
padding-bottom:1em;
}
ul.pop-details li.social-action-buttons{border-top:1px dotted #DDD !important;padding:2em 0 !important;margin-top:1em !important;}
ul.pop-details li.social-action-buttons li {display:block;clear:both;float:none}.popularity-count{position:relative}
JavaScript
/*
Using the sharedcount api. Credits and thanks: http://sharedcount.com/documentation.php
*/
jQuery.sharedCount = function(a, c) {
var a = encodeURIComponent(a || location.href),
b = {
url: "//" + ("https:" == location.protocol ? "sharedcount.appspot" : "api.sharedcount") + ".com/?url=" + a,
cache: !0
};
if ("withCredentials" in new XMLHttpRequest) b.success = c;
else {
var d = "sc_" + a.replace(/\W/g, "");
window[d] = c;
b.jsonpCallback = d;
b.dataType = "jsonp"
}
return jQuery.ajax(b)
};
var data = {
"StumbleUpon": 0,
"Reddit": 0,
"Facebook": {
"commentsbox_count": 0,
"click_count": 0,
"total_count": 0,
"comment_count": 0,
"like_count": 0,
"share_count": 0
},
"Delicious": 0,
"GooglePlusOne": 1,
"Buzz": 0,
"Twitter": 1,
"Diggs": 0,
"Pinterest": 0,
"LinkedIn": 1
};
jQuery(document).ready(function($) {
jQuery('.popularity-count').each(function() {
var $this = jQuery(this);
var url = $this.data('url');
var img = $this.data('image');
var title = $this.data('descr');
jQuery.sharedCount(url, function(data) {
var fb = data.Facebook;
var total = parseInt(data.Twitter + parseInt(fb.total_count) + data.GooglePlusOne + data.Pinterest + data.LinkedIn);
var pinterest = '<a href="http://pinterest.com/pin/create/button/?url=' + url + '&media=' + img + '&description=' + title + '" class="pin-it-button" count-layout="none"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
var twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + url + '" data-text="' + title + '" data-via="pixeline" data-lang="en" data-count="none">Tweeter</a>';
jQuery(".pop-total", $this).text(total);
...