URL Shares Count by AdamA
@author : Adam A.
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<form role="form">
<div class="form-group">
<label>URL</label>
<input type="text" class="form-control" id="urlInput" placeholder="Enter URL" />
<p class="help-block">with <code>http</code> or <code>https</code>
</p>
</div>
<button type="button" class="btn btn-success" id="getJSON">Get Share Counts</button>
</form>
</div>
</div>
</div>
<div class="col-md-4" id="data-tab">
<div class="list-group"> <a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Facebook</h4>
<p class="list-group-item-text" id="facebook-count"></p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Twitter</h4>
<p class="list-group-item-text" id="twitter-count"></p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">LinkdIn</h4>
<p class="list-group-item-text" id="linkdin-count"></p>
</a>
</div>
</div>
<!-- Total shares count -->
<div class="col-md-4" id="total-shares">
<div class="list-group"> <a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Total shares counts</h4>
<p class="list-group-item-text" id="total-count"></p>
</a>
</div>
</div>
</div>
</div>
JavaScript
$('#getJSON').click(function () {
$('#data-tab').fadeOut();
$URL = $('#urlInput').val();
totalShares($URL);
$('#data-tab').fadeIn();
});
// Format Number functions
function ReplaceNumberWithCommas(yourNumber) {
//Seperates the components of the number
var components = yourNumber.toString().split(".");
//Comma-fies the first part
components[0] = components[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
//Combines the two sections
return components.join(".");
}
// SHARE COUNTS FUNCTIONS
// Facebook Shares Count
function facebookShares($URL) {
$.getJSON('http://graph.facebook.com/?id=' + $URL, function (fbdata) {
$('#facebook-count').text('The URL has ' + ReplaceNumberWithCommas(fbdata.share.share_count
) + ' shares count on Facebook')
$('#total-shares').attr('data-facebookShares', fbdata.share.share_count
)
});
}
// Twitter Shares Count
function twitterShares($URL) {
$.getJSON('https://api.linkedin.com/v2/socialActions?ids={shareUrn1|ugcPostUrn1|commentUrn1}&ids={shareUrn2|ugcPostUrn2|commentUrn2}' + $URL + '&callback=?', function (twitdata) {
$('#twitter-count').text('The URL has ' + ReplaceNumberWithCommas(twitdata.count) + ' shares count on Twitter')
$('#total-shares').attr('data-twitterShares', twitdata.count)
});
}
// LinkIn Shares Count
function linkdInShares($URL) {
$.getJSON('http://www.linkedin.com/countserv/count/share?url=' + $URL + '&callback=?', function (linkdindata) {
$('#linkdin-count').text('The URL has ' + ReplaceNumberWithCommas(linkdindata.count) + ' shares count on linkdIn')
$('#total-shares').attr('data-linkdInShares', linkdindata.count)
});
}
function totalShares($URL) {
linkdInShares($URL)
twitterShares($URL)
facebookShares($URL)
setTimeout(function() {
var fbShares = parseInt( $('#total-shares').attr('data-facebookShares') );
var twitShares= parseInt(...