Comment créer un menu sur son site avec les titres de son blog tumblr ?

Lorsque l'on dispose d'un site Web et qu'on souhaite l'enrichir d'un blog avec un blog hébergé sur tumblr,  on peut souhaiter ajouter sur son site un menu contenant les dernières entrées du blog.

Pour cela, il suffit d'utiliser un peu de javascript, en s'aidant de la bibliothèque jQuery, et l'API d'interface proposée par tumblr. 

Il faut tout d'abord enregistrer une application tumblr, afin d'obtenir une clé publique.

Ensuite, il faut effectuer avec jQuery une requête ajax en utilisant la fonction /posts de l'API. Nous le faisons de façon classique en appelant la méthode $('document').ready() de jQuery.

<script type="text/javascript">
$('document').ready(function () {
	var texte;
	$.ajax({
		url: 'http://api.tumblr.com/v2/blog/monblog.tumblr.com/posts',
		method: 'get',
		data : ({
			api_key :'votre_cle',
		 	jsonp : 'TraiteTitre'
		}),
		dataType: "jsonp"
	});
});

Cette requête utilise jsonp pour définir la fonction javascript à appeler lorsque tumblr répond, dans notre cas TraiteTitre.
La fonction reçoit en paramètre un objet contenant plusieurs autres objets, qui permet d'accéder à la liste des articles publiés.
Il suffit alors de préparer une liste des titres avec des liens et de l'ajouter au contenu d'une balise div réservée à cet effet.

function TraiteTitre(reponse) {
	var posts = reponse.response.posts;
	var text ='';
	for (var i in posts)
	{
		p = posts[i];
		text += '<a href='+p.post_url+'>'+p.title+'</a><br>';
	}
	$('#titreBlog').append(text);
}

Pour finir la mise en place du menu, on peut écrire deux fonctions pour afficher et masquer le div contenant les titres, et activer l'appel de ces fonctions avec les événements mouseover et mouseout du menu.

function onTitreBlog() {
	var pos = $("#blog").offset();
	pos.top += 20;
	pos.left -= 200;
	$("#titreBlog").css({top: pos.top,left: pos.left}).show();
}
function offTitreBlog() {
	$("#titreBlog").hide();
}
</script>
<style>
#titreBlog {
	display:none; 
	position:fixed;
	background-color:white;
	border:#999999 thin solid;
	border-radius:5px;
	padding:5px;
}
#titreBlog h3 {
	text-align:center;
}
</style>
<div id="menu">
  <ul>
    <li><a href="http://dominique-colombani.fr/domblog/index.php?post/2012/03/25/..." >Menu1</a></li>
    <li><a href="http://dominique-colombani.fr/domblog/index.php?post/2012/03/25/..." >Menu2</a></li>
    <li><a href="http://blog.societe.com" target="_blank" id="blog" 
        onmouseover="onTitreBlog()" onmouseout="offTitreBlog()">Blog
    <div id="titreBlog"><h3>Dernières parutions du blog</h3></div></a></li>
  </ul>
</div>

Cet exemple est souvent utilisé dans les formations Javascript et jQuery que j'anime, pour montrer une utilisation sur une application réelle.