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. How do you install this into a self-hosted Wordpress theme?

    ReplyDelete
  2. 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 -