Social Sharing Buttons with counter

This bootstrap snippet Social Sharing Buttons with counter was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: social, buttons

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<h4 class="text-center">find more in <a href="http://www.jquery2dotnet.com/" target="__blank">jquery2dotnet</a></h4>
<div class="container bootstrap snippet">
    <div class="row social">
        <div class="col-md-3">
            <a href="#">
                <div class="panel panel-default twitter">
                    <div class="panel-body">
                        <small class="social-title">Twitter</small>
                        <h3 class="count">
                            12,000</h3>
                        <i class="fa fa-twitter"></i>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="#">
                <div class="panel panel-default google-plus">
                    <div class="panel-body">
                        <small class="social-title">Google+</small>
                        <h3 class="count">
                            13,000</h3>
                        <i class="fa fa-google-plus"></i>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="#">
                <div class="panel panel-default facebook-like">
                    <div class="panel-body">
                        <small class="social-title">Facebook Like</small>
                        <h3 class="count">
                            14,000</h3>
                        <i class="fa fa-facebook"></i>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="#">
                <div class="panel panel-default visitor">
                    <div class="panel-body">
                        <small class="social-title">Website Visitor</small>
                        <h3 class="count">
                            15,000</h3>
                        <i class="fa fa-user"></i>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body { margin-top:20px; }
.social-title {text-transform: uppercase;letter-spacing: 1px; }
.count { font-size: 37px;margin-top: 10px;margin-bottom: 10px; }
.fa { font-size: 100px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; }
.social .panel { color:#fff;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
.social a { text-decoration:none; }
.twitter { background-color:#00acee; }
.google-plus { background-color:#dd4b39; }
.facebook-like { background-color:#3b5998; }
.visitor { background-color:#eb6d20; }

                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview

// Animate the element's value from x to y:
$({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, {
    duration: 3000,
    easing: 'swing', // can be anything
    step: function () { // called on every step
        // Update the element's text with rounded-up value:
        $('.count').text(commaSeparateNumber(Math.round(this.someValue)));
    }
});

function commaSeparateNumber(val) {
    while (/(d+)(d{3})/.test(val.toString())) {
        val = val.toString().replace(/(d)(?=(ddd)+(?!d))/g, "$1,");
    }
    return val;
} 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.0

Created: May 2nd 2014, 22:53

Views: 4.3K