"social"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ciprian/pen/prhCH?limit=all&page=26&q=box" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'> <style class="cp-pen-styles">@import url(https://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; } </style></head><body> <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="https://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> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >function getfbcount(url, name) { var fbshares; var fblikes; $.getJSON('https://graph.facebook.com/?ids=' + url, function(data){ fbshares = data[url].shares; $('.facebook .ng-binding-shares').html(fbshares + ' Shares'); }); $.getJSON('https://graph.facebook.com/' + name, function(data){ fblikes = data[name].likes; $('.facebook .ng-binding-likes').html(fblikes + ' Likes'); }); } function gettwcount(url) { var tweets; $.getJSON('https://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("https://api.pinterest.com/v1/urls/count.json?url=" + url + "&callback=?", function(json) { $('.pinterest .ng-binding').html(json.count + ' Pins'); }); } function getlicount(url) { $.getJSON("https://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); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

BLK• Design System
Bootstrap Social Card
Navbar with Social icon & Dropdown
social network layout - bootstrap 4

Questions / Comments: