2 décembre 2009
par Touchcream
2 Commentaires
Ça fait longtemps que je n’avais pas blogué ici et en ce moment l’envie me reviens. J’ai donc décidé de vous faire un petit tuto expliquant comment créer à l’aide de l’API Feedburner un graphique de croissance du nombre d’abonnés.
Tout d’abord, je vous invite à lire la doc de l’Awareness API de Feedburner ainsi qu’à télécharger la librairie flash amcharts qui nous permettra de faire les graphiques.
Pour commencer on va créer un petit formulaire où l’utilisateur entrera le flux du blog et qui, uniquement s’il est validé, affichera le graphique :
<? if(isset($_POST["Envoyer"])) //Vérifie si le formulaire est envoyé
{
}else{
?>
<form action="http://<?= $_SERVER["SERVER_NAME"] . $_SERVER["SCRIPT_NAME"]; ?>" method="post"> <!-- Envoi du formulaire sur la même page -->
<INPUT type="text" name="flux1"> Flux du blog n1<br/>
<INPUT type="submit" value="Envoyer" name="Envoyer">
</form>
<? }?>Ensuite comme vous avez lu la doc de l’API feedburner, vous savez que pour récupérer un fichier XML avec le nombre d’abonnés feedburner, il va vous falloir une url sous ce format : « https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=Nom-Du-Blog&dates=yyyy-mm-dd,yyyy-mm-dd« . Il faut donc récupérer le nom du blog dans l’url qui nous a été donnée. Pour faire ça, un petit coup de explode et c’est dans la poche.
<? if(isset($_POST["Envoyer"])) //Vérifie si le formulaire est envoyé
{
$nom1 = explode("/", $_POST["flux1"]); // on récupère le nom
$flux1 = "https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$nom1["3"]."&dates=2009-08-21,2009-09-21"; // on l'insère dans l'url
}else{
?>
<form action="http://<?= $_SERVER["SERVER_NAME"] . $_SERVER["SCRIPT_NAME"]; ?>" method="post"> <!-- Envoi du formulaire sur la même page -->
<INPUT type="text" name="flux1"> Flux du blog n1<br/>
<INPUT type="submit" value="Envoyer" name="Envoyer">
</form>
<? }?>Maintenant pas de secret, il va falloir charger le fichier XML, le parser (le rendre « lisible »), récupérer ce que l’on veut pour ensuite l’adapter à la structure de la librairie Flash. Il faut donc que vous vous inspiriez des exemples disponibles dans le dossier que vous aurez télécharger précédemment. J’ai ici choisi le format XML, il y en a d’autres, à vous de choisir.
<? if(isset($_POST["Envoyer"])) //Vérifie si le formulaire est envoyé
{
$nom1 = explode("/", $_POST["flux1"]); // on récupère le nom
$flux1 = "https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$nom1["3"]."&dates=2009-08-21,2009-09-21"; // on l'insère dans l'url
$feed1 = simplexml_load_file($flux1); // On charge et parse le fichier xml
$series = "<series>"; // Préparation de variables pour restructurer un flux XML
$subs1 = "</series><graphs><graph gid='0' title='".$nom1["3"]."'>"; // Idem que ci-dessus
$compt = 0;
foreach ($feed1->feed->entry as $entry) { /* Boucle où on récupère les données */
$series = $series."<value xid='".$compt."'>".$entry['date']."</value>";
$subs1 = $subs1."<value xid='".$compt."'>".$entry['circulation']."</value>";
$compt++;
}
$chart = "<chart>".$series.$subs1."</graph></graphs></chart>"; // Fin de la restructuration, le flux XML est dans $chart
}else{
?>
<form action="http://<?= $_SERVER["SERVER_NAME"] . $_SERVER["SCRIPT_NAME"]; ?>" method="post"> <!-- Envoi du formulaire sur la même page -->
<INPUT type="text" name="flux1"> Flux du blog n1<br/>
<INPUT type="submit" value="Envoyer" name="Envoyer">
</form>
<? }?>Notre nouveau flux XML est créé, il ne reste plus qu’à l’insérer dans un graphique. Pour cela, il faut insérer le code d’amcharts et charger les données :
<? if(isset($_POST["Envoyer"])) //Vérifie si le formulaire est envoyé
{
$nom1 = explode("/", $_POST["flux1"]); // on récupère le nom
$flux1 = "https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$nom1["3"]."&dates=2009-08-21,2009-12-02"; // on l'insère dans l'url
$feed1 = simplexml_load_file($flux1); // On charge et parse le fichier xml
$series = "<series>"; // Préparation de variables pour restructurer un flux XML
$subs1 = "</series><graphs><graph gid='0' title='".$nom1["3"]."'>"; // Idem que ci-dessus
$compt = 0;
foreach ($feed1->feed->entry as $entry) { /* Boucle où on récupère les données */
$series = $series."<value xid='".$compt."'>".$entry['date']."</value>";
$subs1 = $subs1."<value xid='".$compt."'>".$entry['circulation']."</value>";
$compt++;
}
$chart = "<chart>".$series.$subs1."</graph></graphs></chart>"; // Fin de la restructuration, le flux XML est dans $chart ?>
<!-- amline script-->
<script type="text/javascript" src="lib/amline/swfobject.js"></script>
<div id="flashcontent">
<strong>Imposible d'afficher le graphique, Flash n'est pas à jour sur votre ordinateur.</strong>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("lib/amline/amline.swf", "amline", "800", "400", "8", "#FFFFFF");
so.addVariable("path", "lib/amline/");
so.addVariable("chart_data", encodeURIComponent("<? echo $chart; ?>")); <!-- On charge les données -->
so.addVariable("chart_settings", encodeURIComponent("<settings><background><color>#FFFFFF,#FFFFFF</color><alpha>100</alpha></background><labels><label><y>24</y><width>800</width><align>center</align><text><![CDATA[<b>Nom Du Graphique</b>]]></text></label></labels></settings>"));
so.write("flashcontent");
// ]]>
</script>
<!-- end of amline script --> <?
}else{
?>
<form action="http://<?= $_SERVER["SERVER_NAME"] . $_SERVER["SCRIPT_NAME"]; ?>" method="post"> <!-- Envoi du formulaire sur la même page -->
<INPUT type="text" name="flux1"> Flux du blog n1<br/>
<INPUT type="submit" value="Envoyer" name="Envoyer">
</form>
<? }?>Et voila, vous avez désormais un joli graphique affichant un flux feedburner ! Maintenant à vous de le personnaliser tant dans le design que dans les fonctionnalités ;)
PS : Le script ne marche pas sur tout les serveurs en raison de la fonction simplexml_load_file() car certains hébergeurs ne l’autorise pas. De plus tout les flux ne fonctionneront pas, seuls ceux ayant l’API Awareness fonctionnent (80%).
