Create Your Own Share Buttons With Sharrre

People are now members of multiple social networks be it Facebook, Twitter, Google Plus, Linkedin etc.

All of these social networks have created their own button which makes it really easy for your visitors to share the current page with their friends and followers.

Facebook Like Button

Twitter Tweet Button

Google Plus +1 Button

Everyone knows what these buttons look like, this is good as people understand how to use them and what they will do. People see these all over the web and use them quickly and easily to share content online.

But with every website using the same buttons they aren't very original. If you have a very creative website, you should want to show that you can be original with all areas of your site.

Why not create your own Social sharing buttons?

The reason is because these social sharing buttons comes with a social proof feature, showing you exactly how many other people have shared this page. If your content is shared a lot on the social networks you want to show this off to your visitors, when people see other people have shared this...they want to share it.

Therefore if you want to make your own social sharing buttons you really need to include this feature of displaying how many shares your page has.

This is where a jQuery plugin called Sharrre can help, this plugin is designed to simulate all the major social networks share buttons but will separate up the button into different HTML elements to make it easier to style.

This turns a div into a button and a div with a counter so you can style them separately.

Sharrre jQuery Plugin

Sharrre - A plugin for sharing buttons

Using sharrre you can create your own social share buttons to fit your own designs. Using sharrre the API to get the social buttons are called when you need them and are called only once.

The social APIs available with sharrre are:

  • Google Plus
  • Facebook
  • Twitter
  • Digg
  • Delicious
  • StumbleUpon
  • Linkedin
  • Pinterest

You will have access to create buttons with counts for the above social networks. Other features you get with Sharrre is Google Analytics tracking, this adds a click event on your social buttons so you can see these stats in Google Analytics.

Browser Support

Sharrre has been testing on all the modern browsers.

  • Latest version of Chrome and Safari
  • Firefox version 4 and above
  • Internet Explorer 6 and above
  • Opera 11

Download

To download the latest version of Sharrre you can get it from Github, also any bugs you find with the plugin can be tracked on Github.

Download Sharrre

How To Use Sharrre Plugin

Sharrre can be used just like any other jQuery plugin, just include it on the page you want to use it and a sharrre jQuery object is created for you to use on your HTML elements.

This is the simplest way of using sharrre to be able to share the page on Google plus, Twitter and Facebook.

$('#share').sharrre({
  share: {
    googlePlus: true,
    facebook: true,
    twitter: true
  },
  url: 'http://www.paulund.co.uk/'
});

The HTML can be as simple as a div with the ID of share.

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

There are more options available with the sharrre plugin these are:

  • className - Define the class name to add
  • share - Define which social networks to use.
  • template - Define your own HTML to be rendered.
  • url - URL to be shared
  • text - Text to be used with the sharing buttons
  • urlCurl - Use your own PHP script to get the count of shares.
  • count - To count the amount of shares
  • total - Total number of shares
  • shorterTotal - A boolean value to shorten the number of total shares to 1.2M format.
  • enableHover - A boolean value to allow hover on sharing buttons
  • enableCounter - A boolean value to disable the counter.
  • enableTracking - A boolean value to enable Google analytic tracking.
  • hover - Define function to run on hover
  • hide - Define a function for hide event
  • click - Define a function for click event
  • render - Define a function for render event
  • buttons - Define behaviour for social buttons.
    googlePlus : {  //http://www.google.com/webmasters/+1/button/
      url: '',  //if you need to personnalize button url
      size: 'medium',
      lang: 'en-US',
      annotation: ''
    },
    facebook: { //http://developers.facebook.com/docs/reference/plugins/like/
      url: '',  //if you need to personalize url button
      action: 'like',
      layout: 'button_count',
      width: '',
      send: 'false',
      faces: 'false',
      colorscheme: '',
      font: '',
      lang: 'en_US'
    },
    twitter: {  //http://twitter.com/about/resources/tweetbutton
      url: '',  //if you need to personalize url button
      count: 'horizontal',
      via: '',
      hashtags: '',
      related: '',
      lang: 'en'
    },
    digg: { //http://about.digg.com/downloads/button/smart
      url: '',  //if you need to personalize url button
      type: 'DiggCompact'
    },
    delicious: {
      url: '',  //if you need to personalize url button
      size: 'medium' //medium or tall
    },
    stumbleupon: {  //http://www.stumbleupon.com/badges/
      url: '',  //if you need to personalize url button
      layout: '1'
    },
    linkedin: {  //http://developer.linkedin.com/plugins/share-button
      url: '',  //if you need to personalize url button
      counter: ''
    },
    pinterest: { //http://pinterest.com/about/goodies/
      url: '',  //if you need to personalize url button
      media: '',
      description: '',
      layout: 'horizontal'
    }

To use Sharrre we first need to download the sharrre plugin and include it onto the page.

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="./js/jquery.sharrre-1.3.3.js"></script>

Hover Over Share Button

The above shows how you can use the sharrre plugin but now lets create some examples of different share buttons using the sharrre plugin.

sharrre2

In this example we are going to create a share button which on the hover event will display all the social share buttons.

First we start off with the HTML to create the button.

<div id="demo1" data-title="Share Paulund" data-url="http://www.paulund.co.uk" ></div>

The reason the HTML is so simple is because the sharrre plugin will create all the HTML and social buttons we need for the page.

Next we create the jQuery for the sharrre object, which we are attaching to the demo1 elements. We define what share buttons we want to add by using the share property.

You can define how you want the buttons to looks by using the buttons property, we are making all the buttons vertical.

On the hover event of the share button we want to make the other buttons display, so we search for the all divs with a class of buttons and use the jQuery function show() to display the buttons.

$('#demo1').sharrre({
      share: {
        googlePlus: true,
        facebook: true,
        twitter: true,
      },
      buttons: {
        googlePlus: {size: 'tall'},
        facebook: {layout: 'box_count'},
        twitter: {count: 'vertical'}
      },
      hover: function(api, options){
        $(api.element).find('.buttons').show();      
      },
      hide: function(api, options){
        $(api.element).find('.buttons').hide();
      }
    });

That's all the code you need to display the social buttons on the hover event.

Now we can style the button in anyway we want for this example we are creating a long button with the counter to the right of the button.

#demo1.sharrre {
width:100%;
display:inline-block;
}
#demo1.sharrre .box{
    float:left;
}
#demo1.sharrre .share {
    color:#FFFFFF;
    display:block;
    font-size:13px;
    height:60px;
    line-height:60px;
    padding:0;
    text-align:center;
    text-decoration:none;
    width:200px;
    background:#a1a1a1;
    float:left;
  }
  #demo1.sharrre .count {
    display:block;
    font-size:17px;
    line-height:54px;
    height:54px;
    padding:3px 0;
    position:relative;
    text-align:center;
    text-decoration:none;
    width:50px;
    background-color:#eee;
    border-radius:4px; 
    color:#000;
    float:right;
  }
  #demo1.sharrre .buttons {
    display:none;
    float:left;
    width:300px;
  }
  #demo1.sharrre .button {
    float:left;
    max-width:50px;
    height:50px;
    margin-left:10px;
  }

Demo

Count Amount Of Shares

In this example we are not going to create a button that allows visitors to share the current page but we are going to create a tutorial that will display the total amount of shares this page has.

The sharrre plugin will use all the different network APIs and count the amount of shares a page has, we can then display this value inside a HTML element.

First we create the HTML, again this is very simple it's just going to be div with an id.

<div id="demo2"></div>

For the sharrre object all we need to do is define what social networks we want to get the amount of shares and the url we want counted.

$('#demo2').sharrre({
      share: {
        googlePlus: true,
        facebook: true,
        twitter: true
      },
      url: 'http://www.paulund.co.uk',
      enableHover: false
    });

That's all we need to do to get the total shares for a page.

To style this button we are using the same box as in the first demo.

#demo2.sharrre {
    width:100%;
    display:inline-block;
}
#demo2.sharrre .box{
    float:left;
}
#demo2.sharrre .count {
    display:block;
    font-size:17px;
    line-height:54px;
    height:54px;
    padding:3px 0;
    position:relative;
    text-align:center;
    text-decoration:none;
    width:50px;
    background-color:#eee;
    border-radius:4px; 
    color:#000;
    float:right;
}

Demo

Example Of Creating Your Own Buttons

In this example we are going to create our own social share buttons for Twitter, Facebook and Google plus.

For the HTML we are going to create a wrapper div, with 3 divs inside which we are going to use for the social share buttons.

<div id="specific_buttons">
	  <div id="twitter" data-url="http://www.paulund.co.uk" data-title="Share on Twitter"></div>
	  <div id="facebook" data-url="http://www.paulund.co.uk" data-title="Share on Facebook"></div>
	  <div id="google" data-url="http://www.paulund.co.uk" data-title="Share on Google Plus"></div>		</div>

Because these are using 3 different buttons we need to create 3 different sharrre objects one for each button.

They are all similar except they will be using different social networks.

$('#twitter').sharrre({
      share: { twitter: true },
      url: 'http://www.paulund.co.uk',
      enableHover: false,
      enableTracking: true,
      template: '<a class="box" href="#"><div class="count" href="#">{total}</div><div class="share"><span></span>Tweet</div></a>',
      buttons: { twitter: {via: 'paulund_'}},
      click: function(api, options){
	    api.simulateClick();
	    api.openPopup('twitter');
	  }
    });

    $('#facebook').sharrre({
      share: { facebook: true },
      url: 'http://www.paulund.co.uk',
      enableHover: false,
      enableTracking: true,
      template: '<a class="box" href="#"><div class="count" href="#">{total}</div><div class="share"><span></span>Like</div></a>',
      click: function(api, options){
	    api.simulateClick();
	    api.openPopup('facebook');
	  }
    });

    $('#google').sharrre({
	  share: {
	    googlePlus: true
	  },
	  template: '<a class="box" href="#"><div class="count" href="#">{total}</div><div class="share"><span></span>+1</div></a>',
	  enableHover: false,
	  enableTracking: true,
	  click: function(api, options){
	    api.simulateClick();
	    api.openPopup('googlePlus');
	  }
	});

When styling this example we are just going to style all the buttons exactly the same, but we can style them in anyway you want.

On the click event (:active) of the buttons we are going to add a box-shadow to the top of the buttons to simulate the button being pressed in.

/*Share*/
#twitter.sharrre,
#facebook.sharrre,
#google.sharrre
{
  float: left;
  margin:0 10px;
  text-align: center;
}

#twitter.sharrre a,
#facebook.sharrre a,
#google.sharrre a
{
  text-decoration: none;
  color:#555;
}

#twitter.sharrre .count,
#facebook.sharrre .count,
#google.sharrre .count
{
  background:#3274d7;
  padding:10px;
  color:#eee;
  min-width: 60px;
}

#twitter.sharrre .share,
#facebook.sharrre .share,
#google.sharrre .share
{
  border:1px solid #555;
  padding:5px;
}

#twitter.sharrre .share:active,
#facebook.sharrre .share:active,
#google.sharrre .share:active
{
  box-shadow:inset 0 5px 5px rgba(0,0,0,.5); 
}

Demo

Advertise here

Comment