Widgets handleiding

Algemeen

Een widget is een kleine applicatie die eenvoudig in een webomgeving (website, blog, …) kan ingepast worden, en die (eventueel wisselende) inhoud van elders toont. Op die manier kan men op de eigen bibliotheekblog een zoekmodule plaatsen die verwijst naar zoeken.bibliotheek.be, of een module die de laatste nieuwe aanwinsten in Digileen toont.

De modules die ook als widget beschikbaar zijn, zijn te herkennen aan het download-icoontje in de rechterbovenhoek. Wanneer men hierop klikt, verschijnt de widgetpagina, en de code om de gekozen module als widget te gebruiken. Men kan de beschikbare widgets ook rechtstreeks bekijken via de widget-pagina van bibliotheek.be: het dropdownmenu geeft een overzicht van de beschikbare bibliotheek.be-widgets.

De auteurswidget, die al eerder werd ontwikkeld, is nog steeds bereikbaar via de auteurspagina’s zelf (bv. Klaas Verplancke).

Bibliotheken met een publiekscatalogus die onderdeel is van het project Bibliotheekportalen, kunnen ook een aangepaste lokale zoekwidget genereren.

Bibliotheek.be widgets

Surf naar www.bibliotheek.be/build/widget
Kies uit de uitklaplijst de gewenste widget.
Indien je de standaardnaam van de widget wil vervangen, typ dan een alternatieve naam bij Widget Titel.
Klik op de knop ‘Voorbeeldweergave’
Er verschijnen enkele extra gegevens:

De code om de widget te integreren in een blog, website, ...
Enkele opties om de widget snel en eenvoudig te integreren in tools zoals iGoogle en Netvibes
Een voorbeeldweergave van de widget

Lokale zoekwidget

Ga hiervoor naar de creatiepagina van de zoekwidget op Bibliotheek.be.
Vul de volgende elementen in:
- Titel: beknopte titel die naast het biblogo zal verschijnen
- Tekst: minstens 10 woorden, uitleg over wat de gebruiker kan verwachten (bv.: 'Zoek en vind duizenden boeken, strips, cd's, dvd's, websites, e-boeken en digitale songs)
- URL-catalogus: link naar de bibcatalogus, van de vorm http://naamgemeente.bibliotheek.be
- Extra css: is niet verplicht (enkel wanneer je de look&feel van de widget wil aanpassen, vereist kennis van CSS)
- Email: je eigen mailadres
Klik op opslaan.

Je krijgt nu de code van de widget te zien, samen met een voorbeeld van de widget. Je ontvangt ook een mailbericht met daarin een link waarmee je de widget nog kan aanpassen. Hou deze mail dus goed bij!

Een bibliotheek.be-widget integreren in een blog

Elk blogsysteem heeft zijn eigen manier van integreren van widgets. De werkwijze hieronder geldt voor blogs in Blogger.

Log in in Blogger en open je blog.
Klik bovenaan rechts in de balk op de link ‘Aanpassen’.
Afhankelijk van de layout van je blog, zijn er verschillende plaatsen waar je een widget kan toevoegen, aangeduid via de link ‘Een gadget toevoegen’. Klik op één van deze links.
Er verschijnt een venster met enkele ‘gadget-opties’. Kies voor ‘HTML/Javascript’.
Geef de gadget een titel (bv. Bibliotheek.be widgets).
Open een nieuw tabblad of venster in je browser, surf naar www.bibliotheek.be/build/widget, volg de bovenvermelde stappen (bij ‘Algemeen’), en kopieer de code van de gewenste widget.
Plak deze code bij ‘Inhoud’ en klik op ‘OPSLAAN’.
De gadget met de widget-code is nu toegevoegd aan je layout. Versleep deze eventueel naar een andere plaats, indien nodig.
Klik bovenaan op de link ‘Blog weergeven’ om de blog met de nieuwe widget te bekijken.
Wil je de gadget met daarin de widget aanpassen, dan kan dat via de eerder vernoemde stappen, maar ook via het werktuig-icoontje rechts onderaan de gadget.

Je kan op deze manier per widget een gadget aanmaken, of de code van verschillende widgets onder elkaar in éénzelfde gadget toevoegen. In dat laatste geval moet men soms wat spelen met de hoogtes van de diverse widgets binnen de gadget, door in de code de waarden na ‘height:’ hoger of lager te maken, zodat de diverse modules mooi op elkaar aansluiten, zonder al te veel witruimte en/of overlappingen.

Wie gebruik maakt van een Wordpress-blog, kan enkel als admin van de blog de code voor de widget toevoegen. Wanneer de blog gehost wordt op wordpress.com is dit omwille van veiligheidsredenen niet toegelaten, en kan je de widgets op dit moment spijtig genoeg niet opnemen.

Open het dashboard van je Wordpress-blog.
Ga naar ‘Appearance’ en kies de optie ‘Widgets’.
Sleep de widget ‘Text’ naar de sidebar.
Geef de widget een naam.
Open een nieuw tabblad of venster in je browser, surf naar www.bibliotheek.be/build/widget, volg de bovenvermelde stappen (bij ‘Algemeen’), en kopieer de code van de gewenste widget.
Plak deze code in Wordpress in het tekstveld van de widget.
Klik ‘Save’ en daarna ‘Close’.
Bekijk het resultaat in je blog (via de optie ‘Visit Site’ bovenaan).

Wanneer je geen admin bent van je Wordpress-blog dan verwijdert de blog automatisch de code.

Een bibliotheek.be-widget integreren in Netvibes

Surf naar www.netvibes.com en log in met je account en bijbehorend wachtwoord.
Open het tabblad waarin je de module wil integreren.
Open een nieuw tabblad in je browser, surf naar www.bibliotheek.be/build/widget, volg de bovenvermelde stappen (bij ‘Algemeen’) tot de widget-code en de extra knoppen verschijnen.
Klik op de link ‘Netvibes’ (tweede icoontje van links, onder de widget-code).
Er opent zich een scherm/tabblad van Netvibes. Klik op ‘Voeg toe aan mijn Netvibes’.
Netvibes voegt de module met de widget nu toe, bovenaan links op het eerste tabblad.
Verplaats de module eventueel naar een andere plaats op hetzelfde tabblad, door het te verslepen. Verplaats de module eventueel naar een ander tabblad door het te verslepen naar de naam van dat tabblad.

Een bibliotheek.be-widget integreren in iGoogle

Log in in iGoogle met je Google-account en bijbehorend wachtwoord.
Open het tabblad waarin je de module wil integreren.
Open een nieuw tabblad in je browser, surf naar www.bibliotheek.be/build/widget, volg de bovenvermelde stappen (bij ‘Algemeen’) tot de widget-code en de extra knoppen verschijnen.
Klik op de link ‘iGoogle’ (eerste icoontje van links, onder de widget-code).
Er opent zich een scherm/tabblad van iGoogle. Klik op ‘Add to iGoogle’.
Indien je nog niet was ingelogd met je google-account, doe dan dan nu.
iGoogle voegt de module met de widget nu toe aan je iGoogle.
Verplaats de module eventueel naar een andere plaats op hetzelfde tabblad, door het te verslepen.

Een bibliotheek.be-widget integreren in een website

Wanneer je zelf beheerder bent van de website, kan je de widget-code die je vindt door bovenvermelde stappen (bij ‘Algemeen’) te doorlopen, kopiëren en plakken in de html-code van je website. Indien je geen beheerder bent, of indien je bibliotheek/gemeente gebruik maakt van een content management systeem, waardoor je geen code kan toevoegen, neem dan contact op met de netwerkbeheerder of webmaster.