Licorize API: How to include Licorize’ bookmarks into your page

Did you know that Licorize has an API that you can use via javascript to get public bookmarks filtered by tags, projects, users?

If you are interested on showing your latest bookmarks inside your website, Licorize has a public API that let you retrieve them via a jsonp call.
On Licorize site there’s a section dedicated to the documentation quite exaustive; the API expose method to authenticate in Licorize via OAuth or XAuth, the GET and the SET methods (create, edit, delete strips) and few examples of use in Java and Objective-C/Cocoa.

But here I want to explain how you can insert public Licorize strips into your HTML page using the API via javascript (jquery).

First we have to define where the list of bookmark will be inserted into the DOM of our HTML page:

[sourcecode language=”html”]
<div id="licorize_links" class="feeds"></div>
[/sourcecode]

To retrieve the list of bookmarks from Licorize we need to make an ajax call to the proper API URL; this call will return a JSON object containing all the strips filtered by the parameters passed to the request. For example, if I want to get all my public strips, the URL will be:

[sourcecode language=”javascript”]
http://licorize.com/api/1/users/pupunzi/strips/list.jsonp
[/sourcecode]

Where:

http://licorize.com/api/1/ is the base API url
/users/ define the filter by user
/pupunzi/ is my user name in Licorize
/strips/ define the objects I want to get
/list.jsonp is the type of data to be returned

Some other example of URLs can be:

Get Licorize User Public Strips List: http://api.licorize.com/api/1/users/[username]/strips/list.jsonp
Get Licorize Public Project Strips List
: http://api.licorize.com/api/1/users/[username]/[projectName]/strips/list.jsonp
Get Licorize User Strips – in Visible Projects – Filtered By Tag: http://api.licorize.com/api/1/users/[username]/tags/[tagName]/strips/list.jsonp
Get All Licorize Strips – in Visible Projects – Filtered By Tag: http://api.licorize.com/api/1/tags/[tagName]/strips/list.jsonp

The request needs some other parameters that we will pass as JSON object data:

[sourcecode language=”javascript”]
var req = {
"embedded": "yes", // define the type of use of the strips
"millis": 0,
// 0 means from now; it is a value int in milliseconds that define the date of the last saved strip we whant to get
"limitResultTo": 10,
// is the number of strips we want to get
"orderBy": "asc"
// or "desc" define the order of the retried strips
};
[/sourcecode]

Here is the AJAX call:

[sourcecode language=”javascript”]
$.ajax({
url: "http://licorize.com/api/1/users/pupunzi/strips/list.jsonp",
data: req,
dataType: ‘jsonp’,
jsonp: "__jsonp_callback",
jsonpCallback: "listCallback",
success: function(response) {
var strips= response.strips;
//here goes the code to parse the response…
}
});
[/sourcecode]

The JSON that will be returned (response) will contain several information; the part of this response we need for our scope is response.strips.

Each strip element contains all the DATA of the strip as JSON object:

[sourcecode language=”javascript”]
{"type":"BOOKMARK",
"id":3153587,
"position":0,
"millis":1305145392843,
"lastMod":1305153539000,
"creator":"Matteo Bicocchi",
"title":"Free Music Archive: Experimental",
"url":"http://freemusicarchive.org/genre/Experimental/",
"tags":"experimental, music",
"teamName":"Web technology – resources",
"ownerName":"Matteo Bicocchi",
"gravatarUrl":"http://www.gravatar.com/avatar/03604fe1ab8aedd7fd69ba097439593c?s=40&d=identicon",
"thumbUrl":"http://s3.amazonaws.com/Licorize/thumbs/freemusicarchive.org/3b54a64dd887b428ded06cdf7850cdf0.jpg"}
[/sourcecode]

Inside the “success” callback of the AJAX call you can now loop the strips, get the desired parameters and create the HTML structure:

[sourcecode language=”javascript”]

var LicorizeContainer= $("#licorize_links");

for (var i in strips) {
var stripContainer= $("</pre>
<div>").addClass("stripContainer");</div>
<pre>

var strip = strips[i];
var stripTitle= $("</pre>
<div>").addClass("stripTitle").html(strip.title);</div>
<pre>
stripContainer.append(stripTitle);
var …

LicorizeContainer.append(stripContainer)
}

[/sourcecode]

Now that all the strips in the response have been parsed you can style them via CSS as you need.

For a working demo:

http://jsfiddle.net/pupunzi/62beA/

to know more about Licorize:

http://licorize.com