in jQuery

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 [Tweet]( 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]( "Effective Use of Social Bookmarking On Your Blog") 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]( "Create A CSS 3D Push Button") 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]( "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: '' }); ``` The HTML can be as simple as a div with the ID of share. ```
``` 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 : { // url: '', //if you need to personnalize button url size: 'medium', lang: 'en-US', annotation: '' }, facebook: { // url: '', //if you need to personalize url button action: 'like', layout: 'button_count', width: '', send: 'false', faces: 'false', colorscheme: '', font: '', lang: 'en_US' }, twitter: { // url: '', //if you need to personalize url button count: 'horizontal', via: '', hashtags: '', related: '', lang: 'en' }, digg: { // 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: { // url: '', //if you need to personalize url button layout: '1' }, linkedin: { // url: '', //if you need to personalize url button counter: '' }, pinterest: { // 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. ``` ``` ## 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. ![]( "sharrre1")![sharrre2]( "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. ```
``` 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]( "How To Create Shiny CSS Buttons") 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()]( "jQuery 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 ![]( "sharrre3") 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]( "Get Twitter Followers From Twitter XML") 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. ```
``` 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: '', 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 ![]( "sharrre4") 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. ```
``` 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: '', enableHover: false, enableTracking: true, template: '
', buttons: { twitter: {via: 'paulund_'}}, click: function(api, options){ api.simulateClick(); api.openPopup('twitter'); } }); $('#facebook').sharrre({ share: { facebook: true }, url: '', enableHover: false, enableTracking: true, template: '
', click: function(api, options){ api.simulateClick(); api.openPopup('facebook'); } }); $('#google').sharrre({ share: { googlePlus: true }, template: '
', 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)]( "CSS3 Buttons With Pseudo Classes") 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](

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email