JSFiddle - React, Tailwind, and code Playground

HTML

<div class="share-overlay twitter-ready fb-ready">
    
    <div class="share-badge facebook">    
        <a href="https://www.facebook.com/sharer/sharer.php?u=http://jsfiddle.net/" onclick="popUp=window.open(http://www.facebook.com/sharer.php?u=http://jsfiddle.net/, popupwindow, scrollbars=yes,width=800,height=400);popUp.focus();return false">
            <div class="socialIcon fbIcon"></div>
        </a>
        <div class="detalhes">
            <span class="socialText">Partilhas do jsFiddle.net no Facebook</span>
            <p class="socialCounter">0</p>
        </div>
        <div class="clear"></div>
    </div>
    
<br>
        
        <div class="share-badge twitter">
            <a href="https://twitter.com/share?url=http://jsfiddle.net/&amp;text=&amp;related=vineapp">
                <div class="socialIcon TwitterIcon"></div>
            </a>
            <div class="detalhes">
                <span class="socialText">Partilhas do jsFiddle.net no Twitter</span>
                <p class="socialCounter">0</p>
            </div>
            <div class="clear"></div>
        </div>
        
</div>

CSS

.share-badge {
    width: 300px;
    font-family: sans-serif;
    border: 1px solid #eee;
    padding: 6px;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}
.detalhes {
    float: right;
    width: 230px;
}

.socialIcon {
    float: left;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50px;
    height: 50px;
    display: inline-block;
}
.fbIcon {background-image: url(http://i.stack.imgur.com/vcZqV.png);}
.TwitterIcon {background-image: url(http://i.stack.imgur.com/ptdzi.png);}

.socialCounter {
    display: block;
    color: #5E5E5E;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}
.socialText {
    font-size: 13px;
    color: #909090;
}
.clear{clear:both;}

JavaScript

var pageUrl = "http://jsfiddle.net/";

// Isto converte numeros a partir de "10,000" em - "10 mil"
function formatCount(count) {
    var countK = count / 1000;
    if (countK < 1) {
        return count;
    } else if (countK < 10) {
        var countStr = count + "";
        return [countStr.substr(0, 1), countStr.substr(1, 3)].join(",");
    } else {
        return (Math.floor(countK * 10) / 10) + "mil";
    }
}

$.ajax({
    url: "https://graph.facebook.com/?ids=" + pageUrl,
    success: function(data) {
        if (data && data[pageUrl] && data[pageUrl].shares) {
            $(".share-badge.facebook p").html(formatCount(data[pageUrl].shares));
        }
        $(".share-overlay").addClass("fb-ready");
    },
    error: function() { $(".share-overlay").addClass("fb-ready"); }
});

$.ajax({
    url: "https://cdn.api.twitter.com/1/urls/count.json?url=" + pageUrl,
    dataType: "jsonp",
    success: function(data) {
        if (data && data.count) {
            $(".share-badge.twitter p").html(formatCount(data.count));
        }
        $(".share-overlay").addClass("twitter-ready");
    },
    error: function() { $(".share-overlay").addClass("twitter-ready"); }
});

var $tweetButton = $(".share-badge.twitter").closest("a");
var $fbShareButton = $(".share-badge.facebook").closest("a");

var description = "";
if (description.length > 116) {
    description = description.substr(0, 115).trim() + "\u2026";
}
var tweetOptions = {
    url: pageUrl,
    text: description,
    related: "vineapp"
};
$tweetButton.attr("href", "https://twitter.com/share?" + $.param(tweetOptions));
$tweetButton.click(function(event) {
    event.preventDefault();
    var width = 550;
    var height = 380;
    var tweetWindow = window.open(this.href, "tweetWindow", "width=" + width + ",height=" + height);
    tweetWindow.moveTo((screen.width - width) / 2,(screen.height - height) / 2);
});

$fbShareButton.attr("href", "https://www.facebook.com/sharer/sharer.php?u=" +...