Bom, para isto vamos utilizar aqui um pouco de JavaScript para podermos alcançar o pretendido:
- Primeiro vamos criar uma variável -
pageUrl
que irá conter o link do
URL
- Depois iremos criar uma função que vai converter grandes números, a
partir de
10,000
Partilhas para - 10 mil
Partilhas. Assim como
por exemplo o Stack Overflow o faz em vários sítios da comunidade.
(Neste exemplo como vamos estar a utilizar o jsFiddle.net
não iremos
conseguir ver esta transformação, mas se trocarmos o url para -
https://twitter.com/ por exemplo, já iremos conseguir ver esta
conversão em acção)
- E por fim iremos obter o número total de
likes
e shares
que o URL obteve utilizando - Facebook Graph API, Twitter API
O código para o Facebook ficará algo como no exemplo abaixo:
Contador personalizado para Facebook
var pageUrl = "http://jsfiddle.net/";
// Isto converte números a partir de "10,000" para - "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"); }
});
Depois então basta adicionarmos o HTML que será algo como:
<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>
Exemplo online no jsFiddle: http://jsfiddle.net/3Lgrq51o/
Contador personalizado para Twitter
$.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"); }
});
<div class="share-badge twitter">
<a href="https://twitter.com/share?url=http://jsfiddle.net/&text=&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>
Exemplo final no jsFiddle com ambos os códigos todos juntos + códigos de partilha adicionados: http://jsfiddle.net/9t6xgj04/
Créditos do código JS - RedKings