Social Share Plugin A Bootstrap template for a Social share plugin embeddable in any website

<div class="container">
    <div class="col-md-3 jumbotron vcenter">
        <i class="fa fa-share"></i>
        Share this visualization via the Buttons Docked to the left.
    </div>
    <div class="col-md-9">
        <img class="pull-right" src="/Content/images/shared/misc/population.png" />
    </div>
</div>

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

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

<script type="text/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"></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"></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"></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 sharing-li"><div class="sharing-img"></div></div>').click(function () {
                    open_popup(
                        "https://www.linkedin.com/shareArticle?mini=true&url=" +
                            encodeURIComponent(document.location.href) +
                            "&title=" + encodeURIComponent($(document).find("title").text()),
                        750,
                        400,
                        true
                    );
                })
            );
    });
</script>