With the advancements in Social Media in the past decade, many of us now have “Social homes” on the internet. Personally I use Twitter and Facebook. These web services offer ways to interact with them and extract data from them without visiting the site itself. This is called an API (or Application Programming Interface).
You can think of an API as something like an RSS feed. If you read webdesignerer through a feed reader like Google Reader, you know that you don’t even need to visit my site to read my content, because that data is being displayed in another way. In the case of RSS, it’s an XML file formatted in a very specific way. API’s are often served up as XML. XML is nice, but much like HTML, it needs to be parsed before you can really do anything with it.
JSON (JavaScript Object Notation) is what all the applications are using these days with their API’s as an alternative to XML. The nice part about JSON is that you don’t need to parse it in the same way you do XML. That data you get from a JSON comes back as an object that is ready to use.
Using APIs (jQuery and JSON)
jQuery provides a very simple way of retrieving these JSON objects.
$.getJSON(‘http://url-to-api.com’, function(data){
$.each(data, function(index, item){
// do stuff with each item
});
});
The code above hits the URL provided (you’ll need to replace that with a real URL to a real API that has real JSON of course) and then does a loop through each “item” and gives you a chance to do something with that item. I say “item” because while that is a common name that APIs use, you’ll need to be specific and accurate here as JSON provides very little in the way of error handling.
Putting it All Together on Your Page
Another reason to use jQuery is because of the simplicity. Let’s take a look at the code example for extracting recent “tweets” from Twitter and then using the built-in jQuery function append() to get them on the page.
$.getJSON(‘http://twitter.com/status/user_timeline/SamanthaRSelman.json?count=10&callback=?’, function(data){
$.each(data, function(index, item){
$(‘#twitter’).append(‘<div class=”tweet”><p>’ + item.text + ‘</p><p>’ + item.created_at + ‘</p></div>’);
});
});
This will put a new div of class “tweet” onto the page (inside the parent div of ID “twitter”) for each “item” in the object. Notice the “count” variable in the URL which Twitter provides. It is set at 10 which will return 10 items thus there will be 10 divs on the page. Inside of those div’s we have two paragraph elements. One with “item.text” and one with “item.created_at”. These will be the actual text of my last tweet and when I submitted it. Please note, replace my twitter name with yours, or else it won’t work.
Example of resulting HTML from one item:
<div>
<p>New post on the “webdesignerer” blog!</p>
<p>1 day ago</p>
</div>
Our project is going great! We can use our CSS skills to style this however we want. (Look forward to the next post, when I’ll give you some ideas on how to style up your website twitter feed!)
Furthering The Idea
Let’s make a div for our web page twitter feed. Then we’ll use our jQuery + JSON technique to fill it up.
Base HMTL:
<body>
<div id=”page-wrap”>
<div id=”twitter”>
<h1>Twitter Updates</h1>
</div>
</div>
</body>
Now here is the jQuery to extract and display all the data from Twitter:
<script type=”text/javascript” src=”js/jquery-1.2.6.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$.getJSON(‘http://twitter.com/status/user_timeline/SamanthaRSelman.json?count=10&callback=?’, function(data){
$.each(data, function(index, item){
$(‘#twitter’).append(‘<div class=”tweet”><p>’ + item.text.linkify() + ‘</p><p>’ + relative_time(item.created_at) + ‘</p></div>’);
});
});
});
</script>
Cleaning Up Twitter
There are two problems with the raw data that make the Twitter API stand out… in a bad way.
The full URL is there, but it’s just text, not a real anchor link.
The date appears as an ugly timestamp, not really readable text such as “2 days ago”.
So let’s fix it!
Linkify:
String.prototype.linkify = function() {
return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
return m.link(m);
});
};
relative_time:
function relative_time(time_value) {
var values = time_value.split(” “);
time_value = values[1] + ” ” + values[2] + “, ” + values[5] + ” ” + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() – parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
var r = ”;
if (delta < 60) {
r = ‘a minute ago’;
} else if(delta < 120) {
r = ‘couple of minutes ago’;
} else if(delta < (45*60)) {
r = (parseInt(delta / 60)).toString() + ‘ minutes ago’;
} else if(delta < (90*60)) {
r = ‘an hour ago’;
} else if(delta < (24*60*60)) {
r = ” + (parseInt(delta / 3600)).toString() + ‘ hours ago’;
} else if(delta < (48*60*60)) {
r = ‘1 day ago’;
} else {
r = (parseInt(delta / 86400)).toString() + ‘ days ago’;
}
So now instead of just putting “item.text” in your append statement, you can put “item.text.linkify()”. Also instead of putting “item.created_at” you can put “relative_time(item.created_at)”. If you have a problem with the code, liked the idea I presented here or have an idea, please don’t hesitate to leave a comment.
webdesignerer 