JSFiddle - React, Tailwind, and code Playground
HTML
<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"></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>
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-image: url(http://i.stack.imgur.com/vcZqV.png);
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"); }
});