Social Media Sharing Buttons

Bootstrap social media sharing buttons that you can easily add to any page.

by Himanshu Joshi

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
    <div class="col-md-3 jumbotron vcenter">
        <i class="fa fa-share"></i>
        Share any of the information see here. Image kindly provied by <a href="http://placehold.it" rel="nofollow">Placehold.it</a>
    </div>
    <div class="col-md-9">
        <img class="pull-left" src="http://placehold.it/350x150" />
    </div>
</div>

CSS

.vcenter {        
        vertical-align:central;
        margin-top:20%;
        font-style:italic;
    }

.align-text-left { text-align: left; }
.align-text-center { text-align: center; }
.align-text-right { text-align: right; }

    .prepbootstrap-sharing-container
    {
        position: fixed;
        top: 40%;
        left: 0;
        right: auto;
        display: inline-block;
        margin: 0;
        padding: 0;
        z-index: 11100;
        overflow: hidden;
        width: 64px;
    }

    .prepbootstrap-sharing-container .sharing-item
    {
        width: 48px;
        height: 48px;
        text-align: center;
        cursor: pointer;
    }
    .prepbootstrap-sharing-container .sharing-item:hover
    {
        width: 64px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .prepbootstrap-sharing-container .sharing-img
    {
        display: inline-block;
        margin: auto;
        margin-top: 8px;
        width: 32px;
        height: 32px;
        background-image: url(/Content/images/sharing32x32.png);
    }
    .prepbootstrap-sharing-container .sharing-fb
    {
        background-color: #305891;
    }
    .prepbootstrap-sharing-container .sharing-fb .sharing-img
    {
        background-position: 0px 0px;
    }
    .prepbootstrap-sharing-container .sharing-gp
    {
        background-color: #CE4D39;
    }
    .prepbootstrap-sharing-container .sharing-gp .sharing-img
    {
        background-position: 0px -32px;
    }
    .prepbootstrap-sharing-container .sharing-tw
    {
        background-color: #2CA8D2
    }
    .prepbootstrap-sharing-container .sharing-tw .sharing-img
    {
        background-position: 0px -64px;
    }
    .prepbootstrap-sharing-container .sharing-li
    {
        background-color: #4498C8;
    }
    .prepbootstrap-sharing-container .sharing-li .sharing-img
    {
        background-position: 0px -96px;
   ...

JavaScript

jQuery(function($) {
        // open a popup window at the center of the screen
        function open_popup(url, width, height, scroll) {
            var left = ($(window).width() - width) / 2,
                top = ($(window).height() - height) / 2,
                opts = 'status=1,' + (scroll ? 'scrollbars=1,' : '') + 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left;

            window.open(url, "", opts);
        }

        // add the sharing container on the page
        $('<div class="prepbootstrap-sharing-container"></div>')
            .appendTo(document.body)
            .append(
                $('<div class="sharing-item sharing-fb"><div class="sharing-img"><i class="fa fa-facebook facebook-icon"></i></div></div>').click(function () {
                    open_popup(
                        "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(document.location.href),
                        600,
                        350
                    );
                }),
                $('<div class="sharing-item sharing-gp"><div class="sharing-img"><i class="fa fa-google-plus google-plus-icon"></i></div></div>').click(function () {
                    open_popup(
                        "https://plus.google.com/share?url=" + encodeURIComponent(document.location.href),
                        500,
                        500
                    );
                }),
                $('<div class="sharing-item sharing-tw"><div class="sharing-img"><i class="fa fa-twitter twitter-icon"></i></div></div>').click(function () {
                    open_popup(
                        "https://twitter.com/share?url=" + encodeURIComponent(document.location.href) +
                            "&text=" + encodeURIComponent($(document).find("title").text()),
                        575,
                        400,
                        true
                    );
                }),
                $('<div class="sharing-item...