Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook,
Twitter, Google Plus (with PHP script) and more.
All sharing buttons are different, with Sharrre you can create uniform buttons to integrate with your designs.
With Sharrre, the API buttons are called on demand and once, regardless of how many buttons you have.
Download the latest version of Sharrre plugin.
If you experience any problems with bugs or requests, please go to the official Sharrre webpage at Github ›
You can also follow Sharrre on twitter and be notified of new Sharrre version releases:
Sharrre is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.
<div id="demo1" data-url="http://sharrre.com" data-text="Make your sharing widget with Sharrre (jQuery Plugin)" data-title="share"></div>
$('#demo1').sharrre({ share: { googlePlus: true, facebook: true, twitter: true }, buttons: { googlePlus: {size: 'tall', annotation:'bubble'}, facebook: {layout: 'box_count'}, twitter: {count: 'vertical', via: '_JulienH'} }, hover: function(api, options){ $(api.element).find('.buttons').show(); }, hide: function(api, options){ $(api.element).find('.buttons').hide(); }, enableTracking: true });
.sharrre .box{ float:left; } .sharrre .count { color:#444444; display:block; font-size:17px; line-height:34px; height:34px; padding:4px 0; position:relative; text-align:center; text-decoration:none; width:50px; background-color:#eee; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .sharrre .share { color:#FFFFFF; display:block; font-size:11px; height:16px; line-height:16px; margin-top:3px; padding:0; text-align:center; text-decoration:none; width:50px; background-color:#9CCE39; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .sharrre .buttons { display:none; position:absolute; margin-left:50px; z-index:10; background-color:#fff; } .sharrre .button { float:left; max-width:50px; margin-left:10px; }
$('#share').sharrre({ share: { googlePlus: true, facebook: true, twitter: true }, url: 'http://sharrre.com/' });
Info With jQuery 1.7 or higher.
Name | type | default | description |
---|---|---|---|
className | string | 'sharrre' | css class name |
share | function | [default] | activate social counter, see default: share: { googlePlus: false, facebook: false, twitter: false, digg: false, delicious: false, stumbleupon: false, linkedin: false, pinterest: false } You can choose order of buttons, you just need to put social name in the order that you want |
template | string | '' | if you need to personalize renderer template (see example 2) |
title | string | '' | attribute for title text |
url | string | document.location.href | attribute for url |
text | string | document.title | attribute for text to use with sharing buttons |
urlCurl | string | 'sharrre.php' | location of your PHP script for Google Plus, Stumbleupon, Pinterest until find other solution (thanks Google!), set to empty string if you want to use Google Plus button without counter |
count | function | {} | attribute for retrieving the counter by social network, see example 4 |
total | number | 0 | attribute with total number of sharing |
shorterTotal | boolean | true | format number like 1.2k or 5M |
enableHover | boolean | true | allows the sharing buttons |
enableCounter | boolean | true | you can disable the counter, see example 5 |
enableTracking | boolean | false | allows tracking social interaction with Google Analytics |
hover | function | {} | function for personalize hover event |
hide | function | {} | function for personalize hide event |
click | function | {} | function for personalize click event |
render | function | {} | function for personalize render event |
buttons | function | [default] |
personalize social network buttons (enableHover must be true), see default and example 3: 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' } |
Open popup for social network and add tracking if it enable.
click: function(api, options){ api.openPopup('facebook'); }
Ssimulate a click when you use personalize click event, see example 1.
click: function(api, options){ api.simulateClick(); }
Template by default.
<div class="box"><a class="count" href="#">{total}</a><a class="share" href="#">Your title</a></div>