Easy Social Media Counter Plugin For jQuery - SocialCounters

SocialCounters is a jQuery plugin which displays the number of followers, fans, likes, subscribers from Facebook, Twitter, Google Plus, Instagram, Youtube and other popular social networking providers.

All social networking providers supported:

• Twitter (Requires PHP)
• Facebook
• Instagram 
• Google Plus
• LinkedIn 
• YouTube
• Vine ((Requires PHP))
• Pinterest
• Dribbble
• SoundCloud
• Vimeo
• GitHub
• Behance
• VK
• Foursquare

How to use it:

1. Add social media links to your webpage as follows:

<div id="wrapper">
  <a class="item twitter"><i class="fa fa-twitter"></i><span class="count"></span>Followers</a>
  <a class="item facebook"><i class="fa fa-facebook"></i><span class="count"></span>Likes</a>
  <a class="item instagram"><i class="fa fa-instagram"></i><span class="count"> </span>Followers</a>
  <a class="item google"><i class="fa fa-google-plus"></i><span class="count"></span>Followers</a>
  <a class="item linkedin"><i class="fa fa-linkedin"></i><span class="count"></span>Connections</a>
  <a class="item youtube"><i class="fa fa-youtube"></i><span class="count"></span>Subscribers</a>
  <a class="item vine"><i class="fa fa-vine"></i><span class="count"></span>Followers</a>
  <a class="item pinterest"><i class="fa fa-pinterest"></i><span class="count"></span>Followers</a>
  <a class="item dribbble"><i class="fa fa-dribbble"></i><span class="count"></span>Followers</a>
  <a class="item soundcloud"><i class="fa fa-soundcloud"></i><span class="count"></span>Followers</a>
  <a class="item vimeo"><i class="fa fa-vimeo"></i><span class="count"></span>Followers</a>
  <a class="item github"><i class="fa fa-github"></i><span class="count"></span>Followers</a>
  <a class="item behance"><i class="fa fa-behance"></i><span class="count"></span>Followers</a>
  <a class="item vk"><i class="fa fa-vk"></i><span class="count"></span>Followers</a>
  <a class="item foursquare"><i class="fa fa-foursquare"></i><span class="count"></span>Friends</a>
</div>

2. Create an empty container to show total fans of your social media accounts

<div id="total"></div>
<!-- OR -->
<div id="total_k"></div>

3. Call the function and insert your own usernames, access tokens, API keys and client ids into the JavaScript as this:

$('#wrapper').SocialCounter({
  //Get Usernames
  dribbble_user: 'username_here',
  facebook_user: 'username_here',
  instagram_user: 'username_here',
  google_plus_id: 'username_here',
  youtube_user: 'username_here',
  pinterest_user: 'pinterest_username_here',
  soundcloud_user_id: 'user_id_here',
  vimeo_user: 'username_here',
  github_user: 'username_here',
  twitter_user: 'twitter_username_here',
  behance_user: 'username_here',
  vine_user: 'user_id_here',
  vk_id: 'user_id_here',
  foursquare_user: 'username_here',
  //Get Access Tokens,keys,client_ids
  dribbble_token: 'token_here',
  instagram_token:'token_here',
  google_plus_key:'key_here',
  facebook_token:'token_here',
  youtube_key:'key_here',
  soundcloud_client_id:'client_id_here',
  vimeo_token:'token_here',
  behance_client_id:'client_id_here',
  foursquare_token:'token_here',
  linkedin_oauth: 'token_here' 
});

4. Style the social links using your own CSS:

#wrapper {
  color: white;
  background-color: #f9f9f9;
  margin: 10px;
}

#wrapper .item {
  padding: 12px;
  font-size: 11px;
  border-radius: 5px;
  float: left;
  margin: 0px 10px 10px 0px;
  background: grey;
  text-align: center;
  min-width: 90px;
  min-height: 130px;
  border-bottom: 10px solid rgba(0,0,0,.15);
  text-transform: uppercase;
}

#wrapper .item.dribbble { background: #ea4c89; }

#wrapper .item.facebook { background: #3a5795; }

#wrapper .item.instagram { background: #517fa4; }

#wrapper .item.google { background: #dd4b39; }

#wrapper .item.youtube { background: #b31217; }

#wrapper .item.pinterest { background: #cb2027; }

#wrapper .item.soundcloud { background: #f50 }

#wrapper .item.vimeo { background: #45bbff; }

#wrapper .item.twitter { background: #00a5e5; }

#wrapper .item.behance { background: #0079ff; }

#wrapper .item.vine { background: #00a478; }

#wrapper .item.vk { background: #507299; }

#wrapper .item.foursquare { background: #2d5be3; }

#wrapper .item.linkedin { background: #0077b5; }

#wrapper .item i, #wrapper .item .count {
  padding: 10px;
  display: block;
  font-size: 30px;
}

#wrapper .item .count { font-weight: 600; }

#total, #total_k {
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
}

#total:before, #total_k:before {
  content: 'Total Fans: ';
  font-weight: normal;
}

#wrapper .item { color: #fff; }

/*Rounded Counters*/

#wrapper.rounded { margin-top: 20px; }

#wrapper.rounded .item {
  min-width: 0;
  min-height: 0;
  width: 50px;
  height: 50px;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 50%;
  border: none;
}

#wrapper.rounded .item .count {
  position: absolute;
  top: -10px;
  right: -10px;
  background: inherit;
  border: solid 2px #fff;
  border-radius: 30px;
  height: 15px;
  line-height: 15px;
}

#wrapper.rounded .item .count { font-size: 11px!important; }

/*Square Counters*/

#wrapper.square {
  max-width: 720px;
  margin: 0 auto;
}

#wrapper.square .item {
  width: 120px;
  height: 130px;
  border-radius: 0px;
  margin: 0px;
}

#wrapper.square .item .count {
  padding: 10px;
  display: block;
  font-size: 20px;
  font-weight: 600;
}

Change log:

2017-05-09

• Include Spotify Artist and User follower counters and include second YouTube counter in different style.

---

This awesome jQuery plugin is developed by juanv911. For more Advanced Usages, please check the demo page or visit the official website.