Widget Tumblr LastFM et Ajax en Cross Domain
J'ai voulu ajouter à mon Tumblr un nouveau widget affichant mes coups de coeur musical sur LastFM. Pour cela j'ai :
- Besoin de récupérer le flux rss sur LastFM
- Le parser
- Afficher une liste des n derniers coup de coeurs
- Intégration dans votre template Tumblr
1 - Récupération du flux J'avais réalisé en local un code javascript qui marchait très bien, avec une XmlHttpRequest qui récupérait en GET le contenu du flux rss.
Mais une fois inclut dans mon Template ça ne fonctionnait plus, la faute au Cross Domain qui n'est pas autoriser dans la version 1 de XmlHttpRequest.
Après avoir chercher divers solutions, je suis tombé sur le site du zéro avec une explication simple, utiliser le level 2 de XMLHttpRequest ou la version Microsoft disponible dans IE8.
J'ai donc modifier mon code en utilisant l'exemple du site du zero pour arriver à ça :
function getXDomainRequest() {
var xdr = null;
if (window.XDomainRequest) {
xdr = new XDomainRequest();
} else if (window.XMLHttpRequest) {
xdr = new XMLHttpRequest();
} else {
alert("Votre navigateur ne gère pas l'AJAX cross-domain !");
}
return xdr;
}
window.onload = function(){
var xdr = getXDomainRequest();
xdr.onload = function() {
...
}
}
};Vous remarquerez l'utilisation de l'évènement onLoad sur l'objet xdr et non plus onComplete ou onSuccess (cet évènement n'est pas disponible dans le level 1 de XMLHttpRequest)
Cependant cela ne suffit pas car LastFM n'as pas mis en place d'Access Control, je n'ai donc pas l'autorisation de récupérer les informations.
Je passe donc par un fichier php hébérgé sur un de mes serveurs qui fait le relais en utilisant CUrl, il reçoit l'url du flux rss en paramètre et le retourne.
La requête Ajax aura le droit d'interroger ce fichier car je lui ai paramètré un Access-Control pour tout domaine distant. Voici le code de ce fichier :
<?php
header("Access-Control-Allow-Origin: *");
header('Content-Type: text/html; charset=utf-8');
header("content-type: application/xml");
$curl_handle = curl_init();
curl_setopt($curl_handle,CURLOPT_URL, $_REQUEST['url']);
curl_setopt($curl_handle,CURLOPT_CONNECTTIMEOUT,2);
curl_setopt($curl_handle,CURLOPT_RETURNTRANSFER,1);
curl_setopt($curl_handle,CURLOPT_GET,1);
$res = curl_exec($curl_handle);
curl_close($curl_handle);
print $res;
?>Une fois le fichier mis en place j'ajoute ces 2 lignes à mon code Javascript afin d'envoyer la requête asynchrone :
xdr.open("GET", "http://static.ptirouz.net/tumblr/ajax_rss_call.php?url=http://ws.audioscrobbler.com/2.0/user/" + lastfmUser + "/lovedtracks.rss");
xdr.send();2 - Parsage du flux RSS Maintenant que ma fonction javascript reçoit bien le contenu du flux rss, je dois le parser afin de garder uniquement les infos nécessaires.
On utilise bien entendu la réponse XMLHttpRequest au format XML à savoir this.responseXML, un bout de code vaut tous les mots :
var innerHTML = "";
var track, lien;
var bloc = this.responseXML.getElementsByTagName("item");
if (nbtracks > bloc.length) {
nbtracks = bloc.length;
}
for (i=0; i<nbtracks ; i++) {
var subxml = bloc[i].childNodes;
for (j=0; j<subxml.length; j++) {
switch(subxml[j].tagName) {
case "title" :
track = subxml[j].firstChild.nodeValue;
break;
case "link" :
lien = subxml[j].firstChild.nodeValue;
break;
}
}
innerHTML += "\t<li class=\"lovedtracks\"> a href="\""">" + track + "</a \r\n";3 - Affichage de la liste Il y a plusieurs façon de faire, j'a choisi celle qui consiste à remplir un objet DOM déjà existant dans le template HTML de ma page, comme ça mon code javascript peut rester tranquillement dans la balise Header et être non obstructif :
Dans mon javascript je met la touche finale :
document.getElementById('lastfm').innerHTML = innerHTML;4 - Intégration dans votre Template Tumblr Maintenant que toute les pièces sont réuni reste plus qu'à l'intégrer à votre thème.
a - Ajouter les champs de configuration du widget :
<meta name="text:LastFm User" content=""/>
<meta name="text:Loved Tracks Number" content="5"/>b - Initialiser les variable Javascript :
<script type="text/javascript"></script>
c - Ajouter la référence au script créer précédemment qui à été ajouté statiquement à Tumblr :
<script src="http://static.tumblr.com/9bfczhx/0iZkv3ppu/lastfmlovedtracks.js"></script>
d - Ajouter un peu de style :
ul#lastfm {
list-style-type:none;
margin:0px;
padding:0px;
}
li.lovedtracks
{
display:block;
margin-bottom:3px;
}
li.lovedtracks a {
color:#666;
}
li.lovedtracks a:hover {
color: #0099cc;
}e - Afficher la liste :
{block:IfLastFMUser}
<h3 class="title"> a href="http://www.lastfm.fr/user/{text:LastFm User}/library/loved">Mes coups de coeurs</a </h3>!
{/block:IfLastFMUser}f - Paramétrage :
Il ne reste plus qu'as paramétrer votre utilisateur LastFM et le nombre de coup de coeur à afficher dans l'onglet Appearance
Pour fini un petit aperçu sur mon site
