De opdracht van nieuwe klant ASL Travel begon bij het uitschrijven van een concept waarin uitgebreid het gebruik van externe gegevens zoals foto's van Flickr, video's van YouTube en kaarten van Google Maps aan bod kwam. De klant had een overvloed aan foto's en video's van hun trips en wilde deze graag delen met hun bezoekers. Voor het opslaan van de foto's kozen we voor Flickr. Via deze blogpost wil ik een kort overzicht geven over hoe we te werk zijn gegaan met de Flickr API.

De vraag van de klant maakte snel duidelijk dat ze al hun foto's online wilden plaatsen, maar dat niet elke foto een plaats had op de website. De klant kan via een op maat gemaakte module een onbeperkt aantal Flickr-foto's selecteren om aan hun pagina's toe te voegen, natuurlijk zonder de WebAdmin te verlaten. Er is de mogelijkheid voor de bezoeker om alle foto's op Flickr te bekijken.

Stap 1: Aanvragen van een Flickr API key

Zoals je bij elke API een key moet aanvragen, moet je dit bij de Flickr API ook doen. Hierdoor kunnen we de nodige foto's opvragen.

Stap 2: De juiste foto's vinden

Om makkelijk de juiste foto's te vinden, hebben we een zoekfunctie gemaakt die zowel door de tags als de titels van de foto's gaat zoeken. Natuurlijk werden enkel foto's van de klant zelf weergegeven, die we uit de Flickr account konden binnen halen. Het grote probleem hier was dat een aantal foto's enkel voor de website bedoeld was en dus niet zichtbaar zijn op Flickr met gevolg we deze foto's niet vonden via onze zoekfunctie. Om deze foto's toch te kunnen selecteren moet je de applicatie toegang verlenen tot de privégegevens van deze gebruiker. Hiervoor moet je eigenlijk een aparte pagina voor maken die deze aanvraag doet waardoor je een frob-key krijgt die je dan kan omvormen tot een token. Met deze token krijg je toegang tot alle gegevens van de account.

Stap 3: De foto's weergeven

Via de Flickr API krijg je buiten het orginele formaat ook nog een 5-tal kleine formaten terug, kwestie van de laadtijden te optimaliseren. Om de foto's mooi weer te geven maakten we gebruik van een op maat gemaakt foto-slider. Als je op een foto klikt krijg je een grotere afbeelding te zien en wanneer je op het Flickr-icoontje klikt ga je naar de originele pagina van deze foto op Flickr.

Met de nodige hulp van de online documentatie van de Flickr API, enkele goede classes in PHP (PhpFlickr, Phlickr) om de juiste aanvragen te versturen en mits enkele aanpassingen om alle nodige gegevens terug te krijgen werden de noden van de klant perfect ingevuld. Het uiteindelijke resultaat kan je terugvinden op www.asl-travel.be.