Easy Social Media Counter Plugin For jQuery - SocialCounters

Easy Social Media Counter Plugin For jQuery - SocialCounters
File Size: 10.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.