J’entends et je lis de plus en plus d’articles sur Foursquare, qui est en quelque sorte un jeu basé sur la géolocalisation. Le marketing s’empare de ce jeu pour inciter les utilisateurs à venir dans des lieux et se voir offrir des offres. Mais voyons pourquoi nous pouvons nous intéresser à Foursquare et comment l’utiliser. (Ceci est une première approche de ce que l’on peut en faire)

Pour quoi faire ?

Je travaille dans un lieu culturel, donc l’approche purement marketing de Foursquare n’est pas à priori celle qui m’intéresse. J’entends plutôt la détourner pour des objectifs moins commerciaux. Je prends pour exemple l’utilisation qu’en fait un musée de New York très avancé sur les réseaux sociaux : le Brooklyn Museum (lire aussi cet article qui décortique la page du Brooklyn Museum).

Avec Foursquare, si vous avez signalé (checké) plus de trois fois, sur des heures ou des jours différents, votre présence dans les lieux, vous avez la possibilité de devenir le maire (mayor) du lieu. Il y a de nombreux articles sur le sujet et vous pouvez commencer par celui-là : Foursquare, pour quoi faire ? L’idée c’est de proposer des offres spéciales pour le maire du mois par exemple, cela pourrait être un pass pour visiter à deux tout le lieu sur une journée…

L’intérêt de se lancer dans Foursquare, quelque soit la structure, ne réside que dans le fait de pouvoir afficher les données de la structure recueillies par Foursquare comme le montre le Brooklyn Museum. Pour cela Foursquare propose une API. Pour récupérer dans un flux XML ou jSON les données liées à un lieu, il faut aller regarder dans « Venue methods » la partie nommée « Venue Details ». Le flux s’appelle ainsi :

  • http://api.foursquare.com/v1/venue?vid=(id du lieu) pour le XML
  • http://api.foursquare.com/v1/venue.json?vid=(id du lieu) pour le jSON

Comment ? (dev)

Le tutoriel qui va suivre va utiliser le flux XML.
Nous allons récupérer et parser ce flux avec jQuery. Le problème c’est que ce flux est extérieur à votre site. Il faut donc contourner le problème en créant une page PHP créant l’illusion que ce fichier XML est sur votre site. Nommons ce fichier feed.php :

<?php
header(‘Content-Type: text/xml’);
print file_get_contents(‘http://api.foursquare.com/v1/venue?vid=1526835’); //flux XML des Champs Libres
?>

Vous créez ensuite une page HTML dans laquelle vous ajoutez dans le <body> une bloc vide : <dl id= »foursquare »></dl> par exemple. Vous installer bien entendu jQuery sinon ça ne fonctionnera pas. Ensuite il suffit d’appeler le fichier PHP comme un flux XML et de spécifier précisément les éléments que vous voulez afficher. Comme ceci par exemple (ce code est à améliorer – il faut remplacer les ‘ par  » pour générer un code valide mais là j’ai la flemme -, je conseille quand même d’aller dans l’API de Foursquare pour comprendre un peu comment ça fonctionne) :

<script type= »text/javascript »>
$(function(){

$.ajax({
type: « GET »,
url: « feed.php »,
dataType: « xml »,
complete : function(data, status) {
var venue = data.responseXML;
var appendHtml = «  »;
$(venue).each(function(){
var name = $(this).find(‘name’).text();
var address = $(this).find(‘address’).text();
var city = $(this).find(‘city’).text();
var state = $(this).find(‘state’).text();
var checkins = $(this).find(‘checkins’).text();
var herenow = $(this).find(‘herenow’).text();
appendHtml += « <dt id=’lieu’><a href=’http://foursquare.com/venue/1526835′> »+name+ »</a></dt><dd> »+address+ »<br /> »+zip+ +city+ » (« +state+ »)</dd><dd>nombre de checks : « +checkins+ »<br/>nombre de checks aujourd’hui : « +herenow+ »</dd> »;
});
$(venue).find(« mayor »).each(function(i, item) {
var firstname = $(item).find(« firstname »).text();
var lastname = $(item).find(« lastname »).text();
var photo = $(item).find(« photo »).text();
var id = $(item).find(« user »).find(« id »).text();
appendHtml += « <dt id=’mayor’>Maire actuel des Champs Libres</dt><dd class=’mayor’><a href=’http://foursquare.com/user/-« +id+ »‘><img src=' »+photo+ »‘ alt=’avatar’ /></a><p> »+firstname+ » « +lastname+ »</p></dd> »;
});
appendHtml += « <dt>Les derniers messages</dt> »;
$(venue).find(« tip »).each(function(i, item) {
var text = $(item).find(« text »).text();
var created = $(item).find(« created »).text();
var firstname = $(item).find(« firstname »).text();
var lastname = $(item).find(« lastname »).text();
var url = $(item).find(« url »).text();
var photo = $(item).find(« photo »).text();
var id = $(item).find(« user »).find(« id »).text();
appendHtml += « <dd>de « +firstname+ » « +lastname+ » <a href=’http://foursquare.com/user/-« +id+ »‘><img src=' »+photo+ »‘ alt=’avatar’ /></a></dd><dd>date : « +created+ »</dd><dd> »+text+ »</dd><dd>Liens associé : <a href= »+url+ »> »+url+ »</a></dd> »;
});
$(« #foursquare »).append(appendHtml);
}});
});
</script>

Avec cette page, vous affichez non seulement des données mais vous créez de fait un espace contributif.
L’API de Foursquare reste cependant assez floue sur certains points. Je n’ai pas encore réussi à trouver comment faire apparaître les données concernant « Who’s Been Here ».

Articles sur Foursquare :