"Custom Share Boxes"
Bootstrap 3.3.0 Snippet by blayderunner123

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <br> <br> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Custom Share Boxes boot --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5715866801509976" data-ad-slot="8234714849" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br> <a class="socialbox facebook" href="https://www.facebook.com/cghubs"> <div class="social-icon"> <i class="fa fa-fw fa-facebook"></i> </div> <div class="description"> <span class="ng-binding-shares"></span> <span class="ng-binding-likes"></span> <span>Like us on Facebook!</span> </div> </a> <a class="socialbox twitter" href="https://twitter.com/cghubs"> <div class="social-icon"> <i class="fa fa-fw fa-twitter"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Follow us on Twitter!</span> </div> </a> <a class="socialbox pinterest" href="http://www.pinterest.com/search/pins/?q=cghubs"> <div class="social-icon"> <i class="fa fa-fw fa-pinterest"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Find us on Pinterest!</span> </div> </a> <a class="socialbox linkedin" href="https://www.linkedin.com/vsearch/f?type=all&keywords=cghubs&orig=GLHD&rsid=&pageKey=member-home&trkInfo="> <div class="social-icon"> <i class="fa fa-fw fa-linkedin"></i> </div> <div class="description"> <span class="ng-binding"></span> <span>Find us on LinkedIn!</span> </div> </a> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700); a.socialbox { font-family: "Open Sans"; font-weight: 300; display: inline-block; text-decoration: none; color: white; padding: 20px 30px; width: 320px; margin: 24px 0 0 24px; } a.socialbox.facebook { background-color: #2980b9; -webkit-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } a.socialbox.twitter { background-color: #3498db; -webkit-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } a.socialbox.pinterest { background-color: #c0392b; -webkit-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } a.socialbox.linkedin { background-color: #34495e; -webkit-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } a.socialbox .social-icon { line-height: 32px; font-size: 30px; display: inline-block; vertical-align: middle; border-right: 1px solid rgba(255, 255, 255, 0.25); padding-right: 15px; } a.socialbox .description { display: inline-block; vertical-align: middle; padding-left: 10px; font-size: 13px; } a.socialbox .description span { display: block; line-height: 16px; }
function getfbcount(url, name) { var fbshares; var fblikes; $.getJSON('http://graph.facebook.com/?ids=' + url, function(data){ fbshares = data[url].shares; $('.facebook .ng-binding-shares').html(fbshares + ' Shares'); }); $.getJSON('http://graph.facebook.com/' + name, function(data){ fblikes = data[name].likes; $('.facebook .ng-binding-likes').html(fblikes + ' Likes'); }); } function gettwcount(url) { var tweets; $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + url + '&callback=?', function(data){ tweets = data.count; $('.twitter .ng-binding').html(tweets + ' Tweets'); }); } function getpincount(url) { $.getJSON("http://api.pinterest.com/v1/urls/count.json?url=" + url + "&callback=?", function(json) { $('.pinterest .ng-binding').html(json.count + ' Pins'); }); } function getlicount(url) { $.getJSON("http://www.linkedin.com/countserv/count/share?url=" + url + "&callback=?", function(json) { $('.linkedin .ng-binding').html(json.count + ' Links'); }); } $(document).ready(function($){ var url = 'http://cghubs.com'; var name = 'cghubs'; getfbcount(url, name); gettwcount(url); getpincount(url); getlicount(url); });

Related: See More


Questions / Comments: