Sharing, Digging, Buzzing, Wall'ing... whatever you want to call it is a pretty omnipotent marketing tool and is as simple as a link.
Usual suspects
- DEMO:
Buzz
API: http://code.google.com/apis/buzz/buttons_and_gadgets.html#hyperlink_api - Microsoft
- DEMO:
Messenger
API: http://msdn.microsoft.com/en-us/windowslive/ff796213.aspx - Yahoo
- DEMO:
API: http://buzz.yahoo.com/button - DEMO:
API: http://developers.facebook.com/docs/reference/plugins/like
DEMO:
API: http://developers.facebook.com/docs/share - DEMO: Tweet
API: http://twitter.com/goodies/tweetbutton
...Less is More
Google Buzz, Microsoft and Twitter all have simple documented link generation so we can use plain old HTML for those die hard "i browse the web on Lynx" fans. This is great for designers as they're given creative freedom. For Bloggers who's denied use of script tags ultimately thwart self expression. And also for developers, like myself, who want to build an aggregator... which doesn't use every damn included script i can fid on the web.
I couldn't find a documentation on building the request from either Yahoo and Facebook API references. I also feel Yahoo (the once advocate of performance best practices) have committed heresy by suggesting inline scripts are used - but most of the demos i've seen from the other networks also suggest this.
Facebook's share functionality is very limited, and their 't' parameter is not working for me. Their Like button is very cool but uses iFrames, which Yahoo has something to say about.
More or Less
Despite My moan about proprietary scripts, facebooks, buzz, twitters etc... counters are a real winner and seems omnipresent across the web. The feature is a great way to share your vote of approval viral. Hear me now!
Whether the "Be the first of your friends to rate this page" in on FB's Like button will take off remains to be seen.... certainly Extra Strong Fungal Cream might be pushing it.
Marriage
In the rest of this article i am going to aggregate some of these services because frankly the script APIs dont/wont/I-can't-perceive working with my ajaxy html5 driven site toobify.com which i am putting together. Plus i have a perversion for performance and code ownership.
Querystring Attributes
From the API docs i've composed the following table to see what each API supports and their naming convention....
| Url | Message | Image | ||
|---|---|---|---|---|
| http://www.google.com/buzz/post | url | message | imageurl | |
| http://twitter.com/share | url | text | - | |
| Microsoft | http://profile.live.com/badge | url | title | screenshot |
| http://www.facebook.com/sharer.php | u | - | ||
| Yahoo | http://buzz.yahoo.com/vote/?from=pub | loc | headline | - |
Put into practice
We can provide the Share facility with our own code. E.g.
Code
<!DOCTYPE html>
<html>
<head>
<title>Share social</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
window.onload = (function(){ $('div.buttons') .append('<button data-href="http://www.google.com/buzz/post?url={$url}&message={$message}&imageurl={$image}" data-dimension="700x450">\ <img src="http://code.google.com/apis/buzz/images/google-buzz-16x16.png"> Buzz\ </button><button data-href="http://profile.live.com/badge?url={$url}&title={$message}&screenshot={$image}" data-dimension="900x500">\ <img src="http://img.wlxrs.com/$Live.SN.MessengerBadge/icon16wh.png" /> Messenger\ </button><button data-href="http://twitter.com/share?url={$url}&text={$message}" data-dimension="550x300">\ <img src="http://twitter.com/favicon.ico" /> Twitter\ </button><button data-href="http://www.facebook.com/sharer.php?u={$url}&t={$message}" data-dimension="550x300">\ <img src="http://facebook.com/favicon.ico" /> Facebook\ </button><button data-href="http://buzz.yahoo.com/vote/?language={$lang}&votetype=1&loc=${$url}&guid={$url}&assettype=text&from=pub" data-dimension="700x700">\ <img src="http://buzz.yahoo.com/favicon.ico"> Yahoo\ </button>') .find('button') .click(function(){ var a = { url : window.location.href.replace(/[\(\)]/g,''), message : document.title.replace(/\#.*/,''), // CAPTURE #, for some reason this ia a bug in IE image : $('meta[name=image_src]').attr('content'), lang : (window.navigator.browserLanguage||window.navigator.language) }; var w=800,h=500,m; if( $(this).attr('data-dimension') && ( m = $(this).attr('data-dimension').match(/[0-9]+/ig) ) ){ w = m[0]; h = m[1]; } var l = (screen.width/2)-(w/2), t = (screen.height/2)-(h/2); window.open( $(this).attr('data-href').replace(/\{\$(.*?)\}/ig, function(m,p1){ return (p1 in a)?encodeURIComponent(a[p1]):m; }), 'buzz', 'width='+w+'px,height='+h+'px,left='+l+'px,top='+t+'px,resizeable,scrollbars,location=1'); }); });
</script>
</head>
<body>
<div class="buttons"></div>
</body>
</html>
Count on it
Now all our buttons lack is the ability to show the counter... I poked around on my subject sites and found all but two of them were nicely geared up for jsonp request.
Demo
Code
// We can get the number of Buzz's from Google
$.getJSON('http://www.google.com/buzz/api/buzzThis/buzzCounter?url='+encodeURIComponent(url)+'&callback=?', function(o){
$('div.buttons button[data-href*=google]').append(o[url]);
});
// And the number of FaceBooks
$.getJSON('http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls=%5B%22'+ encodeURIComponent(url) +'%22%5D&format=json&callback=?', function(json){
$('div.buttons button[data-href*=facebook]').append(json[0].total_count);
});
// And the number of tweets
// HAD Trouble with the twitter caching locally and failing to return the number of tweets - hence Math.random().
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url='+encodeURIComponent(url)+'&noncache='+Math.random()+'&callback=?', function(json){
$('div.buttons button[data-href*=twitter]').append(json.count);
});
Comments
How can I get the stumbleup value
I've known the StumbleUpon support REST JSON but I can't get the views value, can you help me?
Created 23/12/10
modif
:-) delete yahoo buzz and add google+
Created 20/10/11
