Fork of "jquery.socialshareprivacy.js | 2 Klicks fuer mehr Datenschutz" http://www.heise.de/extras/socialshareprivacy/ that is extensible.
Home Page: http://panzi.github.com/SocialSharePrivacy/
Please provide a version which can run without jQuery.
Fir sites which do not use jQuery, it's not ideal that they must include jQuery because of SocialSharePrivacy.
I'm wondering if anyone has any thoughts on the feasibility of adding counts to buttons before the first click, if the 3rd party API supports that functionality. It would add an additional API dependency but could lead to higher interactivity as the counts are often a motivator. Has this feature been explored by anyone?
Thanks,
-marco
IMHO translated images as well as translation files should follow a stricter directory structure. I plan to add one more language and the folders are already starting to get cluttered.
I propose the following structure:
The translated images should not have a suffix anymore.
E.g.
socialshareprivacy/images/dummy_box_facebook_de.png
should be renamed to
socialshareprivacy/images/de/dummy_box_facebook.png
and not
socialshareprivacy/images/de/dummy_box_facebook_de.png
because the language name is already in the directory structure.
The same goes for the language files:
and again the files should no longer have a prefix:
l10n/jquery.socialshareprivacy.de.js
should be renamed to
l10n/de/jquery.socialshareprivacy.js
and not
l10n/de/jquery.socialshareprivacy.de.js
Please let me know what you think.
I can add a pull request if this description is accepted.
Hi,
in an SSL protected Site
causes a problem. Why is this script on your server anyhow?
Dummy image is 58x66. Actual size of the Reddit widget is 51x69.
I try to show only four services, namely Google Plus, Facebook, Mail, and Twitter.
The following minimal code generated here (http://panzi.github.io/SocialSharePrivacy/) works in Opera. However, in IE, Chrome, Firefox, all services are shown. What am I doing wrong? I suspect that the point in time when the code is called plays a role.
(I'm pretty much a JS newbie.)
<!DOCTYPE html>
<html>
<head>
<title>tryout</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="application/x-social-share-privacy-settings">{"path_prefix":"http://panzi.github.com/SocialSharePrivacy/","layout":"line","services":{"buffer":{"status":false},"delicious":{"status":false},"disqus":{"status":false},"flattr":{"status":false},"hackernews":{"status":false},"linkedin":{"status":false},"pinterest":{"status":false},"reddit":{"status":false},"stumbleupon":{"status":false},"tumblr":{"status":false},"xing":{"status":false}}}</script>
</head>
<body>
<div class="share" data-social-share-privacy="true"></div>
<script type="text/javascript">(function () {var s = document.createElement('script');var t = document.getElementsByTagName('script')[0];s.type = 'text/javascript';s.async = true;s.src = 'http://panzi.github.com/SocialSharePrivacy/javascripts/jquery.socialshareprivacy.min.autoload.js';t.parentNode.insertBefore(s, t);})();</script>
</body>
</html>
I have a multilingual site - greasyfork.org. Users can choose what language they browse in. The site is written in Rails, which combines all JavaScripts together into one compressed file in production mode.
I'm wondering how I can use SocialSharePrivacy with my site so that users will see it in their chosen language. I tried including all the JS for all the languages then specifying for example lang="en" on the insertion element, but I end up seeing stuff in Russian (presumably because it's last to load as it's last alphabetically). I also tried specifiying language: "en" in the socialSharePrivacy call, but still Russian.
Is there a way to make this work?
The tool allows the user to procatively activate one of the buttons for the whole website, but allowing the webmaster to decide that one activation of the button will enable the button for the whole site would be a nice feature.
It might be less privacy preserving, but it could be a better balanced option for websites hesitating to implement this tools because of its impact on users.
There are some layout issues in line mode:
If all buttons take more width than available, it wraps to another line, but usually the lines do not have enough vertical distance. I worked around that by specifying more height.
Another issue is that it in general tends to look rather ugly as the spacing is not the same for every button, e.g. the visual distance between switch and service button but also the visual distance between service button and the switch of the element right of that (this is maybe due to some buttons getting wider when activated).
And even if one tries to work around that by setting some specific common width (as in the screenshot), it still looks strange, because there is more white space on the right of the whole share block than on the left.
Is there any chance this plugin could support easily any responsive HTML responsive framework i.e Bootstrap or Zurb? Responsive social buttons are cool, but imho not so easy to create decently in the most of cases.
What would be the best approach for that?
Would it be possible to add an option to enable 1-click execution of actions? If a user clicks on the widget his or her intention is almost certainly to execute the action. A user has little reason to enable the widget and not perform the associated action (who wants to enable tracking?).
I would like to use this widget to help my users' privacy but I don't want to materially impact their experience using the site by implementing the surprising and annoying two-click behaviour.
The purpose of the alt attribute is to provide reasonable content when the image has not been loaded for whatever reason. More info in the spec.
alt values like "Tweet this"-Dummy are not appropriate. Just Tweet this would be better.
I tried all the services and in deactivated state, they all showed their dummy icon.
But after first click, some of them didn't show their active icon, but just disappeared (the switch at the left was ok, but right of it was just nothing).
It would be nice if there was a button for App.net. 😄
Where to update code in order to have Facebook Share opens in a new window popup as for example the twitter share does?
Not sure if this happened recently, but trying to enable Facebook or G+ on FF or IE reveals no joy.
Dear panzi,
I tried to build with build.sh, sadly it does not work for me:
What I did
$ ~/downloads> git clone https://github.com/panzi/SocialSharePrivacy.git
$ ~/downloads> cd SocialSharePrivacy/
$ ~/d/SocialSharePrivacy> ./build.sh -m facebook,gplus -l de -a off -c off
What I got:
created build/javascripts/jquery.socialshareprivacy.min.js
module.js:340
throw err;
^
Error: Cannot find module 'extend'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/home/frozen_byte/downloads/SocialSharePrivacy/join-trans.js:2:14)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
created build/javascripts/jquery.socialshareprivacy.min.de.js
copied images to build/images
copied images to build/images/de
my System:
Linux 3.12.5-1-ARCH i686
$ node --version
v0.10.23
$ uglifyjs --version
uglify-js 2.4.0
gg@oh[🤪]()
After I switched to use SocialSharePrivacy, I got a couple of complaints because the icons are so large... Any way to make them smaller?
the run of
./pack.sh -m twitter,flattr,gplus -l de
leads under Ubuntu 13.04 to the following:
created build/jquery.socialshareprivacy.min.js
created build/jquery.socialshareprivacy.min.autoload.js
./pack.sh: Zeile 114: node: Kommando nicht gefunden./usr/bin/uglifyjs:228
if (err) throw err;
^
Error: ENOENT, open '--compress=warnings=false'
nodejs is installed, so i linked it to node:
sudo ln -s /usr/bin/nodejs /usr/bin/node
which leads to:
created build/jquery.socialshareprivacy.min.js
created build/jquery.socialshareprivacy.min.autoload.jsmodule.js:337
throw new Error("Cannot find module '" + request + "'");
^
Error: Cannot find module 'extend'
at Function._resolveFilename (module.js:337:11)
at Function._load (module.js:279:25)
at Module.require (module.js:359:17)
at require (module.js:375:17)
at Object. (~/SocialSharePrivacy/join-trans.js:2:14)
at Module._compile (module.js:446:26)
at Object..js (module.js:464:10)
at Module.load (module.js:353:32)
at Function._load (module.js:311:12)
at Array.0 (module.js:484:10)/usr/bin/uglifyjs:228
if (err) throw err;
^
Error: ENOENT, open '--compress=warnings=false'
maybe the nodejs module 'extend' is missing:
npm install extend
but then pack.sh responses with:
created build/jquery.socialshareprivacy.min.js
created build/jquery.socialshareprivacy.min.autoload.js/usr/bin/uglifyjs:228
if (err) throw err;
^
Error: ENOENT, open '--compress=warnings=false'
don't know, if its a bug or something
At present when you click on the facebook like button, it does not show the comment box before posting it on your timeline. How do i make it display comment box when i click on like button, like in the standard example given on facebook?
how to hide sharing counts by default ?
It could be done via CSS, hiding per media, but would prefer to cut the counter even before it counts (preserves also bandwidth)
Are there any plans to have this as a module for popular web applications, like Drupal and Wordpress ?
I know that copy & paste of the piece of HTML is nice and simple, but if you want to encore preservation of the privacy of the users on your website, the extra step of not "pinging" googleapis & github could be nice.
The github pages site of this project suggests to use the jquery script from Google's CDN googleapis.com
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
This basically renders this plugin useless with respect to tracing by Google Inc. This link should be replaced with another link (maybe hosted by http://panzi.github.io/)
Your Fork adds nice functionallity to the original jQuery-Plugin. But I would like to see the option to add URIs for each service individually. Because I have a G+ page and a FB page and I would like to share to those. Is that possible? Let me know if I can help in any way.
Hello, thanks a lot for your great work!
I want to switch the social share button layout in dependency on screen-size.
I tried this by setting the data-layout attribute (box or line) dynamically by using the jquery attr. method:
$('#share').attr("data-layout","line");
I'm using this inside the enquire.js function that enables javascript media queries.
But i can't get it to work – the attribute changes, but the button layout doesn't.
How could i get it to work?
Best wishes
Carolin
Probably a ways out of scope for the project... but can't help asking. Is there any plan to build out a browser extension, so that these tracking buttons could be swapped out before the browser runs all over the internet reporting your viewing habits?
Thanks for taking up the challenge updating this old workhorse from 2011.
Some version number to track minor and major updates would be nice.
Cheers,
pepebe
Just to let you know I'm going to fork your plugin and try to get it running as a plugin for Known.
any advice or collaboration welcome. https://github.com/rikmendes/Social-Share-Privacy-Known
If you say something like
img {margin-left: auto; margin-right: auto;}
in your document css, the dummy share buttons will inherit these properties and look misaligned.
Since "canonical" meta is more designed for SEO, and "og:url" for sharing tools, I think it's better to take og:url before canonical.
(I could not fork the project, github error, file is https://github.com/panzi/SocialSharePrivacy/blob/master/javascripts/socialshareprivacy.js#L278)
I made a new flattr button for https://nsupdate.info/.
It is disabled by default, but if I switch it to enabled, it just tells "Error". The mouseover tells "Be the first one to donate."
But I don't see what's causing the "Error".
If a widget has changed (like #57) or if I want to add a new language, how would I go about creating a new placeholder image? Screenshot is with a specific browser/OS? Then apply some effect in some image editor software?
Document what needs to happen.
Some websites now have Google Translate widgets that allow the user to "click to translate this page into your language". These widgets have the same tracking effect as the social "share/like" buttons. Would it be possible for you to add the Google Translate widget to the supported buttons in SocialSharePrivacy?
Do you know of any other projects that already do this? (Searching didn't show anything, although maybe my choice of keywords wasn't very good.)
I believe the default text should read "Two clicks ..." instead of "2 clicks..." (same for the other languages). Designers are usually tought to spell out single-digit numbers as this looks nicer.
Again, I can provide a pull request.
Adding viadeo (http://www.viadeo.com) the European LinkedIn would be great !
Thanks for this really good plugin.
The auto detection of the page text that will be included in the share message includes the text added by the Social Share Privacy plugin. E.g.: http://fiji.sc/Fiji
Hi @panzi,
I am very interested on use your social share privacy system, but I am having problems to apply this to my Wordpress theme. I think that I am doing everything correctly, but there is something that it doesn't work.
In my functions file I have loaded every javascript file needed:
$(document).ready(function () {
$('.share').socialSharePrivacy();
});Finally, where I want to load the buttons I have that:
<div class="share"></div>I think that I have follow your instructions correctly, but I don't know what it's happening. I build the code with build.sh (Facebook, Twitter, G+ and Linkedin, with spanish language).
I hope that you, or anyone that know about it, can help me.
Thanks in advance.
Regards, Iván
When using global settings via <script type="application/x-social-share-privacy-settings">, the script settings.js throws an error in IE8.
I changed line 17 from:
var settings = (new Function('return ('+$.text(this)+');')).call(this);
to
var settings = (new Function("return (" + this.text + ");")).call();
Now it works fine in IE8. Testet in IE8 and Safari. Other browsers are not yet tested.
This is what I'm getting (on firefox):
Load denied by X-Frame-Options: https://accounts.google.com/ServiceLogin?... does not permit framing.
Maybe they've changed their API or something?
It would be useful, if i could configure an absolute path to the stylesheet and the images to use the plugin for generated static websites.
If you put your social buttons near the bottom of the page, the settings div appears mostly off-screen. If you go to use the scrollbar to see it, it disappears and you can't scroll any more. You have to figure out that you have to scroll while keeping your mouse hovering on the settings div.
One solution could be to open the div "upwards" if it's near the bottom of the screen.
How do I open the social link in a new browser tab? I don't find any options for this.
If this option is not present at the moment, where do I have to change the code to make that happen?
on http://panzi.github.com/SocialSharePrivacy/ the third switch icon above "Before activation this button doesn't send information to a third party." is the active icon, not the inactive
please change it
Every module has a switch to activate, before the user is able to press the button itself. Why has the Facebook Share Button no switch? I think this button is the only exception, right? Is there anything I've missed?
cheers
Kevin
I'm implementing this in a project, but will convert graphics (toggle, socialmedia graphs) to SVG to display well on every device.
Two clicks for more privacy: The Buffer button will be enabled once you click here. Activating the button already sends data to Buffer – see i.
I think this is too much info to show on every toggle. What if it was just something like:
Click to enable the Buffer button, then click the button to share.
If people are wondering what it's all about, they can easy find the i button themselves.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.