lundi 17 novembre 2014

Blogger - Blogspot : afficher plusieurs flux rss sur une page



Pour présenter vos autres sites, ou pour proposer à vos lecteurs de suivre via votre plateforme, les informations nouvelles issues d'autres sites proches, il peut être utile de créer une page de veille informative en affichant plusieurs flux rss qui permettront en un coup d’œil, d'avoir accès à un ensemble des derniers articles parus sur de nombreux sites, comme c'est par exemple le cas sur cette page. Aucune connaissance requise, et le script est adaptable pour vous permettre d'autres utilisations.

Par exemple, ce script pourrait également vous permettre d'afficher en une seule page les informations provenant de catégories diverses, si votre blog ou site Blogger - blogspot publie des articles à un rythme soutenu (par exemple, les flux rss des articles de catégories spécifiques, les flux de commentaires, etc...). Tous ce que vous avez à faire pour cela est de collecter les adresses url des flux rss que vous souhaitez voir s'afficher, et d'utiliser le code que nous vous proposons ici.

Nous utiliserons pour cela les Api google et le code javascript introduit dans l'article Insérer facilement un lecteur rss sur votre page web. Pour une démonstration, vous pouvez parcourir nos pages de publications, telles que la page rss Sciences et Culture.

Inutile de faire compliqué : choisissez les adresses des flux rss qui vous intéressent. Remplacez ensuite dans le code suivant les url_rss par les adresses url des flux rss choisis (l'exemple ici est donné pour afficher 6 flux rss en colonnes de 2).

Si vous souhaitez donner un titre et un lien à vos rss, remplacez également les adresse_url_site par l'adresse de chaque site, et titre_site par leur titre.

<div class="example">
<div class="rss_titre" style="text-align: center;">
<b><a href="adresse_url_site1" target="_blank">titre_site1</a></b></div>
<div class="rss_titre" style="text-align: center;">
<b><a href="adresse_url_site2" target="_blank">titre_site2</a></b></div>
<div class="post_results" id="post_results1" rss_num="3" rss_url="url_rss1">
<div class="loading_rss">
<img alt="Loading..." src="http://2.bp.blogspot.com/-Yn2gQQw9q3I/VF_E1-zqyHI/AAAAAAAACBI/wKnBAjFn3l0/s1600/loading.gif" />
            </div>
</div>
<div class="post_results" id="post_results2" rss_num="3" rss_url="url_rss2">
<div class="loading_rss">
<img alt="Loading..." src="http://2.bp.blogspot.com/-Yn2gQQw9q3I/VF_E1-zqyHI/AAAAAAAACBI/wKnBAjFn3l0/s1600/loading.gif" />
            </div>
</div>
<div style="clear: both;">
</div>
<div class="rss_titre" style="text-align: center;">
<b><a href="adresse_url_site3" target="_blank">titre_site3</a></b></div>
<div class="rss_titre" style="text-align: center;">
<b><a href="adresse_url_site4" target="_blank">titre_site4</a></b></div>
<div class="post_results" id="post_results3" rss_num="3" rss_url="url_rss3">
<div class="loading_rss">
<img alt="Loading..." src="http://2.bp.blogspot.com/-Yn2gQQw9q3I/VF_E1-zqyHI/AAAAAAAACBI/wKnBAjFn3l0/s1600/loading.gif" />
            </div>
</div>
<div class="post_results" id="post_results4" rss_num="3" rss_url="url_rss4">
<div class="loading_rss">
<img alt="Loading..." src="http://2.bp.blogspot.com/-Yn2gQQw9q3I/VF_E1-zqyHI/AAAAAAAACBI/wKnBAjFn3l0/s1600/loading.gif" />
            </div>
</div>
<div style="clear: both;">
</div>
<div class="rss_titre" style="text-align: center;">
<b><a href="adresse_url_site5" target="_blank">titre_site5</a></b></div>
<div class="rss_titre" style="text-align: center;">
<b><a href="adresse_url_site6" target="_blank">titre_site6</a></b></div>
<div class="post_results" id="post_results5" rss_num="3" rss_url="url_rss5">
<div class="loading_rss">
<img alt="Loading..." src="http://2.bp.blogspot.com/-Yn2gQQw9q3I/VF_E1-zqyHI/AAAAAAAACBI/wKnBAjFn3l0/s1600/loading.gif" />
            </div>
</div>
<div class="post_results" id="post_results6" rss_num="3" rss_url="url_rss6">
<div class="loading_rss">
<img alt="Loading..." src="http://2.bp.blogspot.com/-Yn2gQQw9q3I/VF_E1-zqyHI/AAAAAAAACBI/wKnBAjFn3l0/s1600/loading.gif" />
            </div>
</div>
<div style="clear: both;">
</div>
</div>

Insérez ce code html dans une de vos pages ou l'un de vos articles en mode Html, et ajoutez-y enfin les codes Css (pour l'affichage) et Javascript (pour la fonctionnalité) que vous trouverez dans la page du script original : insérer facilement un lecteur rss dans votre page web. Modifiez le css comme bon vous semble pour l'adapter au design de votre site.

Enregistrez le tout et le tour est joué, vous obtiendrez un article qui regroupe en une seule page plusieurs flux rss, à la manière de ce que l'on peut trouver (démonstration) sur notre page de veille informative Psychologie.

Notes : 

Si vous souhaitez afficher plus de flux, copiez-collez dans le code html fourni autant de fois que voulu (après un <div style="clear: both;">) le code suivant, correspondant à l'ajout de deux flux. N'oubliez pas cependant que le code charge les flux rss en javascript, côté client, et que tous vos lecteurs n'ont pas forcément un pc dernier cri. Le temps de chargement peut devenir long s'il y'a trop de rss suivis.

</div>
<div class="rss_titre" style="text-align: center;">
<b><a href="adresse_url_siteX" target="_blank">titre_siteX</a></b></div>
<div class="rss_titre" style="text-align: center;">
<b><a href="adresse_url_siteY" target="_blank">titre_siteY</a></b></div>
<div class="post_results" id="post_resultsX" rss_num="3" rss_url="url_rssX">
<div class="loading_rss">
<img alt="Loading..." src="http://2.bp.blogspot.com/-Yn2gQQw9q3I/VF_E1-zqyHI/AAAAAAAACBI/wKnBAjFn3l0/s1600/loading.gif" />
            </div>
</div>
<div class="post_results" id="post_resultsY" rss_num="3" rss_url="url_rssY">
<div class="loading_rss">
<img alt="Loading..." src="http://2.bp.blogspot.com/-Yn2gQQw9q3I/VF_E1-zqyHI/AAAAAAAACBI/wKnBAjFn3l0/s1600/loading.gif" />
            </div>
</div>

Si vous souhaitez afficher plus ou moins d'article par flux rss, changez les valeurs de rss_num="3" en modifiant à votre gré le nombre d'articles affichés.

0 commentaires:

Enregistrer un commentaire