Sharrre: Social Sharing jQuery Plugin

Posted by : Magnus Tuesday, 19 June 2012

Stitches: An HTML5 sprite sheet generator
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.
Sharrre is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.
Simple integration:
HTML
1
<div id="demo1" data-url="http://sharrre.com" 
data-text="Make your sharing widget with Sharrre (jQuery Plugin)" 
data-title="share"></div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('#demo1').sharrre({
  share: {
    googlePlus: true,
    facebook: true,
    twitter: true
  },
  buttons: {
    googlePlus: {size: 'tall'},
    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
});
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.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;
}
Demo – Demo – Demo – Demo – Demo – Demo – Documentation and download

{ 2 comments... read them below or Comment }

  1. Joseph10 July 2012 at 20:15

    How do you install this into a self-hosted Wordpress theme?

    ReplyDelete
  2. Magnus16 July 2012 at 22:00

    you have to go into your own source code for your theme and add the css, html and javascript code to your own code.

    ReplyDelete

- Copyright © Bjonk Design -