Cela fait déjà quelques temps que TypePad a mis à votre disposition des API pour triturer ses données ou construire vos propres applications.
En plus des API historiques (ATOM, XML-RPC), TypePad dispose désormais d'un jeu d'API JSON qui simplifient grandement le retraitement des données publiées par ses membres.
TypePad est à la base une solution hébergée déjà très puissante (allez donc voir ce qu'arrivent à faire le LA Times ou Psychologies avec un simple TypePad Pro), mais avec ces nouvelles API, il est désormais possible de doter ses blogs et sites TypePad de nouvelles fonctions sans passer des heures à coder dans tous les sens (et sans habillage avancé !).
Pour illustrer mon propos, je vais vous montrer comment obtenir et afficher simplement 3 modules au travers de 3 tutoriels :
- un module des notes les plus commentées sur votre blog,
- un module de notes relatives à un sujet donné sur l'ensemble du réseau TypePad,
- un module des dernières personnes suivies par un utilisateur donné.
Pour mettre en oeuvre ces modules de votre côté, vous n'aurez pas besoin d'outillage spécifique, les modules pouvant être affichés dans n'importe quelle page html.
Par contre l'interrogation de l'API se fait en jQuery, il vous faut donc faire appel à ce script au préalable.
Un simple copier/coller de la ligne :<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
dans un module de type "Inclure votre propre HTML" pourra parfaitement faire l'affaire.
C'est parti !
Pour ce module, je vais faire appel à l'API posts-assets de TypePad.
Sa forme est la suivante :
/blogs/<id du blog>/posts-assets.js
L'id du blog peut être trouvée de plusieurs façons :
- lorsque vous consultez le panorama d'un blog, c'est l'ID barbare dans l'URL
http://www.typepad.com/site/blogs/<ID barbare>/dashboard - sur la partie publique du blog, c'est le même ID barbare visible dans la source HTML via le lien RSD
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.typepad.com/services/rsd/<ID barbare>" />
Typiquement pour le blog Behind the Seine, l'ID est 6a00e5504c41f188330120a656aac4970b.
Ce n'est absolument pas l'ID que j'utilise pour la démo, sachant qu'il a reçu un nombre faramineux de commentaires (0 tout rond de mémoire), je vais donc prendre l'ID du blog Tout sur TypePad qui lui est autrement plus populaire, le veinard.
La mise en place du module se fait en 3 étapes très simples :
- Je prépare le module HTML qui accueillera les données retournées par TypePad
- Je lance ma requête auprès de cette même API
- J'ordonne mes résultats comme souhaité et génère le HTML à coller en 1.
1. Le module HTML
Je reprend pour cela la structure classique d'un module TypePad<div class="module">
<div class="module-header">Notes les plus commentées Tout sur TypePad</div>
<div class="module-content" id="commented_posts">
</div>
</div>
Libre à vous de modifier la structure, notez seulement que l'id du div est nécessaire par la suite. Si vous le changez, faites en sorte de mettre à jour le code qui suit.
2. Requête et traitement des données
Nous allons effectuer une requête vers l'API en spécifiant quelques paramètres et filtres que je vous détaille ci-dessous :url: 'http://api.typepad.com/blogs/6a00d83451c82369e200d834527ad569e2/post-assets.js', // l'URL de l'API pour le blog Tout sur TypePad
dataType: 'jsonp', // le type de données
data: {
'max-results': 30 // le nombre max. de résultats souhaités
}
Il existe une variété de filtres possibles pour chaque API, mais mon objectif est simplement d'afficher les 5 notes les plus commentées parmi les 30 dernières publiées.
Viens ensuite le traitement des résultats retournés par TypePad :
A. J'ordonne mon tableau de résultats fct du nombre de commentaires par élément (propriété CommentCount).data.entries.sort(my_comp);
la fonction my_comp est la suivante :function my_comp(a,b) {
return parseInt(b.commentCount) - parseInt(a.commentCount);
}
B. Pour chaque élément ainsi trié, je définis les propriétés que je vais afficher au final. Le tout au sein d'une boucle qui limitera à 5 le nombre d'entrées :for(var i = 0; i < 6; i++) {
var elem = posts[i];
var o_permalink = elem.permalinkUrl; // Permalien de la note
var o_title = elem.title ; // Titre de la note
var o_comments = elem.commentCount; // Nbre de commentaires
var text = '<li><a href="' + o_permalink + '" target="_blank">'+ o_title +'</a><span>'+ o_comments +'</span></li>';
html += text;
}
3. Mise à jour et affichage
Ne reste plus qu'à mettre à jour mon module HTML :$("#commented_posts").append(html);
C'est terminé, le résultat que vous voyez en colonne latérale, "Notes les plus commentées sur TypePad", est le fruit du copier/coller suivant dans un module HTML TypePad :<div class="module">
<div class="module-header">Notes les plus commentées Tout sur TypePad</div>
<div class="module-content" id="commented_posts">
</div>
</div>
<script type="text/javascript">
function my_comp(a,b) {
return parseInt(b.commentCount) - parseInt(a.commentCount);
}
$(document).ready(function () {
$.ajax({
url: 'http://api.typepad.com/blogs/6a00d83451c82369e200d834527ad569e2/post-assets.js',
dataType: 'jsonp',
data: {
'max-results': 30
},
success: function (data) {
data.entries.sort(my_comp);
var posts = data.entries;
var html = "<ul class='module-list'>";
for(var i = 0; i < 6; i++) {
var elem = posts[i];
var o_permalink = elem.permalinkUrl;
var o_title = elem.title ;
var o_comments = elem.commentCount;
var text = '<li><a href="' + o_permalink + '" target="_blank">'+ o_title +'</a><span>'+ o_comments +'</span></li>';
html += text;
}
html += "</ul>";
$("#commented_posts").append(html);
}
});
});
</script>
Et vous voilà avec un beau module des notes les plus commentées de Tout sur TypePad.
Remplacez son ID par celui de votre blog et le tour est joué.
Vous pouvez aussi filtrer les notes par nombre de mises en favori, reblogs, etc… C'est à vous de décider.
Vous pouvez aussi faire varier l'affichage (affichage de l'extrait d'une note, d'une ou plusieurs images).
Comme le point de ce tutoriel est d'enrichir votre blog TypePad, le code donné est mis en forme pour un affichage en colonne latérale. Libre à vous de l'adapter selon vos besoins (utilisation d'une TypePad Page, d'un mode HTML de barre de navigation ou de pied de page…).
Dans la prochaine note concernant l'API TypePad, nous regarderons plus en détails comment exploiter l'API de recherche de TypePad pour afficher d'autres contenus sur un thème donné sur votre blog.
Commentaires