Pour installer le lecteur dans l’un de vos articles, il vous faut suivre la procédure suivante.

Vous téléchargez les fichiers associés au lecteur (l’intégralité de ces fichiers se trouve dans le fichier lecteurRSS.zip)

Vous créez un nouvel article vide dans lequel vous copiez le code html contenu dans le fichier lecteurRSS.html. Vous validez de façon à ce que l’on attribue un identifiant à l’article ainsi obtenu.

Ensuite vous créez le répertoire associé à cet article en utilisant le bouton prévu à cet effet, et vous y uploadez les fichiers lecteurRSS.php, lecteurRSS.js et lecteurRSS.css.

Enfin, vous écrirez :
 lecteurRSS dans le champ portant le nom "Nom du fichier CSS" (sans extension),
 lecteurRSS dans le champ portant le nom "Nom du script js principal (sans extension)".

Vous n’écrirez rien dans le champ portant le nom "Nom du script PHP principal (sans extension)" ; l’appel du fichier lecteurRSS.php se fait par le biais du moteur ajax.

Le code html (copier -coller)  :

 

La création du répertoire et l’upload  :

Le remplissage des champs :

Personnalisation possible :

Vous pouvez bien entendu remplacer les url de syndication par celles de votre choix.

Ces modifications sont à effectuer dans le fichier lecteurRSSinline.js ( les lignes 120 à 124).

<div align="center">
<div id="conteneurRSS" align="center">
<table id="lecteurRSS" >

<tr>
 <td colspan="5">
 <div id="titreRSS"> </div>
 </td>
</tr>

<tr>
 <td class="celluleRSS">
 <div class="envoiRSS" id="envoi1">1</div>
 </td>
 <td class="celluleRSS">
 <div class="envoiRSS" id="envoi2">2</div>
 </td>
 <td class="celluleRSS">
 <div class="envoiRSS" id="envoi3">3</div>
 </td>
 <td class="celluleRSS">
 <div class="envoiRSS" id="envoi4">4</div>
 </td>
 <td class="celluleRSS">
 <div class="envoiRSS" id="envoi5">5</div>
 </td>
</tr>

<tr>
 <td colspan="4">
 <form action="">
 <input type="text" id="votre_url" name="evotreurl" value="Saisissez votre url "/>
 </form>
 </td>
 <td class="celluleRSS">
 <div class="envoiRSS" id="envoiRSS"> </div>
 </td>
</tr>

</table>

<div id="conteneurlignesRSS">
</div>
</div>
</div>

#conteneurRSS a{
color:#880000;
text-decoration:none;}

#conteneurRSS h2{
line-height:17px;
margin-bottom:7px;
_margin-bottom:0px;}

#conteneurRSS hr{
border:2px solid #880000;
margin-top:0px;
height:3px;}

#conteneurRSS table#lecteurRSS{
text-align:center;
background:#fafad2;
width:250px;
padding:10px;
margin:auto;
_margin:10px;
overflow:hidden;}

#conteneurRSS{
border:10px  ridge #222222;
background:#fafad2;
width:470px;
margin:30px auto;}

#ecran{
background:silver;
border:5px outset #777777;
width:320px;}

.envoiRSS {
border: 5px outset #777777;
width: 26px;
font-weight: bold;
color:#ffffff;
height: 16px;
font-size: 17px;
margin: 0px auto;
padding:5px;
_padding:0px;
background-color:#550011;
cursor:pointer;
text-align:center;}

#envoiRSS{
_padding:3px;
_width: 36px;
_height: 26px;

}

table td.celluleRSS{
padding:5px;
height:50px;
width: 50px;
overflow:hidden;}

#titreRSS{
text-align:center;
border: 5px inset #777777;
margin:0px auto 15px;
padding-top:5px;
_padding-top:2px;
background:#550011;
width:90%;
font-weight:bold;
font-size:15px;
height:30px;}

#votre_url{
text-align:left;
border: 5px inset #777777;
width:90%;
height:16px;
_height:30px;
color:#222222;
margin: 0px auto;
_margin-top: 15px;
padding:5px;
_padding:2px 5px;
background-color:ivory;
font-size: 11x;}

#conteneurlignesRSS{
padding:10px;
margin:auto;
border: 0px inset #777777;
width:80%;
background:#fafad2;
text-align:left;}

//************************************************************************************************************************
//                                                                                   Gestionnaire d'événements
//************************************************************************************************************************
 
// Au chargement de la page.  
window.onload=initialisation;
 
function initialisation() {
setHover();
 choix=0;
 
 document.getElementById("envoi1").onmouseup=function () { eclairer1('envoi1'); }
 document.getElementById("envoi1").onmousedown=function () { foncer1('envoi1'); }
 document.getElementById("envoi1").onmouseout= function () { retournormal1('envoi1'); }
 document.getElementById("envoi1").onmouseover=function () { choix=1; eclairer1('envoi1');  }
 document.getElementById("envoi1").onclick=function () {  LireRSS(1);  }
 
 document.getElementById("envoi2").onmouseup=function () { eclairer1('envoi2'); }
 document.getElementById("envoi2").onmousedown=function () { foncer1('envoi2'); }
 document.getElementById("envoi2").onmouseout= function () { retournormal1('envoi2'); }
 document.getElementById("envoi2").onmouseover=function () {choix=2;  eclairer1('envoi2');  }
 document.getElementById("envoi2").onclick=function () { LireRSS(2);  }  
   
 document.getElementById("envoi3").onmouseup=function () { eclairer1('envoi3'); }
 document.getElementById("envoi3").onmousedown=function () { foncer1('envoi3'); }
 document.getElementById("envoi3").onmouseout= function () { retournormal1('envoi3'); }
 document.getElementById("envoi3").onmouseover=function () {choix=3; eclairer1('envoi3');  }
 document.getElementById("envoi3").onclick=function () { LireRSS(3); }  
   
 document.getElementById("envoi4").onmouseup=function () { eclairer1('envoi4'); }
 document.getElementById("envoi4").onmousedown=function () { foncer1('envoi4'); }
 document.getElementById("envoi4").onmouseout= function () { retournormal1('envoi4'); }
 document.getElementById("envoi4").onmouseover=function () {choix=4; eclairer1('envoi4'); }
 document.getElementById("envoi4").onclick=function () { LireRSS(4);}  
 
 document.getElementById("envoi5").onmouseup=function () { eclairer1('envoi5'); }
 document.getElementById("envoi5").onmousedown=function () { foncer1('envoi5'); }
 document.getElementById("envoi5").onmouseout= function () { retournormal1('envoi5'); }
 document.getElementById("envoi5").onmouseover=function () { choix=5; eclairer1('envoi5'); }
 document.getElementById("envoi5").onclick=function () { LireRSS(5); }  
 
 document.getElementById("envoiRSS").onmouseup=function () { eclairer1('envoiRSS'); }
 document.getElementById("envoiRSS").onmousedown=function () { foncer1('envoiRSS'); }
 document.getElementById("envoiRSS").onmouseout= function () { retournormal1('envoiRSS'); }
 document.getElementById("envoiRSS").onmouseover=function () { choix=6; eclairer1('envoiRSS'); }
 document.getElementById("envoiRSS").onclick=function () { LireRSS(6);}  
 document.getElementById("envoiRSS").style.background="#421b23 url('plugins/paramspip/fichiers/dir"+idarticle+"/fleche.gif') no-repeat  center;";
 
 }
//***********************************************************************
// Les trois fonctions suivantes permettent de gérer l'apparence des boutons lumineux.
//***********************************************************************
 
function foncer1(nom){
        
    document.getElementById(nom).style.border="3px inset #777777";
    document.getElementById(nom).style.height="20px";
    document.getElementById(nom).style.color="silver";
if (navigator.appName!="Microsoft Internet Explorer")  
    document.getElementById(nom).style.width="30px";
    
if (nom=="envoiRSS") document.getElementById(nom).style.background="#421b23 url('plugins/paramspip/fichiers/dir"+idarticle+"/fleche2.gif') no-repeat  center;";
else document.getElementById(nom).style.background="#421b23";
 
}  
 
function retournormal1(nom){
                                                                       
    document.getElementById(nom).style.color="#ffffff";
    document.getElementById(nom).style.border="5px outset #777777";
if (navigator.appName!="Microsoft Internet Explorer") {
    document.getElementById(nom).style.height="16px";
    document.getElementById(nom).style.width="26px";
}
    document.getElementById('titreRSS').style.background="#550011";
    document.getElementById('titreRSS').innerHTML="";
 
if (nom=="envoiRSS")document.getElementById(nom).style.background="#550011 url('plugins/paramspip/fichiers/dir"+idarticle+"/fleche.gif') no-repeat  center;";
else document.getElementById(nom).style.background="#550011";
 
    
}  
 
function eclairer1(nom){
        
    document.getElementById(nom).style.color="#c0c0c0";
    document.getElementById(nom).style.border="5px outset #777777";
if (navigator.appName!="Microsoft Internet Explorer") {
    document.getElementById(nom).style.height="16px";
    document.getElementById(nom).style.width="26px";
}
    document.getElementById('titreRSS').style.color="#c0c0c0";
    document.getElementById('titreRSS').style.background="#880000";
if (nom=="envoi1"){    document.getElementById('titreRSS').innerHTML="phpfrance";}
if (nom=="envoi2"){    document.getElementById('titreRSS').innerHTML="mysql";}
if (nom=="envoi3"){    document.getElementById('titreRSS').innerHTML="editeurjavascript";}
if (nom=="envoi4"){    document.getElementById('titreRSS').innerHTML="W3C";}
if (nom=="envoi5"){    document.getElementById('titreRSS').innerHTML="ParamSPIP";}
if (nom=="envoiRSS"){    
    document.getElementById(nom).style.background="#880000 url('plugins/paramspip/fichiers/dir"+idarticle+"/fleche1.gif') no-repeat  center;";
//alert('plugins/paramspip/fichiers/dir'+idarticle+'/fleche1.gif');    
    document.getElementById('titreRSS').innerHTML="Votre choix";}
else document.getElementById(nom).style.background="#880000";
            
}  
 
 
//********************************************************************************
//         Le moteur ajax  
//*********************************************************************************
 
function LireRSS(choix){
// Création de l'objet XMLHttpRequest
    var xhr_object = null;
    if(window.XMLHttpRequest) // FIREFOX
    xhr_object = new XMLHttpRequest();
    else if(window.ActiveXObject) // IE
    xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    else return(false);
// Appel asynchrone du fichier fluxRSS.php qui renverra le flux sous la forme d'un fichier XML   
    var vurl=null;
    if (choix==1) vurl="http://www.phpfrance.com/tutoriaux/rss.php";
    if (choix==2) vurl="http://www-fr.mysql.com/mysql.rss";
    if (choix==3) vurl="http://www.editeurjavascript.com/rss/index.rss";
    if (choix==4) vurl="http://www.w3.org/2000/08/w3c-synd/home.rss";
    if (choix==5) vurl="http://oramos.free.fr/paramSPIP/spip.php?page=backend";
    if (choix==6) vurl=document.getElementById('votre_url').value;
// On déclare ici le paramètre qui sera envoyé par post.    
    var paramurl="vurl="+vurl;
    var fichier="plugins/paramspip/fichiers/dir"+idarticle+"/fluxRSS.php";
    xhr_object.open("POST",fichier,true) ;
 
 
// la valeur envoyée comme type de contenu par post  est     "application/x-www-form-urlencoded" (de type formulaire)
    xhr_object.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr_object.send(paramurl);
    
// Lorsque on a la réponse, on la stocke dans la variable reponseXML
    xhr_object.onreadystatechange = function() {    
        if(xhr_object.readyState == 4){  
            if(xhr_object.status == 200){  
          
            var reponseXML=xhr_object.responseXML;
            //On récupère tous les éléments <item> du fichier reponseXML
            var items=reponseXML.getElementsByTagName("item");
            // On fait une boucle pour récupérer les titres, les liens, les descriptions.
            supprimerlignes()
            for(i=0;i<items.length;i++){
            // firstChild.nodeValue correspond à ce qui est écrit entre <title> et </title>, ou <link> et </link>, ou <description> et </description>
            var titre=items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
            var lien=items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
            // Certains flux n'ont pas de descriptions, donc on enverra "" à la place.
            var description=null;
            if (items[i].getElementsByTagName("description")[0])
            description=items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
            else description="";
            creerlignes(titre,lien,description);
            document.getElementById('titreRSS').innerHTML="Syndication r&eacute;ussie";
            }
    }                             
  } else     document.getElementById('titreRSS').innerHTML="Attente...";    
 }    
 // Un appel récursif, qui pemet d'actualiser les données toutes les 10 minutes.
 setTimeout("LireRSS(choix)",600000);
}
 
function creerlignes(titre,lien,description){
 
//On crée des lignes : une ligne h2 pour le titre sur lequel il y aura un lien vers l'intégralité de l'article,
// une ligne hr de soulignement, des lignes pour la description et en enfin un saut de ligne pour la séparation.  
var nouveauP=document.createElement("h2");
var nouveauP1=document.createElement("div");
var nouveauHr=document.createElement("hr");
var nouveauBr=document.createElement("br");
var nouveauA=document.createElement("a");
var nouveauTxt=document.createTextNode(titre);
var nouveauTxt1=document.createTextNode(description);
nouveauA.setAttribute("href",lien);
nouveauA.appendChild(nouveauTxt);
nouveauP.appendChild(nouveauA);
nouveauP1.innerHTML=description;
 
document.getElementById("conteneurlignesRSS").appendChild(nouveauP);
document.getElementById("conteneurlignesRSS").appendChild(nouveauHr);
document.getElementById("conteneurlignesRSS").appendChild(nouveauP1);
document.getElementById("conteneurlignesRSS").appendChild(nouveauBr);
 
}
 
function supprimerlignes(){
// On supprime tout ce qu'il y a dans conteneurlignesRSS.  
document.getElementById("conteneurlignesRSS").innerHTML="";
}
//************************************************************************************************************************
//                                                                                   Gestionnaire d'événements
//************************************************************************************************************************
 
// Au chargement de la page. 
window.onload=initialisation;
 
function initialisation() {
setHover();
 choix=0;
 
 document.getElementById("envoi1").onmouseup=function () { eclairer1('envoi1'); }
 document.getElementById("envoi1").onmousedown=function () { foncer1('envoi1'); }
 document.getElementById("envoi1").onmouseout= function () { retournormal1('envoi1'); }
 document.getElementById("envoi1").onmouseover=function () { choix=1; eclairer1('envoi1');  }
 document.getElementById("envoi1").onclick=function () {  LireRSS(1);  }
 
 document.getElementById("envoi2").onmouseup=function () { eclairer1('envoi2'); }
 document.getElementById("envoi2").onmousedown=function () { foncer1('envoi2'); }
 document.getElementById("envoi2").onmouseout= function () { retournormal1('envoi2'); }
 document.getElementById("envoi2").onmouseover=function () {choix=2;  eclairer1('envoi2');  }
 document.getElementById("envoi2").onclick=function () { LireRSS(2);  } 
  
 document.getElementById("envoi3").onmouseup=function () { eclairer1('envoi3'); }
 document.getElementById("envoi3").onmousedown=function () { foncer1('envoi3'); }
 document.getElementById("envoi3").onmouseout= function () { retournormal1('envoi3'); }
 document.getElementById("envoi3").onmouseover=function () {choix=3; eclairer1('envoi3');  }
 document.getElementById("envoi3").onclick=function () { LireRSS(3); } 
  
 document.getElementById("envoi4").onmouseup=function () { eclairer1('envoi4'); }
 document.getElementById("envoi4").onmousedown=function () { foncer1('envoi4'); }
 document.getElementById("envoi4").onmouseout= function () { retournormal1('envoi4'); }
 document.getElementById("envoi4").onmouseover=function () {choix=4; eclairer1('envoi4'); }
 document.getElementById("envoi4").onclick=function () { LireRSS(4);} 
 
 document.getElementById("envoi5").onmouseup=function () { eclairer1('envoi5'); }
 document.getElementById("envoi5").onmousedown=function () { foncer1('envoi5'); }
 document.getElementById("envoi5").onmouseout= function () { retournormal1('envoi5'); }
 document.getElementById("envoi5").onmouseover=function () { choix=5; eclairer1('envoi5'); }
 document.getElementById("envoi5").onclick=function () { LireRSS(5); } 
 
 document.getElementById("envoiRSS").onmouseup=function () { eclairer1('envoiRSS'); }
 document.getElementById("envoiRSS").onmousedown=function () { foncer1('envoiRSS'); }
 document.getElementById("envoiRSS").onmouseout= function () { retournormal1('envoiRSS'); }
 document.getElementById("envoiRSS").onmouseover=function () { choix=6; eclairer1('envoiRSS'); }
 document.getElementById("envoiRSS").onclick=function () { LireRSS(6);} 
 document.getElementById("envoiRSS").style.background="#421b23 url('plugins/paramspip/fichiers/dir"+idarticle+"/fleche.gif') no-repeat  center;";
 
 }
//***********************************************************************
// Les trois fonctions suivantes permettent de gérer l'apparence des boutons lumineux.
//***********************************************************************
 
function foncer1(nom){
         
    document.getElementById(nom).style.border="3px inset #777777";
    document.getElementById(nom).style.height="20px";
    document.getElementById(nom).style.color="silver";
if (navigator.appName!="Microsoft Internet Explorer") 
    document.getElementById(nom).style.width="30px";
     
if (nom=="envoiRSS") document.getElementById(nom).style.background="#421b23 url('plugins/paramspip/fichiers/dir"+idarticle+"/fleche2.gif') no-repeat  center;";
else document.getElementById(nom).style.background="#421b23";
 
} 
 
function retournormal1(nom){
                                                                      
    document.getElementById(nom).style.color="#ffffff";
    document.getElementById(nom).style.border="5px outset #777777";
if (navigator.appName!="Microsoft Internet Explorer") {
    document.getElementById(nom).style.height="16px";
    document.getElementById(nom).style.width="26px";
}
    document.getElementById('titreRSS').style.background="#550011";
    document.getElementById('titreRSS').innerHTML="";
 
if (nom=="envoiRSS")document.getElementById(nom).style.background="#550011 url('plugins/paramspip/fichiers/dir"+idarticle+"/fleche.gif') no-repeat  center;";
else document.getElementById(nom).style.background="#550011";
 
     
} 
 
function eclairer1(nom){
         
    document.getElementById(nom).style.color="#c0c0c0";
    document.getElementById(nom).style.border="5px outset #777777";
if (navigator.appName!="Microsoft Internet Explorer") {
    document.getElementById(nom).style.height="16px";
    document.getElementById(nom).style.width="26px";
}
    document.getElementById('titreRSS').style.color="#c0c0c0";
    document.getElementById('titreRSS').style.background="#880000";
if (nom=="envoi1"){    document.getElementById('titreRSS').innerHTML="phpfrance";}
if (nom=="envoi2"){    document.getElementById('titreRSS').innerHTML="mysql";}
if (nom=="envoi3"){    document.getElementById('titreRSS').innerHTML="editeurjavascript";}
if (nom=="envoi4"){    document.getElementById('titreRSS').innerHTML="W3C";}
if (nom=="envoi5"){    document.getElementById('titreRSS').innerHTML="ParamSPIP";}
if (nom=="envoiRSS"){     
    document.getElementById(nom).style.background="#880000 url('plugins/paramspip/fichiers/dir"+idarticle+"/fleche1.gif') no-repeat  center;";
   
    document.getElementById('titreRSS').innerHTML="Votre choix";}
else document.getElementById(nom).style.background="#880000";
             
} 
 
 
//********************************************************************************
//         Le moteur ajax 
//*********************************************************************************
 
function LireRSS(choix){
// Création de l'objet XMLHttpRequest
    var xhr_object = null;
    if(window.XMLHttpRequest) // FIREFOX
    xhr_object = new XMLHttpRequest();
    else if(window.ActiveXObject) // IE
    xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    else return(false);
// Appel asynchrone du fichier fluxRSS.php qui renverra le flux sous la forme d'un fichier XML  
    var vurl=null;
    if (choix==1) vurl="http://www.phpfrance.com/tutoriaux/rss.php";
    if (choix==2) vurl="http://www-fr.mysql.com/mysql.rss";
    if (choix==3) vurl="http://www.editeurjavascript.com/rss/index.rss";
    if (choix==4) vurl="http://www.w3.org/2000/08/w3c-synd/home.rss";
    if (choix==5) vurl="http://oramos.free.fr/paramSPIP/spip.php?page=backend";
    if (choix==6) vurl=document.getElementById('votre_url').value;
// On déclare ici le paramètre qui sera envoyé par post.     
    var paramurl="vurl="+vurl;
    var fichier="plugins/paramspip/fichiers/dir"+idarticle+"/fluxRSS.php";
    xhr_object.open("POST",fichier,true) ;
 
 
// la valeur envoyée comme type de contenu par post  est     "application/x-www-form-urlencoded" (de type formulaire)
    xhr_object.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr_object.send(paramurl);
     
// Lorsque on a la réponse, on la stocke dans la variable reponseXML
    xhr_object.onreadystatechange = function() {   
        if(xhr_object.readyState == 4){ 
            if(xhr_object.status == 200){ 
         
            var reponseXML=xhr_object.responseXML;
            //On récupère tous les éléments <item> du fichier reponseXML
            var items=reponseXML.getElementsByTagName("item");
            // On fait une boucle pour récupérer les titres, les liens, les descriptions.
            supprimerlignes()
            for(i=0;i<items.length;i++){
            // firstChild.nodeValue correspond à ce qui est écrit entre <title> et </title>, ou <link> et </link>, ou <description> et </description>
            var titre=items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
            var lien=items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
            // Certains flux n'ont pas de descriptions, donc on enverra "" à la place.
            var description=null;
            if (items[i].getElementsByTagName("description")[0])
            description=items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
            else description="";
            creerlignes(titre,lien,description);
            document.getElementById('titreRSS').innerHTML="Syndication r&eacute;ussie";
            }
    }                              
  } else     document.getElementById('titreRSS').innerHTML="Attente...";     
 }     
 // Un appel récursif, qui pemet d'actualiser les données toutes les 10 minutes.
 setTimeout("LireRSS(choix)",600000);
}
 
function creerlignes(titre,lien,description){
 
//On crée des lignes : une ligne h2 pour le titre sur lequel il y aura un lien vers l'intégralité de l'article,
// une ligne hr de soulignement, des lignes pour la description et en enfin un saut de ligne pour la séparation. 
var nouveauP=document.createElement("h2");
var nouveauP1=document.createElement("div");
var nouveauHr=document.createElement("hr");
var nouveauBr=document.createElement("br");
var nouveauA=document.createElement("a");
var nouveauTxt=document.createTextNode(titre);
var nouveauTxt1=document.createTextNode(description);
nouveauA.setAttribute("href",lien);
nouveauA.appendChild(nouveauTxt);
nouveauP.appendChild(nouveauA);
nouveauP1.innerHTML=description;
 
document.getElementById("conteneurlignesRSS").appendChild(nouveauP);
document.getElementById("conteneurlignesRSS").appendChild(nouveauHr);
document.getElementById("conteneurlignesRSS").appendChild(nouveauP1);
document.getElementById("conteneurlignesRSS").appendChild(nouveauBr);
 
}
 
function supprimerlignes(){
// On supprime tout ce qu'il y a dans conteneurlignesRSS. 
document.getElementById("conteneurlignesRSS").innerHTML="";
}

< ?php
header("content-type:text/xml") ;
readfile($_POST[’vurl’]) ;
 ?>