"Custom Share Boxes"
Bootstrap 3.3.0 Snippet by bhanu143

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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($){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: