Design Chemical

jQuery Plugin – Social Share Buttons

For the WordPress version please see – WordPress Plugin – Slick Social Share Buttons

Overview

The jQuery Social Share Buttons plugin makes it very easy to add the main social networking share buttons to any website – add facebook like, tweet button, google +1, google buzz, linkedin, digg, stumbledupon & pinterest.com pinit buttons in a floating panel.

The plugin options give you full control of position of button panel, size of social media buttons, display order and whether to show or hide the floating or sticky panel on page load.

Quick Start

1. The HTML

Very easy to use with the default settings – simply add a div tag with an ID. The tag can be placed anywhere since the buttons will be floating to the side. We suggest that to minimise any delays in page loading caused by the button scripts that the tag be placed just before the closing body tag.

<div id="social-share"></div>

2. Include the jQuery Files

Add the jQuery easing plugin for the floating animation as well as the social share plugin:

<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.social.share.1.2.min.js"></script>

3. The CSS

The CSS is fairly straightforward – just a few CSS rules to style the floating panel:

.dc-social-float .tab {
cursor: pointer;
height: 38px;
margin-left: -1px;
}
.dc-social-float .dc-social-float-content {
background: #fff;
border: 1px solid #bbb;
padding: 5px 5px 0 5px;
text-align: center;
}
.dc-social-float .dc-social-float-content {
border-radius: 5px; -webkit-border-radius: 5px;
}
.dcssb-btn {margin-bottom: 5px;}

4. Initialise The Social Share Buttons Plugin

To initialise the plugin using the default options, which will add all of the buttons, simply add the following code to the head of your document. Change #social-share to the ID used in your earlier div tag:

jQuery(document).ready(function($) {
    $('#social-share').dcSocialShare();
});

Options

Social Share Buttons Plugin Defaults

The jQuery social share plugin defaults are:

var defaults = {
    classWrapper: 'dc-social-float',    // Class of wrapper
    classContent: 'dc-social-float-content',    // Class of content
    width: 70,    // Width in pixels of button panel
    idWrapper: 'dc-social-float-'+$(this).index(),    // ID for button panel
    location: 'top',    // location of panel - options are top/bottom
    align: 'left',    // alignment of panel - options are left/right
    offsetLocation: 50,    // number of pixels from top/bottom
    offsetAlign: 50,    // number of pixels from left/right
    center: false,    // set to true to position from center of page
    centerPx: 0,    // number of pixels offset from center
    speedFloat: 1500,    // speed of floating animation in ms
    speedContent: 600,    // speed of sliding panel in ms
    disableFloat: false,    // set to true to disable floating animation
    tabText: '<img src="images/tab_share.png" alt="Share" />',    // tab text (or image)
    classTab: 'tab',    // class of button tab
    classOpen: 'dc-open',    // CSS class for external link to open panel
    classClose: 'dc-close',    // CSS class for external link to close panel
    classToggle: 'dc-toggle',    // CSS class for external link to toggle panel
    twitterId: '',    // Twitter username
    image: '',    // Add image URL to include default image for google buzz & pinit buttons
    size: 'vertical',    // Button size - options are 'vertical', 'horizontal' and 'none' (none does not include count box)
    autoClose: false,    // set to true to auto-close button panel
    loadOpen: true,    // set to true to open panel on page load
    tabClose: true,
    easing: 'easeOutQuint',
    buttons: 'twitter,facebook,plusone,linkedin,buzz,digg,stumbleupon,pinit'    // buttons to be added and order of buttons
};

Overiding Plugin Default Options

All of the default options can be overidden by passing an object into the social share buttons plugin method upon initialisation.

Changing the Social Media Buttons

To manage which buttons are to be added and the order in which they appear modify the “buttons” option – e.g. to add only tweet, facebook and linkedin buttons in that order use – buttons: ‘twitter,facebook,linkedin’.

All of the buttons are available in 3 sizes – vertical box with count (as seen on this website), a smaller horizontal button + count and a standard smaller button with no count. To change the size of the button use the “size” option with one of the following – ‘vertical’, ‘horizontal’ or ‘none’

Example below would add a floating panel positioned at the bottom right and containing a smaller facebook, google +1 and tweet button with no count box.

$(document).ready(function() {
    $('#social-share').dcSocialShare({
        location: 'bottom',
        align: 'right',
        size: 'none',
        buttons: 'facebook,plusone,twitter'
    });
});

Examples

• Demo – Default Settings
• Demo 1 – Change Button Location
• Demo 2 – Change Buttons
• Demo 3 – Buttons Closed on Page Load

Also see the plugin in action on the following designchemical.com pages:

• Design Chemical Home Page
• About Us
• Our Work

<script type="text/javascript">
$(document).ready(function() {
    $('#social-share').dcSocialShare({
        location: 'top',
        align: 'left',
        offsetLocation: 50,
        offsetAlign: 30,
        width: 80,
        center: true,
        centerPx: 577,
        speedContent: 600,
        speedFloat: 1600,
        disableFloat: true
    });
});
</script>

6 Comments

• 
  kiphughes November 20, 2011 at 3:45 pm

  Has this been tested to work with the latest version of jQuery?

  Reply
  • 
    admin November 21, 2011 at 4:03 am

    Hi,

    Yes it works with version 1.7

    Reply
• 
  Michael Barber November 23, 2011 at 11:41 pm

  I just downloaded this code and ran it “as is”,and I don’t see the Google Plus one showing up in the default. Even if I put plusone in the buttons of social 2, it still doesn’t show up.

  Reply
  • 
    admin November 24, 2011 at 12:34 am

    Hi,

    If you are running it locally then usually google plus doesnt work. try running it online on a valid URL

    Reply
• 
  kiphughes January 1, 2012 at 9:27 pm

  I’m using the same settings on this page for my site (plus I added “use strict”; and tabText: ”) .

  However, I need the bar to be moved a few pixels to the left. Is offsetAlign what I should be adjusting? I’ve been playing with its value and nothing seems to happen.

  Reply
  • 
    kiphughes January 1, 2012 at 9:31 pm

    Also, this page’s offsetLocation seems to adjust depending on which part the page is scrolled to. It’s not doing that on my page. It’s a feature I want.

    Reply