Social Sharing Buttons with counter

This bootstrap snippet called "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

HTML code

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

<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>

CSS code

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

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; }

                                    

Javascript/Jquery code

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

// 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;
} 

Similar snippets

Bootstrap snippet profile with timeline activities

profile with timeline activities

View

Bootstrap snippet Drive files documents user profile

Drive files documents user profile

View

Bootstrap snippet Colored Social icons

Colored Social icons

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.1.0

Created: May 2nd 2014, 22:53

Views: 4.7K

Rated 5/5 based on 5 reviews