julienh / sharrre

Make your sharing widget! Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more.

jQuery Sharrre Plugin

Make your sharing widget! Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more. More information on Sharrre

Supported platforms

• Delicious
• Facebook
• Google+
• LinkedIn
• Pinterest
• Stumbleupon
• Twitter Share + Follow (See counter alternatives)
• Reddit
• Tumblr

Installing

You can use the jquery.sharrre.min.js file, all platforms are included in it.

If you want a smaller file and only use a limited number of social network, you can use these files from the src/js folder :

• jquery.sharre.js
• platform/platform.js

After that you can choose which platform you need and load them in your project.

Usage

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

Example

HTML

<div id="demo1" data-title="sharrre" data-url="http://sharrre.com" ></div>

JS

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

See example on official website

Dependencies

• jQuery 1.7
• Registration at OpenShareCount is mandatory if you want to get Twitter share counts via OpenShareCount (now that Twitter is no longer providing them)

Author

• Julien Hany
• Twitter (@_JulienH)
• Google+

Contributing

Any help is welcome, if you want some infos on how contribute, see the CONTRIBUTORS.md file.

License

The project is distributed under the MIT License

sharrre's Issues

Example 5

Bonjour Julien,

I like example 5, just the way it looks on your home page, with the counter and the button together. i.e without having to hover over the counter to see the buttons. I tried to play with it a little bit but I can't get it to work.

Can you help?

Merci !
Benoit

Buttons not appearing

I'm trying to put example 6, on the site, in my site. Since that are the buttons I used in my mockup.

But no matter what I do, the buttons won't appear. Not in Safari, not in Firefox and not in my editor Espresso.

I tried the source, of the example 6 page and the code on that page. I tried example 5, and the "official" version shown on the home page. But no buttons at all.

I have no idea why or what I'm doing wrong, I hope someone here can help me.

(ps. sorry for asking this, probably, dumb question)

I can't get Google Plus to show

I have the Twitter and Facebook buttons up on the site, but the Google Plus just doesn't want to show. I use the sharrre.php file, I tried multiple locations, I'm pretty sure the javascript finds the php file.

When I link it to the sharrre.php on the sharrre.com site, it works!

Might this be a setting my web host uses? And than of course, my question would be check setting.

Javascript Error on Mousover

Hello,

I've noticed this JS error which is also triggered on your very own site http://sharrre.com/...
Error: uncaught exception: Error: Permission denied for http://platform.twitter.com to get property Proxy.InstallTrigger

On my site I get the same error for both Twitter and Facebook. The error does not get generated every time and on my site it usually occurs on hover

Any ideas what is causing it and how to fix?

Thanks for the great plugin!

Tanya

urlCurl with different pages

Hi,

I just downloaded the plugin and it looks great! I hope it's going to work well.

Well it's not an issue I guess but more of a question...... I came across the urlCurl where I have to set the url to the page I use the button on when I understand it correctly. But how do I go about that when I have tons of pages where I use the button on??

Cheers

Set counters to 0

Hi,

Perhaps a dumb question, but I can't seem to find the answer.

I added the Twitter, Facebook and the Google + buttons to my site mockup. But the counts on the button aren't 0. How do I "reset" the counters, so they start at zero?

Thank you!

Different URL Does Not Compile

Hey,

I tried installing the new version and the facebook part works but it does not compile it together.

http://cl.ly/0D2K173E3L3C312O141m

Thanks for the help!

Can't get custom g+ button working with Example 1

Hi and thanks for your plugin!

Regarding Example 1 (http://sharrre.com/example1.html), I can get the 'Tweet' and 'Like' button rendered in my HTML page but the '+1' button isn't coming up.
I tried to display only the '+1' button but with no luck.

I don't have any Javascript error showing up in the console.
I call the jQuery lib, then your lib, the CSS, the HTML with the button tag and finally just above the button, I call your plugin using javascript.

Did I miss something? Did I do something wrong?

Many thanks.

Digg button problem

Hi,
there is a general problem with a Digg button. When you digg a link with multiple spaces in it, such as http://www.demotiviraj.se/s/777/Kupio+sam+si+krevet , it won't be shared correctly. Digg will report that this link is a bad link.

We thought that it was just a missing url encoding in sharrre but the problem remained after you released v. 1.2. where I believe url encoding is put. So there is not actually a problem in your script, however we wanted to explain the general problem that occurred that bothered us so perhaps if someone else reports something similar you know the answer.

The problem is that Digg process does url encoding 2 times, but their script which is located on http://widgets.digg.com/buttons.js uses replace function in non standard way like this: replace("+","%2b","g"). This works only in Firefox, and non other browser. It should be used like this by standard: replace(/+/g,"%2b") . It has more non-standard uses of replace function in the script.

We have reported it to Digg, but only on twitter. Meanwhile, we are using our own modified version.

Sharrre should not call "loadButtons()" in this particular case

In Plugin.prototype.init(), if options.enableCounter is false, sharrre calls loadButtons(). This is not the right conditional. The condition should that if the user has not supplied a template, then go ahead and call loadButtons(), otherwise don't, because sharrre users who are supplying their own templates for each button do not want loadButtons() called because that would create additional buttons that the user doesn't want.

Add alternative to curl

There are servers where curl is not available, so I think it would be good include file_get_contents in this cases. I think you can do it easily with these lines

if ($errmsg != '' || $err != '') {
$content = file_get_contents($encUrl);
}

Google+ Share Button?

Hey, do you have any plans to integrate the google+ share button which was recently released? (not the google +1 button)

show buttons and counter continuously

hi,

at the moment your example (simple integration) and example #3 on your website only shows the buttons on hover. i would like to be able to show the share buttons and counter at the same time and not via hover effect. how would this be accomplished? ideally i would like to use example #3, but always show the share buttons.
thanx

Facebook counter overlaps tweet button

I have recently used example 5 and set the buttons to be horizontal. But then the counter for the like button overlaps with the tweetbutton. Can this be avoided?

Furthermore somehow these 3 characters (​) are generated in the script but they are now where to be found in the original script so I guess they are generated somewhere.....

Facebook Like doesn't Likes

Hi Julien, this is an amazing plugin, congratulations!

I've stumbled upon a small issue: the facebook likes are not taken into account, despite the fact that the open graph shows them

http://graph.facebook.com/?id=http://themesrobot.com

do you know what could be causing the issue?

Cheers!

Type of license

What kind of license is this code? ¿Can I modify and distribute it? I'm trying to implement it as a module in PrestaShop, for free distribution, in fact I have already implemented it but now I'm interested in share it.

Thank you.

When no URL is provided, preventDefault should be used.

facebook: { url: '', //if you need to personalize url button }

When URL is empty, a hash (#) is added to the href attribute of the a tag. Instead it should not add a hash and just e.preventDefault on the "click" event.

    $(this.element).click(function(e){
      e.preventDefault();
      self.options.click(self, self.options);
      return false;
    });

Google +1 Button Not Showing

I know people have already asked this, but I have tried with no luck. I am trying to use a set of buttons identical to your Example One. I have configured everything, and added sharrre.php to my root. BUT, the Google +1 button is not showing up. The URL is http://pixelcakecreative.com/jesse/news/the-bar-is-coming-to-a-city-near-you/

As you can see the +1 button does not appear. I did try doing a test, by going to http://pixelcakecreative.com/jesse/wp-content/themes/J2/sharrre.php and it spits out "{"url":null,"count":0}"

If I tried typing in a URL it gives me a 404 error.

Any ideas?

Plugin not load and no error show..

Hi! i love your plugin but it won't work for me... is an small code.. no errors show but the plugin not appear
http://www.vousys.com/test.php
what could be the problem? can you help me?

thanks!

What URL to use as data-url?

Hi Julien,

great plugin!!!! But I'm not sure what URL I should use, maybe you could help? Sorry, not a technical problem, but I'm not too experienced with this: I have a Facebook app (like apps.facebook.com/myapp), a corresponding fanpage (like www.facebook.com/myapp) and then domain itself (like www.myapp.com). Currently I have the like-button on my fanpage but I don't know whether this makes sense. When i use www.facebook.com/myapp in your data-url this might not make sense for google+ users, right? So the best might be to use the domain as the data-url? If so, should i use it with http or https? Both is available as facebook requires https access. Maybe you have some tips?
Many thanks!!

Facebook Different URL

I have 1 question and one feature request.

Question:
Can I make it so the Facebook calls the likes from a different url then the main url. I changed the data-href="'NEWURL'" to the url I wanted and that worked for when you look at the Facebook button but it does not work for the over number.

Feature Request:
Add StumbleUpon

Thanks for your time and help.

Clicking Buttons causes page jump

When I click any of the share buttons, they work great, however, it jumps to the top of the page, as if I were clicking a href="#"

Typically I would use a return false in my jquery, but that doesnt seem like the correct method here. I noticed in your demo it doesn't behave like that. Any thoughts on how to disable the page jump on click?

Count with Pinterest is NaN

This is a result of Pinterest now returning '-' instead of nothing.

Choose the order of service

Hi,

I have a query that might be helpful.

Currently the service still appear in the same order. The idea is to make them appear according to their order of declaration.

For example, with this configuration Google Plus would appear in the last position:
$('#sharrre').sharrre({
share: {
facebook: true,
twitter: true,
googlePlus: true
}
});

I think the solution would be to replace line 250 :
this.options = $.extend( true, {}, defaults, options) ;

By this one :
this.options = $.extend( false, {}, defaults, options) ;

It is the good way ?

Thanks

pre-load buttons on page load with counter enabled?

Hi,

Thanks for this great plugin! I'm giving it a try, and it works smoothly.

One question: when counter is enabled, is there a way to load the individual buttons on page load, instead of on mouseover of the counter button? Loading (especially the facebook button) can take a while, so IMO it could improve user experience if the buttons are loaded in the background (while still offering the counter as first 'incentive' to share a page).

(How) Can this be done?

Best,

Ron

Sharrre not load!

I use http://sharrre.com/example1.html but on my Site It doesn't work. Ok, I'm not a Freak :) i don't know what i make wrong?

+ being stripped from data-title

Hello,

Great script. Thanks so much.

My last little issue is that all my google plus buttons just say 1 instead of +1.

If I alert $('this.element').data('title') it returns only 1 not plus one.

Perhaps jQuery is filtering it out?

Any help would be appreciated.

BTW this is on Chrome Mac OXS Lion if that matters, which it shouldn't really.

Thanks again.

-Vince

Manipulate FB ilike (image, title, desc)

Dear Julien

First, thanks for sharrre.com! Great plugin and I'm using it for my new portal. To my problem, at the moment I cannot manipulate image, title and desc content for Facebook ilike button. Everything works fine for Twitter and Google+ button. They are catching title and desc metatag from the current page. But Facebook seems to catch information from the root page. Not very useful. I just want, that Facebook catch all information from the current page, where the buttons are displayed + a defined thumbimage, which I provided before.

Here the page. Maybe is good for you to see my problem: http://bit.ly/AyfVKG

Thanks for your help in advance!

Stefan

Newsvine support

Could this be added?

Newsvine button information

I'm not sure this is an "issue", but ...

I would really like to see a facebook-comments counter-button featured here :-)

Problem with Get params

hi

i'm working with a php framework

and i can't have the json count with a get method : params url&type .

other alternative with a post method ? :)

FB share not like

Hello Julien, congratulations this is an amazing!
FB button share a link, is possible just like a link?

$('#facebook').sharrre({
share: {
facebook: true
},
template: '

{total}

Like

',
enableHover: false,
enableTracking: true,
buttons: { facebook: {action: 'like'}}, // <---------- don't work...
click: function(api, options){
api.simulateClick();
api.openPopup('facebook');
}
});

Google plus button breaks all buttons

Hi,

I have encountered a problem with Google plus button - I want to use Facebook, Twitter and Google Plus buttons. When I try this setting on localhost everything works just fine. But when I move it to my hosting nothing happens after I click on any button. But when I disable the Google Plus button everything else is back to normal, working just fine.

I thought that the problem might be the sharrre.php - I made sure permissions allow execution, I tried to put it to root, I tried to put it to that page's directory - http://www.simplyeasy.cz/war-on-procrastination/ - when I navigate to sharrre.php it returns {"url":null,"count":0}

Curl is enabled... I don't know what else could that be. No error message, no clue. I am afraid I will have to use Sharre without Google Plus.

I probably made some stupid mistake - If you have any idea what might be the problem I would really appreciate it.

Facebook ALL.JS invalid URL in the source

Line 128:
js.src = '//connect.facebook.net/'+sett.lang+'/all.js#xfbml=1';

should be
js.src = 'http://connect.facebook.net/'+sett.lang+'/all.js#xfbml=1';

The above does not display Facebook icon on copy-pasted http://sharrre.com/example5.html unless prefixed with HTTP.
Tested with jQuery 1.6 and 1.7. Mistery how does it load on Example 5.

Example on http://developers.facebook.com/docs/channels has HTTP prefix.
Example on http://developers.facebook.com/docs/reference/plugins/like does not have one but says something about "XFBML version".

Call to undefined function curl_init()

I've just installed the latest version for the first time and I'm trying to make the google plus button work but adding the php (no experience with php) file and testing it:

http://localhost/bob/miscellaneous/sharrre.php?url=http%3A%2F%2Fsharrre.com%2F&type=googlePlus

I get the following error:

Fatal error: Call to undefined function curl_init() in C:\inetpub\wwwroot\bob\miscellaneous\sharrre.php on line 53

Any suggestion?

Thanks for a great plugin.

Twitter Follow

Is there a way to change the twitter button from share to follow?

Webpage navigation

Hello. I'm sorry if this is the wrong place for this.

You navigation links go to "#downloads" etc.
When viewing the example1.html for example, the navigation now points to example1.html#downloads.

Put a forward slash before the hash symbol, and you should be good to go :)

PS. I'll definately use your plugin at episodecalendar.com in the next update.

Example 2

I'm loving the plugin and I'm trying to execute a version of example 2 but I'm having a problem - when I click on the links they don't open the popup window as they should. It might just be being a complete numpty but the example on the website doesn't work for me either.

Any ideas?

Cheers

Martyn

Feature Suggest

Hey just wanna say love the plugin and wanted to request you add stumbleupon to it.

Keep up the great work!

only loading once per page

I'm trying to loop this through out my "teaser section" in wordpress but it's only loading once (on the first teaser). I'm also trying to get the post url to feed through instead of the main url.

im using the basic code for testing right now

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="<?php bloginfo('template_url');?>/custom/sharrre/jquery.sharrre-1.3.2.js"></script>
 <script>
$(document).ready(function(){
    $('#sharrre').sharrre({
share: {
  googlePlus: true,
  facebook: true,
  twitter: true
},
url: 'http://sharrre.com'  });
 });
  </script>

&

<div id="sharrre">
  </div>

http://test.cornonthejob.com/

Disabled counter without buttons appearing

Hi,

First of all, thanks for you work. This plugin is very usefull.

But I've noticed that if you disable the counter (enableCounter:false), sharring buttons automaticaly appear. Even if you can hide them with CSS, it's a little bit anoying (in a case where you just use click functions on a custom element).

Is it possible to add a parameter to avoid it ?

Thanks.

Google+ not compiling

Bonjour again :)

I have installed your awesome script on a couple of sites and I run into a similar problem each time :
the google+ numbers are not added to the total count.
See here : http://bit.ly/zahEj4

Any clue?

Thanks!

Counter is causing 500 error - Google+

Hi, great plugin. Thanks for your hard work!

I found that when i tell sharrre to load the counter, the entire operation fails and none of the buttons load. I see some plain text (a number, and the title), but no other elements even get loaded into the sharrre div.

The only way to fix it was: enableCounter: false

Would love to be able to use the counter. I need to be able to fetch the count for individual networks, and was going to use the "options.count.googlePlus" method that you created. Unfortunately, they are just returning 'undefined' when the counter is disabled.

-Joe

Wordpress get_permalink not parsed to data-url

Hello,

Great plugin, but i'm having some issues implementing it on a site that happens to use Wordpress.

If I use in my loop to get the link to a post, data-url doesn't seem to like it and it won't get parsed into twitter etc. If I just replace it with a hand-written url then it works just fine.

I'm using the share button underneath each post (3 on a page) and want to use the permalink of the post rather than the current url.

Thanks!

facebook button doesn't work

Facebook button doesn't work

Share link with mail

Could we have a chance to get a feature to share with mail implemented?

Add support for HTTPS sites

Sharrre plugin hard-codes "http://" prefixes in URLs which generates browser warnings when Sharrre is used on HTTPS web sites.

The URLs used in the plugin code should be protocol-relative, such as //platform.twitter.com/widgets.js and //platform.linkedin.com/in.js.

Facebook Button Issue

Hey Julien,

With 1.3 I'm getting this console error when trying to render Facebook like buttons:

The "fb-root" div has not been created. -> connect.facebook.net/en_US/all.js:3

Uncaught TypeError: Cannot read property 'style' of undefined -> connect.facebook.net/en_US/all.js:25

Using jQuery 1.7.1 and tested in Mac Chrome & Mac Firefox.

Google Plus, I want to show only the button, not the counter

As my server can't process sharrre.php, I would like to show only the Google Plus button.
Reading the documentation I find the parameter "urlCurl" ("set to empty string if you want to use Google Plus button without counter"), but it isn't working, the console gives a "NetworkError: 404 Not Found" requesting the sharrre.php script and the button isn't displaying.
Am I doing something wrong?

Thanks

            $("span.googleplus").sharrre({
                share: {
                    googlePlus: true
                },
                enableHover: false,
                enableTracking: true,
                shorterTotal: false,
                template: '| <a class="icon" href="#">f </a><a class="count" href="#">{total}</a>',
                urlCurl: "",
                click: function(api, options){
                    api.simulateClick();
                    api.openPopup('googlePlus');
                }
            });

Different URL Does Not Compile

Just upgrade to 1.2.0 and fb is not compiling with the rest. It works if I used the default url but If i use the different url it will not compile and the old fix that you gave me last time did not work.