A couple weeks ago We Love were three years old. We made a website and produced a video. To help us measure the success of this campaign, we need the stats from a few different services. I jumped at the chance to make a really little mashup tool and I want to show you how I did it.
I’m going to use three APIs here, one from Twitter, Facebook & Vimeo. To make the tool that’s useful for everyone. I don’t want to use any part of the APIs that requires authentication so that limits me a little, but this is meant to be a simple tool after all.
The Basics
Here’s the three API urls that I’ll use. All return a JSON string or object.
http://urls.api.twitter.com/1/urls/count.json?url=http://www.welove72.com http://graph.facebook.com/http://www.welove72.com http://vimeo.com/api/v2/video/22889482.json
Core Concepts
All we’re really doing is getting a single intiger from each API call, and showing them on the page. This is how it’s done with jQuery using the getJSON function.
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=http://www.welove72.com&callback=?', function(tw) {
$("#twitter").html(tw.count);
});
There’s some other bits of JavaScript that get the form values & place them into the url string that we send to each API, and a total of three API calls
The Complete Code
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset="UTF-8" />
<title>Number of shares & retweets</title>
<style>
div, h1, h3, p {margin: 0; padding: 0;}
body {width: 400px; background: #eee; margin: 0 auto; font-family: Arial, sans-serif; font-size: 80%;}
h1 {text-align: center; margin: 30px 0;}
#stats {background: #fff; border: 1px solid #ccc; padding: 10px 20px; margin-top: 30px;}
#stats h3 {margin: 10px 0;}
#stats p {margin: 10px 0;}
</style>
</head>
<body>
<h1>Tweets, Shares & Views</h1>
<form action="" method="post">
<input placeholder="URL" id="url" type="text" value="http://we-are.welove72.com" size="45" />
<input placeholder="Vimeo ID" id="vimeo_id" type="text" value="22889482" size="10" />
<button type="submit">Check</button>
</form>
<div id="stats">
<h3 id="theurl"></h3>
<p id="twitter">Twitter: <span></span></p>
<p id="facebook">Facebook: <span></span></p>
<p id="vimeo">Vimeo: <span></span></p>
</div>
</body>
</html>$(function(){
// Make common elements vars. Speed!
var form = $("form"),
button = form.find("button"),
twitter_stat = $("#twitter span"),
facebook_stat = $("#facebook span"),
vimeo_stat = $("#vimeo span");
// When the button is clicked, get the form values & call the check_stats function
button.click(function(){
var url = form.find("#url").val(),
vimeo_id = form.find("#vimeo_id").val();
check_stats(url,vimeo_id);
return false;
});
function check_stats(url,vimeo_id) {
// Make each URL API call a var, for cleanliness mostly
var twitter = 'http://urls.api.twitter.com/1/urls/count.json?url=',
facebook = 'http://graph.facebook.com/',
vimeo = 'http://vimeo.com/api/v2/video/' + vimeo_id + '.json';
// Zero out the stats
$("#twitter span, #facebook span, #vimeo span").html("");
// Put the URL on the page, just for some visual clafication
$("#theurl").html(url);
// Call the Twitter, Facebook & Vimeo APIs & append data to page
// Adding '?callback=?' to the URL makes cross-domain requests work
// Note that returned object from Vimeo needs [0] to work.
$.getJSON(twitter + url + '&callback=?', function(tw) {
twitter_stat.html(tw.count);
});
$.getJSON(facebook + url + '?callback=?', function(fb) {
facebook_stat.html(fb.shares);
});
$.getJSON(vimeo + '?callback=?', function(vm) {
vimeo_stat.html(vm[0].stats_number_of_plays);
});
} // end check_stats
});Note that JSBin automatically adds in the JavaScript for you, which is why a reference to it in the HTML is missing.
You can see and run the complete code here, feel free to edit it & mess around. It’s well documented, so understanding it should be as easy as reading it through. Note that the inout fields default to show the URL & Vimeo ID we need for our stats. Check your own stuff!
Let us know what you come up with in the comments.
