samedi 15 novembre 2014

Insérer facilement un lecteur rss sur votre page web : javascript et Google APIs



De nombreux services et de nombreuses bibliothèques de scripts proposent d'afficher des flux rss sur vos pages, en tant que widget ou page pleine, mais se révèlent généralement lourds et d'autant plus complexes qu'une foultitude d'options facultatives et peu intéressantes peuvent y être associées. Vous trouverez ici un script des plus simples pour afficher un flux rss (ou plusieurs) sur une page web html, sans fioriture, facilement, avec un code léger et dont l'adaptation à vos besoins, est réalisable en quelques clics et transformations.

En tant que webmaster, il y'a de fortes probabilités que vous soyez amenés à connecter à votre site, des flux rss de sites dont vous effectuez la veille informative, ou bien, vous pourriez être tenté de proposer à vos lecteurs vos propres fils d'actualités via un exemple qui s'affiche directement sur vos pages. C'est d'ailleurs ce que nous faisons ici via les onglets publications, qui affichent à la volée (calculs en javascript) les derniers articles de plusieurs de nos sites sur une même page, permettant ainsi au lecteur d'accéder en un coup d’œil à un ensemble d'informations nouvelles de nos travaux.

Les scripts de lecture xml(rss) ne sont pas rares mais ils sont souvent réalisés côté serveur (donc gourmands en ressources), ou fonctionnent comme des usines à gaz en appelant des fonctions ou des librairies inutiles qui rendent complexes leur utilisation, leur adaptation à vos besoins, en même temps qu'ils rajoutent parfois quelques scripts inutiles voire inopportuns.

Je vais donc ici vous fournir un code léger et simplifié, que le codeur débutant, notamment, sera à même de manipuler facilement. Le script s'exécute côté client (javascript), se divise en trois parties : 
  • Source html pour le corps de votre page (ou widget), 
  • Source css (pour gérer et améliorer l'affichage), 
  • Source javascript, pour manipuler les fichiers xml. 
Nous ferons appel aux API Google pour faciliter le traitement xml en convertissant ces fichiers en format JSON - aucune connaissance hors html et css n'est cependant requise pour créer ce qui pourrait être le plus simple lecteur rss pour une page web.

Nous allons prendre notre page d'information de veille Science et culture comme exemple. Comme vous le voyez, la page, lorsqu'elle a terminé son chargement et l'interprétation du script, affiche 6 flux rss en colonnes - ce qui permet de lire en une seule page plusieurs flux rss. Le css, très simple également, distingue correctement les flux et les items de sorte que l'information se présente clairement et sans ambiguïté.

Code source Html

Le codage html nécessitera de créer des éléments Div dans lesquels s'afficheront les rss. Dans l'exemple, nous allons en créer 6, mais nous pourrions tout aussi bien simplifier afin de n'en créer par exemple, qu'un ou deux.

Exemple pour deux flux rss
<div class="example">
<div class="post_results" id="post_results1" rss_num="5" rss_url="url_du_flux1">
<div class="loading_rss">
<img alt="Loading..." src="image_de_chargement" />
            </div>
</div>
<div class="post_results" id="post_results2" rss_num="5" rss_url="url_du_flux2">
<div class="loading_rss">
<img alt="Loading..." src="image_de_chargement" />
            </div>
</div>
<div style="clear: both;">
</div>
</div>

Chaque inclusion rss se présente donc sous la forme : 
<div class="post_results" id="post_results1" rss_num="3" rss_url="url_du_flux">
<div class="loading_rss">
<img alt="Loading..." src="image_de_chargement" />
            </div>
</div>

le tout étant inclut au sein du Div global de class=example.

Pour chaque rss que vous souhaitez rajouter, créez un nouveau Div de class="post_results" avec un numéro d'identification différent (1, 2, 3, ...). Remplacez pour chacun url_du_flux et image_de_chargement par les adresses de flux xml et une petite image de chargement (nous utilisons celle que nous avons chargé à l'adresse :

http://2.bp.blogspot.com/-Yn2gQQw9q3I/VF_E1-zqyHI/AAAAAAAACBI/wKnBAjFn3l0/s1600/loading.gif

Code source css

Le code est fourni en exemple de façon à fonctionner sur les différents navigateurs les plus courants. A charge pour vous de l'adapter selon vos besoins.

<style type="text/css">
.example{background:#FFF;width:98%;border:1px #000 solid;margin:5px;padding:5px;-moz-border-radius: 3px;-webkit-border-radius: 3px; line-height:100%;}

.rss_titre {
    margin: 5px;
    width: 47%;
    float:left;
}
.post_results {
    margin: 5px;
    width: 47%;
    border:1px solid #444;
    float:left;
}
.post_results ul {
    list-style:none;
    text-align:left;
    padding:0;
    margin: 0;
}
.post_results ul li {
    background: #eeeeee;
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* W3C */

    padding: 10px;
}
.post_results ul li:hover{
    background: #eee;
}
.post_results ul li a{
    color: #222;
    display: block;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    margin-bottom:5px;
}
.post_results ul li a:hover{
    color: #999;
}
.post_results ul li p {
    color: #222;
    font-size: 12px;
    margin: 0;
}
</style>

Code source javascript

<script type="text/javascript">
function myGetElementsByClassName(selector) {
    if ( document.getElementsByClassName ) {
        return document.getElementsByClassName(selector);
    }
    var returnList = new Array();
    var nodes = document.getElementsByTagName('div');
    var max = nodes.length;
    for ( var i = 0; i < max; i++ ) {
        if ( nodes[i].className == selector ) {
            returnList[returnList.length] = nodes[i];
        }
    }
    return returnList;
}

var rssReader = {
    containers : null,
    // initialization function
    init : function(selector) {
        containers = myGetElementsByClassName(selector);
        for(i=0;i<containers.length;i++){
            // getting necessary variables
            var rssUrl = containers[i].getAttribute('rss_url');
            var num = containers[i].getAttribute('rss_num');
            var id = containers[i].getAttribute('id');

            // creating temp scripts which will help us to transform XML (RSS) to JSON
            var url = encodeURIComponent(rssUrl);
            var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+num+'&q='+url+'&callback=rssReader.parse&context='+id;

            var script = document.createElement('script');
            script.setAttribute('type','text/javascript');
            script.setAttribute('charset','utf-8');
            script.setAttribute('src',googUrl);
            containers[i].appendChild(script);
        }
    },

    // parsing of results by google
    parse : function(context, data) {
        var container = document.getElementById(context);
        container.innerHTML = '';

        // creating list of elements
        var mainList = document.createElement('ul');

        // also creating its childs (subitems)
        var entries = data.feed.entries;
        for (var i=0; i<entries.length; i++) {
            var listItem = document.createElement('li');
            var title = entries[i].title;
            var contentSnippet = entries[i].contentSnippet;
            var contentSnippetText = document.createTextNode(contentSnippet);

            var link = document.createElement('a');
            link.setAttribute('href', entries[i].link);
            link.setAttribute('target','_blank');
            var text = document.createTextNode(title);
            link.appendChild(text);

            // add link to list item
            listItem.appendChild(link);

            var desc = document.createElement('p');
            desc.appendChild(contentSnippetText);

            // add description to list item
            listItem.appendChild(desc);

            // adding list item to main list
            mainList.appendChild(listItem);
        }
        container.appendChild(mainList);
    }
};

window.onload = function() {
    rssReader.init('post_results');
}

</script>

Copiez ces trois codes au sein d'un widget (vous pouvez par exemple le copier sur Blogger dans une page en mode html, ou sur un widget html/javascript) ou d'une page html, modifiez les adresses des flux et éventuellement de l'image, et le tour est joué. Ne reste qu'à adapter le css pour intégrer le script à votre design de la meilleure façon qui soit, et éventuellement, modifier la source html pour ajouter la lecture d'autres flux rss. Ces scripts sont adaptés à partir des codes fournis sur Script tutorials.

5 commentaires:

  1. Bonjour et merci pour ce code qui répond a mes attentes. Je m'empresse de le mettre en oeuvre.

    RépondreSupprimer
  2. Merci pour le code, ça fonctionne très bien !

    RépondreSupprimer
  3. Merci pour le code, ça fonctionne parfaitement !

    RépondreSupprimer
  4. Bonjour, est-il possible de paramétrer le code pour filtrer les flux ? Selon des mots choisis par exemple. Merci en tous cas pour ce travail excellent !

    RépondreSupprimer
  5. Bonjour Yves, c'est faisable en introduisant un filtre javascript et une boucle sur un tableau de mots choisis, je pense que vous pourriez en trouver facilement sur le web, ce genre de code est relativement partagé. Bon courage et n'hésitez pas à m'indiquez si vous améliorez le script de cette façon, je me ferais un plaisir de vous inscrire en lien ;)

    RépondreSupprimer