Custom Like and Share Button Counter for Social Networks Twitter and Facebook

Question

How to get the total number of likes and shares of a URL, on platforms Twitter and Facebook?

There are several websites where you can see buttons share/partilhar/compartilhar custom Facebook and Twitter, with a custom counter, or just using a simple counter to indicate how many URL obtained in general as in the example of the image below.

How can we recreate a custom counter as in the image below?

Answer 1

Well, for this we will use here a little Javascript to achieve the desired:

• First let’s create a variable - pageUrl which will contain the link to URL
• Then we will create a function that will convert large numbers, the start from 10,000 Shares for - 10 mil Shares. As well as for example Stack Overflow does it in several community sites.

(In this example how we will be using the jsFiddle.net we won’t go can see this transformation, but if we change the url to - https://twitter.com/ for example, we will already be able to see this conversion into action)

• And finally we will get the total number of likes and shares that the URL obtained using - Facebook Graph API, Twitter API

The code for Facebook will look something like in the example below:

Custom counter for 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"); }
});

Then just add the HTML that will be something like:

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

Online example in jsFiddle: http://jsfiddle.net/3Lgrq51o/

Custom counter for 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>

Final jsFiddle example with both codes all together + share codes added: http://jsfiddle.net/9t6xgj04/

_{JS Code Credits - Redkings}