3

Como obter o número total de likes e shares de um URL, nas plataformas Twitter e Facebook?

Existem vários sites pela Internet onde se costuma ver botões share/partilhar/compartilhar do Facebook e Twitter personalizados, com um contador personalizado, ou usando apenas um simples contador a indicar quantos likes um URL obteve em geral como no exemplo da imagem abaixo.

Como é que podemos recriar um contador personalizado como no da imagem abaixo?

inserir a descrição da imagem aqui

1 Resposta 1

3

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/&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>

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .