Hello, please sign in or register
You are here: Home

5 Simple social - Share site button

Sharing, Digging, Buzzing, Wall'ing... whatever you want to call it is a pretty omnipotent marketing tool and is as simple as a link. 

Following on from my simple Add to calendar links. I thought i'd see whats on offer in the way of blogging a webpage.

Usual suspects

Google
DEMO:  Buzz
API: http://code.google.com/apis/buzz/buttons_and_gadgets.html#hyperlink_api
Microsoft
DEMO Share with MessengerMessenger
API http://msdn.microsoft.com/en-us/windowslive/ff796213.aspx
Yahoo
DEMO
API: http://buzz.yahoo.com/button
FaceBook
DEMO:
API http://developers.facebook.com/docs/reference/plugins/like
DEMO:   
API http://developers.facebook.com/docs/share
Twitter
DEMO:
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
Google http://www.google.com/buzz/post url message imageurl
Twitter http://twitter.com/share url text -
Microsoft http://profile.live.com/badge url title screenshot
Facebook 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

http://sandbox.knarly.com/js/share.htm

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
this is comment
assdfasfs
Created 16/08/12
share plugins
there's share plugins also. prefer use this for site. :)
Created 26/02/13
cmoutlet
s ralph lauren outlet Ray Ban Sunglasses,Ray Ban Outlet,Ray Ban Sale,Cheap Ray Bans,Cheap Ray Ban Sunglasses,ray ban sunglasses outlet,ray ban,rayb...
Created 21/10/15
oakleysunglasses
“I canada goose outlet think it doesn’t swarovski jewelry bode very
Created 21/01/16
linpingping
The michael--kors.org.uk next ralph lauren outlet day patriots jersey Mrs
Created 01/03/16
clibin
Tyrion 5c cases watched her ray ban sunglasses read. His timber...
Created 18/04/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
ninestab123
ninest123 One canada goose pas cher gucci outlet thing
Created 21/07/16
LEE2017
, This Nike Free 5.0 Mens became prefer Nike Air Max from
Created 07/04/17
wanglili
nike outlet coach outlet online michael kors outlet online...
Created 21/08/17
Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share