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

Well, for this we will use here a bit of JavaScript to achieve the intended:

• First let's create a variable - pageUrl that will contain the link URL
• Later we will create a function that will convert large numbers, the from 10,000 Shares to - 10 mil Shares. As for example Stack Overflow does it in several places of the community.

  

(In this example, how are we going to use jsFiddle.net we will not   to see this transformation, but if we change the url to -    link 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 got using - Facebook Graph API, Twitter API

The code for Facebook will look something like 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 look 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>

  

Example online in jsFiddle: link

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 example in jsFiddle with both codes all together + sharing codes added: link

JS code credits - RedKings