Een RSS-feed is een beknopt overzicht van de laatst toegevoegde pagina’s aan een website. Zo’n RSS-feed kunnen je bezoekers inlezen in hun feed reader, maar je kunt een RSS-feed ook gebruiken om de laatste berichten van andere sites (of die van jezelf) overzichtelijk op een webpagina te vertonen. En om die laatste toepassing gaat het in dit artikel.
Er zijn diverse manieren om RSS-feeds op je eigen site te plaatsen. Bij dit voorbeeld maak ik gebruik van een JQuery plugin, omdat dit een van de eenvoudigste manieren is hiervoor. JQuery is een soort ‘bibliotheek’ van JavaScript-functies. Voor die bibliotheek zijn door verschillende mensen plugins gemaakt, die je gratis kunt gebruiken. Een van die plugins is FeedEK, een plugin voor het tonen van RSS op je website.
Hoe gebruik je FeedEK?
Allereerst download je het plugin-bestand en pak je het uit met behulp van een programma als WinRar. De bestanden plaats je op je webserver in een aparte map, die je bijvoorbeeld ‘feedek’ noemt.
Vervolgens moet je de JavaScript-bestanden van de plugin aanroepen in je HTML-code. Dit doe je door tussen de <head>-tags van je HTML de volgende code neer te zetten:
<head>
<script type="text/javascript" src="../feedek/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../feedek/FeedEk.js"></script>
Let erop dat je achter src=" de juiste plaats van de bestanden op je server aangeeft, anders werkt de plugin niet. Ik heb zelf bijvoorbeeld al mijn javascript-bestanden in een map staan die ‘js’ heet, dus bij mij wordt deze code: js/feedek/jquery-1.6.2.min.js
src="
js/feedek/jquery-1.6.2.min.js
Op de plek waar je de feed in je site wilt integreren plaats je nu een lege <div>, ergens tussen de <body>-tags, op deze manier: <div id="divRss"> </div> Op plaats waar deze div staat, wordt straks automatisch de feed weergegeven.
<div>
<body>
<div id="divRss"> </div>
De volgende stap is dat je met behulp van JavaScript aangeeft wat de bron van de feed is en nog wat andere opties instelt. De code om dat te doen plaats je net voor het einde van de header van je HTML, dus vóór de tag: </head>.
</head>
<script type="text/javascript"> $(document).ready(function(){ $('#divRss').FeedEk({ FeedUrl : 'https://de-help-desk.nl/rss-de-help-desk.xml', MaxCount : 5, ShowDesc : false, ShowPubDate : true }); }); </script>
Het voorbeeld dat ik op deze pagina heb gebruikt, is de feed van de-help-desk.nl. De parameters die je met de bovenstaande code aangeeft zijn in de eerste plaats de URL van de feed (zoek daarvoor op de betreffende website naar ‘RSS-feed’, ‘lees in je RSS-reader’ of naar het oranje RSS-ikoontje – klik er met je rechtermuisknop op en kopieer de link).
Met MaxCount geef je aan hoeveel berichten er getoond moeten worden. Meestal bevatten RSS-feeds in totaal maximaal 10 berichten. Met ShowDesc geef je aan of er per bericht in de feed wel of geen beschrijving moet worden weergegeven (deze beschrijvingen moeten zich dan natuurlijk wel in de RSS-feed bevinden, anders zullen ze niet worden vertoond, zelfs al heb je hier de waarde ‘true’ ingesteld). Met ShowPubDate geef je aan of je wilt dat erbij wordt gezet op welke datum de nieuwe content op de oorspronkelijke site is verschenen. Deze laatste twee waardes kan je op ‘true’ of op ‘false’ zetten, voor als je ze wel of niet wilt tonen.
Tot slot kun je de lay-out van de feedweergave nog aanpassen met CSS, bijvoorbeeld de breedte en kleuren. Daarvoor zet je de volgende code in de head van je HTML, of je voegt het toe aan je CSS-bestand (in dat laatste geval haal je de eerste regel van de code hieronder (<style type="text/css">) en de laatste (</style>) weg). De stijlkenmerken van de RSS-feed die ik op deze pagina heb gezet, zijn:
<style type="text/css">
</style>
<style type="text/css"> #divRss{ width:300px; padding: 6px; background-color:#FFF; border:1px solid #D3CAD7; margin:4px; float: right; } .ItemTitle{ font-weight:bold; font-size: 12px; margin:5px 0px 0px 0px; padding-top:3px; } .ItemTitle a{ color:#4B088A; text-decoration:none } .ItemTitle a:hover{ text-decoration:underline } .ItemContent{ padding:1px 3px 3px 3px; border-bottom:1px solid #D3CAD7; color:#3E3E3E; } .ItemDate{ font-size:11px; color:#585858; } </style>
Met #divRss kun je de kleuren en grootte van de box waarin de feed verschijnt veranderen. ItemTitle geeft de titel van elk bericht in de feed aan. Met ItemContent wijzig je de weergave van de beschrijving van het bericht en met ItemDate heb je invloed op de weergave van de datum.
Dit was alles, hiermee heb je als het goed is in korte tijd een handige nieuwe functie aan je site toegevoegd!
« Ga terug
