Skip to content

Commit 0467fe2

Browse files
juanv911juanv911
committed
Initial Version
0 parents  commit 0467fe2

File tree

7 files changed

+946
-0
lines changed

7 files changed

+946
-0
lines changed

‎css/style.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
body {
2+
font-family: 'Open Sans', sans-serif;
3+
font-size:13px;
4+
background:#f5f5f5;
5+
}
6+
a {
7+
text-decoration:none;
8+
}
9+
#wrapper {
10+
color:white;
11+
background-color: #f9f9f9;
12+
}
13+
#wrapper .item{
14+
padding:12px;
15+
font-size:11px;
16+
border-radius:5px;
17+
float:left;
18+
margin:0px 10px 10px 0px;
19+
background:grey;
20+
text-align:center;
21+
min-width:90px;
22+
min-height:130px;
23+
border-bottom:10px solid rgba(0,0,0,.15);
24+
text-transform:uppercase;
25+
}
26+
#wrapper .item.dribbble{ background:#ea4c89;}
27+
#wrapper .item.facebook{ background:#3a5795;}
28+
#wrapper .item.instagram{ background:#517fa4;}
29+
#wrapper .item.google{ background:#dd4b39;}
30+
#wrapper .item.youtube{ background:#b31217;}
31+
#wrapper .item.pinterest { background:#cb2027;}
32+
#wrapper .item.soundcloud{background:#f50}
33+
#wrapper .item.vimeo { background:#45bbff;}
34+
#wrapper .item.twitter {background:#00a5e5;}
35+
#wrapper .item.behance {background: #0079ff;}
36+
#wrapper .item.vine {background: #00a478;}
37+
#wrapper .item.vk {background: #507299;}
38+
#wrapper .item.foursquare {background: #2d5be3;}
39+
#wrapper .item.linkedin {background: #0077b5;}
40+
41+
#wrapper .item i,#wrapper .item .count {
42+
padding: 10px;
43+
display:block;
44+
font-size:30px;
45+
}
46+
#wrapper .item .count {
47+
font-weight:600;
48+
}
49+
#total, #total_k {
50+
padding: 10px;
51+
font-weight:bold;
52+
font-size:20px;
53+
}
54+
#total:before, #total_k:before {
55+
content:'Total Fans: ';
56+
font-weight:normal;
57+
}
58+
#wrapper .item {
59+
color:#fff;
60+
}

‎index.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Social Media Counters</title>
6+
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
7+
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
8+
<link rel="stylesheet" href="css/style.css">
9+
</head>
10+
<body>
11+
<div id="total"></div>
12+
<div id="total_k"></div>
13+
<div id="wrapper">
14+
<a class="twitter"><i class="fa fa-twitter"></i><span class="count"></span>Followers</a>
15+
<a class="facebook"><i class="fa fa-facebook"></i><span class="count"></span>Likes</a>
16+
<a class="instagram"><i class="fa fa-instagram"></i><span class="count"> </span>Followers</a>
17+
<a class="google"><i class="fa fa-google-plus"></i><span class="count"></span>Followers</a>
18+
<a class="linkedin"><i class="fa fa-linkedin"></i><span class="count"></span>Connections</a>
19+
<a class="youtube"><i class="fa fa-youtube"></i><span class="count"></span>Subscribers</a>
20+
<a class="vine"><i class="fa fa-vine"></i><span class="count"></span>Followers</a>
21+
<a class="pinterest"><i class="fa fa-pinterest"></i><span class="count"></span>Followers</a>
22+
<a class="dribbble"><i class="fa fa-dribbble"></i><span class="count"></span>Followers</a>
23+
<a class="soundcloud"><i class="fa fa-soundcloud"></i><span class="count"></span>Followers</a>
24+
<a class="vimeo"><i class="fa fa-vimeo"></i><span class="count"></span>Followers</a>
25+
<a class="github"><i class="fa fa-github"></i><span class="count"></span>Followers</a>
26+
<a class="behance"><i class="fa fa-behance"></i><span class="count"></span>Followers</a>
27+
<a class="vk"><i class="fa fa-vk"></i><span class="count"></span>Followers</a>
28+
<a class="foursquare"><i class="fa fa-foursquare"></i><span class="count"></span>Friends</a>
29+
</div>
30+
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
31+
<script src="js/api.js"></script>
32+
<script>
33+
$('#wrapper').apis({
34+
//Get Usernames
35+
dribbble_user: 'username_here',
36+
facebook_user: 'username_here',
37+
instagram_user: 'username_here',
38+
google_plus_id: 'username_here',
39+
youtube_user: 'username_here',
40+
pinterest_user: 'pinterest_username_here',
41+
soundcloud_user_id: 'user_id_here',
42+
vimeo_user: 'username_here',
43+
github_user: 'username_here',
44+
twitter_user: 'twitter_username_here',
45+
behance_user: 'username_here',
46+
vine_user: 'user_id_here',
47+
vk_id: 'user_id_here',
48+
foursquare_user: 'username_here',
49+
//Get Access Tokens,keys,client_ids
50+
dribbble_token: 'token_here',
51+
instagram_token:'token_here',
52+
google_plus_key:'key_here',
53+
facebook_token:'token_here',
54+
youtube_key:'key_here',
55+
soundcloud_client_id:'client_id_here',
56+
vimeo_token:'token_here',
57+
behance_client_id:'client_id_here',
58+
foursquare_token:'token_here',
59+
linkedin_oauth: 'token_here'
60+
});
61+
</script>
62+
</body>
63+
</html>

0 commit comments

Comments
 (0)