jquery social counter plugin

In this article, we will understand the jquery social counter plugin in detail with the help of various examples. This plugin displays the number of followers, fans, likes, subscribers from popular social networking providers such as facebook, Instagram etc.

Following are the examples of jquery social counter plugin.

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content="IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Jquery Social Counter Plugin </title>
<style>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
body {
  background: red;
  color: #333;
  font: normal 16px/1.5 Roboto, sans-serif;
  text-align: center;
}
.social {
  margin: 20px 0 40px;
  text-align: center;
}
.social__item {
  display: inline-block;
  margin: 10px;
}
.social .fa {
  background: #fff;
  border-radius: 35px;
  color: #818181;
  cursor: pointer;
  display: block;
  font-size: 30px;
  height: 70px;
  line-height: 70px;
  position: relative;
  text-align: center;
  transition: all 0.2s;
  width: 70px;
}
.social .fa:after {
  color: #818181;
  content: attr(data-count);
  font-size: 14px;
  left: 0;
  line-height: 20px;
  position: absolute;
  text-align: center;
  top: 100%;
  width: 100%;
}
.social .fa-facebook:hover {
  box-shadow: 0 0 15px rgba(59, 89, 152, 0.5) inset;
  color: #3b5998;
}
.social .fa-vk:hover {
  box-shadow: 0 0 15px rgba(69, 102, 142, 0.5) inset;
  color: #45668e;
}
.social .fa-twitter:hover {
  box-shadow: 0 0 15px rgba(0, 172, 237, 0.5) inset;
  color: #00aced;
}
.social .fa-pinterest:hover {
  box-shadow: 0 0 15px rgba(203, 32, 39, 0.5) inset;
  color: #cb2027;
}
.social .fa-linkedin:hover {
  box-shadow: 0 0 15px rgba(0, 123, 182, 0.5) inset;
  color: #007bb6;
}
.social .fa-google-plus:hover {
  box-shadow: 0 0 15px rgba(221, 75, 57, 0.5) inset;
  color: #dd4b39;
}
</style>
<body>
<h1> Example </h1>
<h2> jquery social counter plugin </h2>
<div class = "social">
  <div class = ?social__item">
    <span class = "fa fa-facebook" data-count = "..." data-social = "fb"> </span>
  </div>
  <div class = ?social__item">
    <span class = "fa fa-twitter" data-count = "..." data-social = "tw"> </span>
  </div>
  <div class = ?social__item">
    <span class = "fa fa-linkedin" data-count = "..." data-social = "ln"> </span>
  </div>
  <div class = ?social__item">
    <span class = "fa fa-pinterest" data-count = "..." data-social = "pt"> </span>
  </div>
</div>
<script>
var SocialShares = {
  fb: {
    url: "https://graph.facebook.com/?id=",
    callback: function (data) {
      console.log("fb", data);
      if (data && data.shares) {
        this.count = data.shares;
      } else {
        this.count = 0;
      }
    },
    share: "https://www.facebook.com/sharer/sharer.php?u="
  },
  tw: {
    url: "https://cdn.api.twitter.com/1/urls/count.json?url=",
    callback: function (data) {
      console.log("tw", data);
      if (data && data.count) {
        this.count = data.count;
      } else {
        this.count = 0;
      }
    },
    share: "https://twitter.com/intent/tweet?url="
  },
  ln: {
    url: "https://www.linkedin.com/countserv/count/share?format=jsonp&url=",
    callback: function (data) {
			console.log("ln", data);
      if (data && data.count) {
        this.count = data.count;
      } else {
        this.count = 0;
      }
    },
    share: "https://www.linkedin.com/cws/share?url="
  },
  pt: {
    url: "https://api.pinterest.com/v1/urls/count.json?url=",
    callback: function (data) {
			console.log("pt", data);
      if (data && data.count) {
        this.count = data.count;
      } else {
        this.count = 0;
      }
    },
    share: "https://www.pinterest.com/pin/create/bookmarklet/?description=Vasiliy Lazarev&url="
  },
};
$(function () {
  $('[data-social]').each(function () {
    var $this = $(this),
      social = $this.data('social'),
      oSocial;
    if (SocialShares.hasOwnProperty(social)) {
      oSocial = SocialShares[social];
      if (oSocial.url) {
        $.getScript(
          oSocial.url + shareUrl + "&callback=SocialShares." + social + ".callback",
          function(data, textStatus, jqxhr) {
            $this.attr("data-count", oSocial.count);
          }
        );
      }
      if (oSocial.share) {
        $this.on("click", function () {
          window.open(
            oSocial.share + shareUrl, 
            '', 
            'menubar=no,toolbar=no,resizable=yes' + 
            ',scrollbars=yes' +
            ',height=300,width=600'
          );
		    });
      }
    }
  });
});
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of jQuery social counter plugin.

Output:

Following is the output of this example.

When we click on the facebook button then the following page displays.

Example 2:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content="IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> > Jquery Social Counter Plugin </title>
<style>
body {
  font-family: Arial;
  font-size: 13px;
}
#posts {
  color: white;
  font-family: Arial;
  background-color: #f9f9f9;
}
#posts div {
  padding: 12px;
  font-size: 14px;
  border-radius: 0px;
  float: left;
  margin: 0px 0px 20px 0px;
  background: grey;
  text-align: center;
  min-width: 90px;
  min-height: 130px;
  border-bottom: 10px solid rgba(0,0,0,.15);
}
#posts .dribbble { background: #ea4c89; }
#posts .facebook { background: #3a5795; }
#posts .instagram { background: #517fa4; }
#posts .google { background: #dd4b39; }
#posts .youtube { background: #b31217; }
#posts .pinterest { background: #cb2027; }
#posts .soundcloud { background: #f50; }
#posts .vimeo { background: #45bbff; }
#posts .twitter { background: #00a5e5; }
#posts .behance { background: #0079ff; }
#posts .vine { background: #00a478; }
#posts div I { 
  padding: 10px;
  display: block;
  font-size: 30px;
}
#posts div .count { 
  padding: 10px;
  display: block;
  font-size: 30px;
}
#total {
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
}
#total_k {
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
}
h1 {
  color: #ea4c89;
  text-align: center;
  font-size: 34px;
}
h2 {
  color: #ea4c89;
  text-align: center;
  font-size: 14px;
}
</style>
<body>     
    <h1> Example </h1>
    <h2> Jquery Social Counter Plugin </h2>  
  <div id = "posts">
    <div class = "twitter"> <i class = "fa fa-twitter"> </i> <span class = "count"> </span> Followers </div>
    <div class = "facebook"> <i class = "fa fa-facebook"> </i> <span class= "count"> </span> Likes </div>
    <div class = "instagram"><i class="fa fa-instagram"> </i> <span class = "count"> </span> Followers </div>
    <div class = "google"> <i class = "fa fa-google-plus"> </i> <span class = "count"> </span> Followers </div>
    <div class = "youtube"> <i class = "fa fa-youtube"> </i> <span class = "count"> </span> Subscribers </div>    
    <div class = "pinterest"> <i class = "fa fa-pinterest"> </i> <span class = "count"> </span> Followers </div>
    <div class = "dribbble"> <i class = "fa fa-dribbble"> </i> <span class = "count"> </span> Followers </div>
    <div class = "soundcloud"> <i class = "fa fa-soundcloud"> </i> <span class = "count"> </span> Followers </div>   
    <div class = "github"> <i class = "fa fa-github"> </i> <span class = "count"> </span> Followers </div>
<script>
var dribbble = 'juanvargas';
var facebook = 'envato';
var instagram = 'juanv911';
var google_plus = '100542012590159373204';
var youtube = 'envato';
var pinterest = 'envato';
var soundcloud ="3207";
var vimeo = "vimeocuration";
var github = 'desandro';
var twitter = 'codepen';
var behance ="juanv911";
var vine = "1150982282283315200";
$.ajax({
  url: 'https://api.pinterest.com/v3/pidgets/users/'+pinterest+'/pins',
  dataType: 'jsonp',
  type: 'GET',
  success: function(data) {   
    var followers = data.data.user.follower_count;
    var k = kFormatter(followers);
    $('#posts .pinterest .count').append(k); 
    getTotal(followers); 
  } 
}); 
var dr_token = '1c73ffb7859f2c1c37450789dce2369af5caa9e18c3df1fa30485cfad79081d8';
$.ajax({
  url: 'https://api.dribbble.com/v1/users/'+dribbble,
  dataType: 'json',
  type: 'GET',
  data:{access_token: dr_token},
  success: function(data) {   
    var followers = data.followers_count;
    var k = kFormatter(followers);
    $('#posts .dribbble .count').append(k); 
    getTotal(followers); 
  } 
}); 
var token = "EAAXIDV9mIJgBAAQCw78SYNSmLlCmfoTVyaJdqG27BDyU3DdWxz63HVXDvlc4FHaxrsuzyb9Nyd6vJoBYgirPveuZBZBLgkGTV6QZAY4iN4KMclQgZAGUBLI7dA2qyggqtEOSxY4DEwZAct0rNWybHaSzgKZCDBxlkZD";
$.ajax({
  url: 'https://graph.facebook.com/'+facebook,
  dataType: 'json',
  type: 'GET',
  data: {access_token:token,fields:'likes'},
  success: function(data) {   
    var followers = parseInt(data.likes);
    var k = kFormatter(followers);
    $('#posts .facebook .count').append(k); 
    getTotal(followers); 
  } 
}); 
var clientID = 'b8ae3c3360824dfe97586571c5ba9b11';
var accessToken = '1466232857.b8ae3c3.bd20e51e608a47ebbf181e9a52026943';
$.ajax({
  url: 'https://api.instagram.com/v1/users/search?q='+instagram+'',
  dataType: 'jsonp',
  type: 'GET',
  data: {access_token: accessToken},
  success: function(data) {
    $.each(data.data, function(i, item) {
      if(instagram == item.username){
        $.ajax({
          url: "https://api.instagram.com/v1/users/" + item.id,
          dataType: 'jsonp',          
          type: 'GET',
          data: {access_token: accessToken},
          success: function(data) {
            var followers = parseInt(data.data.counts.followed_by);
            var k = kFormatter(followers);
            $('#posts .instagram .count').append(k);
            getTotal(followers); 
          }
        });
      } 
    });
  }
});
var apikey = 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0';
$.ajax({
  url: 'https://www.googleapis.com/plus/v1/people/' + google_plus,
  type: "GET",
  dataType: "json",
  data:{key:apikey},
  success: function (data) {
    var followers = parseInt(data.circledByCount);
    var k = kFormatter(followers);
    $("#posts .google .count").append(k);
    getTotal(followers); 
  }
});
$.ajax({
  url: 'https://www.googleapis.com/youtube/v3/channels?part=statistics&forUsername='+youtube,
  dataType: 'jsonp',
  type: 'GET',
  data:{key:'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0'},
  success: function(data) {   
    var subscribers = parseInt(data.items[0].statistics.subscriberCount);
    var k = kFormatter(subscribers);
    $('#posts .youtube .count').append(k); 
    getTotal(subscribers); 
  } 
}); 
var client_id="5a9f3b72a723aac2cffb7ee684a80d9b";
$.ajax({
  url: 'https://api.soundcloud.com/users/'+soundcloud,
  dataType: 'json',
  type: 'GET',
  data:{client_id:client_id},
  success: function(data) {   
    var followers = parseInt(data.followers_count);
    var k = kFormatter(followers);
    $('#posts .soundcloud .count').append(k); 
    getTotal(followers); 
  } 
}); 
var vimeo_a_t="961a0b29198b9ed293a6a70d2c160b0f";
$.ajax({
  url: 'https://api.vimeo.com/users/'+vimeo+'/followers',
  dataType: 'json',
  type: 'GET',
  data:{access_token:vimeo_a_t},
  success: function(data) {   
    var followers = parseInt(data.total);
    $('#posts .vimeo .count').append(followers).digits(); 
    getTotal(followers); 
  } 
}); 
$.ajax({
  url: 'http://54.175.100.62/twitter/index.php',
  dataType: 'json',
  type: 'GET',
  data:{user:twitter},
  success: function(data) {   
    var followers = parseInt(data.followers);
    $('#posts .twitter .count').append(followers).digits(); 
    getTotal(followers); 
  } 
}); 
$.ajax({
  url: 'https://api.github.com/users/'+github,
  dataType: 'json',
  type: 'GET',
  success: function(data) {   
    var followers = parseInt(data.followers);
    var k = kFormatter(followers);
    $('#posts .github .count').append(k); 
    getTotal(followers); 
  } 
}); 
var bh_client = 'mpX9kGiySp7YxrTCCw6FwNmKvDLNAt49';
$.ajax({
  url: 'https://api.behance.net/v2/users/'+behance,
  dataType: 'jsonp',
  type: 'GET',
  data:{client_id:bh_client},
  success: function(data) {   
    var followers = parseInt(data.user.stats.followers);
    var k = kFormatter(followers);
    $('#posts .behance .count').append(k); 
    getTotal(followers); 
  } 
}); 
$.ajax({
  url: 'http://54.175.100.62/vine.php',
  dataType: 'json',
  type: 'GET',
  data:{
    user: vine
  },
  success: function(data) {
    var followers = parseInt(data.followers);
    var k = kFormatter(followers);
    $('#posts .vine .count').append(k); 
    getTotal(followers); 
  } 
});
$.fn.digits = function(){ 
  return this.each(function(){ 
    $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
  })
}
function kFormatter(num) {
  return num > 999 ? (num/1000).toFixed(1) + 'k' : num;
}
var total = 0;
function getTotal(data) {
  total = total + data;
  $("#total").html(total).digits();
  $("#total_k").html(kFormatter(total));
}
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of jQuery social counter plugin.

Output:

Following is the output of this example.

Example 3:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content="IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Animate Jquery Social Counter Plugin </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js" integrity="sha256-JtQPj/3xub8oapVMaIijPNoM0DHoAtgh/gwFYuN5rik=" crossorigin = "anonymous"> </script>
</head>
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
body {
  background-color: #2c3e50;
      font-family: 'Quicksand', sans-serif;
}
.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 30px;
  justify-content: space-evenly;
  text-align: center;
}
i:nth-child(1) {
  color: white;
  font-size: 2em;
  background-color: #3b5998;
  width: 20%;
  padding: 20px;
  width: 30px;
}
i {
  border-radius: 20%;
}
.counter {
  color: white;
  font-size: 1.5em;
  margin: 20px 0px 0px 0px;
}
h1 {
  color: #ea4c89;
  text-align: center;
  font-size: 34px;
}
h2 {
  color: #ea4c89;
  text-align: center;
  font-size: 14px;
}
i:nth-child(2) {
  background-color: #00acee;
   color: white;
  font-size: 2em;
  padding: 20px;
}
i:nth-child(3) {
  background-color: #c4302b;
  color: white;
  padding: 20px;
}
</style>
<body>
<div class = "wrapper">
<h1> Example </h1>
    <h2>Animate Jquery Social Counter Plugin </h2>
  <i class = "fa fa-facebook fa-2x"> </i>
  <i class = "fa fa-twitter fa-2x"> </i>
    <i class = "fa fa-youtube fa-2x"> </i>
  <span class = "counter"> 100 </span> +  Likes
  <div class = "counter"> 100 </div>
  <div class = "counter"> 100 </div>
</div>
$(document).ready(function() {
$('.counter').counterUp({
  delay: 5,
  time: 1000,
});
});
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of animated jQuery social counter plugin.

Output:

Following is the output of this example.