Après ma première incartade "Module des notes les plus commentées" dans l'usage pratique des APIs TypePad, je vais m'attaquer à un deuxième module qui pourra agrémenter votre blog de façon pertinente, tout en vous faisant la démonstration d'une autre API TypePad, celle dédiée à la recherche.
Cette API est incroyablement simple à mettre en oeuvre, et vous permet à partir de mots-clés de rapatrier tout type de contenus publiés sur l'ensemble du réseau TypePad (notes, commentaires, vidéos, photos).
Comme pour ma précédente note, je vais utiliser jQuery, donc veillez à avoir inclus 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" avant d'aller plus loin dans l'implémentation.
Mise à jour :
La coupe du monde étant terminée, j'ai déplacé le module d'exemple sur une page TypePad séparée plutôt qu'en colonne latérale.
Mettons que votre blog parle de football et que vous ayez envie de laisser découvrir aux lecteurs d'autres notes d'actualités concernant , par exemple, la Coupe du Monde de Football 2010 (incroyable hasard !), et bien cela est possible en 2 temps 3 mouvements grâce à l'API TypePad de recherche.
Sa forme est la suivante :
/assets.<format>
Pas besoin d'autre configuration, vous pouvez par la suite les paramètres à appliquer (mots-clés, types de résultats attendus…).
Comme pour le module de notes les plus commentées, 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 l'API
- Je présente mes résultats comme souhaité et génère le HTML à coller en 1.
1. Le module HTML
J'applique la structure classique d'un module TypePad<div class="module">
<div class="module-header">L'actualité de la Coupe du Monde 2010</div>
<div class="module-content" id="related_posts">
</div>
</div>
Libre à vous de la faire comme vous le sentez, tant que vous gardez un oeil sur l'id du div qui sera mis à jour avec les notes récupérées.
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/assets.js', // URL de l'API
dataType: 'jsonp', // type de données souhaité
data: {
'filter.asset-type': 'Post', // type d'objets cherchés, ici des notes
'q': 'Coupe du Monde de Football 2010', // le sujet de recherche
'max-results': 10 // le nombre de résultats souhaités
},
Vous pouvez consulter la documentation de l'API si vous préférez chercher des images ou des vidéos.
Viens ensuite le traitement des résultats retournés par TypePad :
Pour chaque élément retourné, je définis les propriétés que je vais afficher au final:
for(var i = 0; i < posts.length; i++) {
var elem = posts[i];
var o_permalink = elem.permalinkUrl; // le permalien
var o_title = elem.title ; // le titre de la note
var o_content = elem.excerpt; // un extrait
if (!elem.embeddedImageLinks[0]){var o_picture="";} else {
if (!elem.embeddedImageLinks[0].urlTemplate) {var o_picture = "";} else {var o_picture = elem.embeddedImageLinks[0].urlTemplate.replace('{spec}', '50si');}}
var text = '<div class=\"related-content\"><a href="' + o_permalink + '" target="_blank">'+ o_title +'</a>';
text +='<p><img style=\"float:left;padding-right:2px;\" src="'+ o_picture +'">'+ o_content +'</p>';
text +='</div>';
html += text;
}
J'attire juste votre attention sur une option très sympathique offerte par l'API lors du rapatriement des données. Si l'image a été insérée dans TypePad , vous pouvez en modifier dynamiquement la taille.
Dans le cas présent, je fais un test pour déterminer si le stockage de la première image de chaque note est fait par TypePad et si c'est le cas, je demande à réduire son format à 20 pixels de large (urlTemplate.replace('{spec}', '50si')) sinon je n'affiche rien (plutôt que de redimensionner via CSS).
3. Mise à jour et affichage
Ne reste plus qu'à mettre à jour mon module HTML :$("#related_posts").append(html);
Mon module au final ressemble à ça :<div class="module">
<div class="module-header">L'actualité de la Coupe du Monde 2010</div>
<div class="module-content" id="related_posts">
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'http://api.typepad.com/assets.js',
dataType: 'jsonp',
data: {
'filter.asset-type': 'Post',
'q': 'Coupe du Monde de Football 2010',
'max-results': 6
},
success: function (data) {
var posts = data.entries;
var html = "<ul class=\"module-list\">";
for(var i = 0; i < posts.length; i++) {
var elem = posts[i];
var o_permalink = elem.permalinkUrl;
var o_author_name = elem.author.displayName;
var o_title = elem.title ;
var o_content = elem.excerpt;
if (!elem.embeddedImageLinks[0]){
var o_picture="";} else {
if (!elem.embeddedImageLinks[0].urlTemplate) {var o_picture = "";} else {var o_picture = elem.embeddedImageLinks[0].urlTemplate.replace('{spec}', '50si');}}
var text = '<li><a href="' + o_permalink + '" target="_blank">'+ o_title +'</a><br />';
text +='<img style=\"float:left;padding-right:2px;\" src="'+ o_picture +'">'+ o_content.substring(0,100) +'…</li>';
html += text;
}
html += "</ul>";
$("#related_posts").append(html);
}
});
});
</script>
Le résultat vous pouvez le voir en colonne latérale.
Vous pouvez imaginer vous l'approprier de plusieurs façons :
- Faire varier le terme recherché fonction d'un élément de la page du blog (ses mots clés, son titre, sa catégorie),
- Générer des murs d'image ou de vidéos fonction de vos thèmes (pas forcément via un module mais en utilisant une TypePad Page),
- Filtrer uniquement certaines notes ou contenus médias de vos notes (la recherche peut être contrainte à une liste de blogs) pour un affichage de celles-ci en format slideshow par exemple…
Et probablement encore beaucoup plus grâce à votre imagination ainsi débridée.
De plus fonction des éléments recherchés, vous pouvez là aussi n'afficher que les plus commentés ou mis en favoris, de sorte à ne proposer que des contenus très qualitatifs.
Enfin si vous utilisez un habillage avancé de TypePad, vous pouvez aussi faire votre propre Linkwithin sur chaque pied de note, en utilisant les tags technorati ou les catégories.
Bref l'API de recherche TypePad est une très belle initiative, rapide à implémenter. Je vous ferai prochainement, pour finir la démonstration de ses usages, le récit de comment implémenter une liste de recommandations sur le même modèle.
Commentaires