They have the same functionality as the official social sharing widgets, but they don't use cookies, don't load external iframes, and in fact never directly call the Facebook/Twitter servers. Not only are they more customizeable and more lightweight, these buttons give a damn about Your Damn Privacy™.

HOW TO CUSTOMIZE

1) Customizing links, labels, and share description.

You can change the text and links of a share button simply by adding data- attributes to the HTML. For example, this code...

<div class="s-s" 
     data-type="twitter" 
     data-link="http://www.catlateraldamage.com/" 
     data-label="you've cat to be kitten me right meow" 
     data-text="A first-person destructive cat simulator"> 
</div>

... will give you this button.

2) Customizing styles.

Because the share button is not inside an external iframe, you can directly modify its look simply by including a stylesheet! (protip: give the buttons id's to change their styles individually)

<style>
#please_dont_do_this{
	font-family:"Comic Sans MS";
	border-radius: 50px;
}
#please_dont_do_this #ss_label{
	background: url(img/rainbow.png);
}
</style>
<div id="please_dont_do_this" class="s-s"
	data-type="facebook"
	data-link="http://zombo.com/">
</div>

which gives you... uh... this.

You can also pass in an HTML template as a data- attribute. Here's a template for a very minimalist Twitter Share button.

<div class="s-s"
	data-type="twitter"
	data-text="Shake Vigorously"
	data-link="http://www.staggeringbeauty.com/"
	data-template="<a target='_blank' href='https://twitter.com/share?url={{link}}&text={{text}}'>tweet vigorously</a> ({{count}})">
</div>

The result:

3) Customizing APIs.

Whether it's requesting different stats, or building a social share button for a completely different site, or making a button that calls an API that only returns the number "8"... you can easily extend S-S to fit your needs.

To show this in action, a button that calls an API that only returns the number "8". The "API" in question is just a JSON file I posted on Pastebin. To change the requests, I create a new config object in the global object, SS_SOCIAL_API, like so:

<script>
window.SS_SOCIAL_API.stanley = {
	template: "<button style='font-size:30px' onclick='alert({{count}})'>{{label}}</button>",
	label: "The Stanley Parable Demo",
	requestURI: "http://pastebin.com/raw.php?i=eBHzdqUP&throwaway=",
	requestProperty: "count"
};
</script>
<div class="s-s" data-type="stanley"></div>

The result:

HOW IT PROTECTS PRIVACY

1) Proxy server calls

To see how many times a link has been shared, you can call the Facebook/Twitter APIs.

Twitter - http://urls.api.twitter.com/1/urls/count.json?url={{URL}}
Facebook - http://graph.facebook.com/?id={{URL}}

S-S protects your privacy by calling these APIs through a proxy server. (In fact, it has to, because of CORS issues when it comes to AJAX) By default, S-S uses the open source JSONProxy, and if you want, you can easily customize S-S to use a different proxy:

<script>
window.SS_PROXY_SERVER = "http://{{ALTERNATIVE_CORS_PROXY}}/?url=";
</script>

2) Static share links

The standard sharing widgets load up external iframes and set cookies in your browser, even if you're not logged in. Yeesh. In contrast, the one and only time S-S loads up Facebook/Twitter is when you click to share on Facebook/Twitter. Otherwise, it remains static and can't track you. When you want to share, S-S opens a popup to these links:

Twitter - https://twitter.com/share?url={{link}}&text={{text}}
Facebook - https://www.facebook.com/sharer/sharer.php?u={{link}}&t={{text}}

If you don't care about Share Counts or having a popup, you can avoid using S-S altogether and just use these links by themselves:

<a href="https://twitter.com/share?url=http://dmatthams.co.uk/gwd/&text=Wowwee, this was made in Google Web Designer!" target="_blank">Tweet about GWD</a>

Result: Tweet about GWD

3) Being open & customizeable

All of this would be pointless if you couldn't freely use, examine, and modify my code.
S-S is dedicated to the public domain using the Unlicense. With the code being open to the public, you can glance through my fairly short code (under 200 lines with whitespace and comments), and make sure it really does protect your privacy.

// Initialize S-S only after the rest of the page loads
window.addEventListener("load",function(){

	// Add stylesheet to top
	var style = document.createElement("style");
	style.innerHTML = SS_STYLE;
	document.head.appendChild(style);

	// Convert all S-S divs to share buttons
	var shareButtons = document.querySelectorAll(".s-s");
	for(var i=0;i<shareButtons.length;i++){
		convertToButton(shareButtons[i]);
	}

	// And, finally...
	notifyTheNSA();

},false);

Yup. Nothing suspicious there.

CONCLUSION

I love sharing information! But I should have control over what I share.

That control over your generosity is the difference between letting a friend crash at your place, and them breaking into your apartment... then raiding your fridge for cookies, leaving a personalized ad for Oreos, and exiting through a backdoor that they secretly installed in everyone's houses.

I'll be the first to admit, S-S isn't particularly complicated or clever or new. But that's exactly the point. It doesn't take that much extra effort to make the web a safer place, so we developers should do whatever we can to help, no matter how small.

How will you respect Your Damn Privacy™ today?

share this project for privacy, publicly

All code and text here has Zero Rights Reserved. Created by @ncasenmare.
I'm also making an open source HTML5 game called Nothing To Hide,
an anti-stealth game where you are your own watchdog.

Thank you for reading!

SOCIAL MINUS SPYING

QUICK START

HOW TO CUSTOMIZE

HOW IT PROTECTS PRIVACY

CONCLUSION

share this project for privacy, publicly