Use The Tags Luke

Hoe maak je zelf (zonder zoiets verschrikkelijks als PopFly) een mashup gebruikmakend van:

  • Google Maps
  • Flickr GeoTagging
  • Wordpress 2.3 Tagging

Om zelf een site te maken waarin automatisch foto's van je Flickr account geprojecteerd worden op een Google Map gebruikmakend van de tags gekoppeld aan je post in Wordpress. Volg je het nog? Maakt niet uit. Een voorbeeld van deze mashup heb ik op deze site geïmplementeerd. (dat ongeveer 3 uur duurde)

Dit is geen complete walk-through tutorial - maar als je zelf een beetje overweg kunt met vooral PHP en javascript moet het je zelf ook wel lukken hierna.

Allereerst heb je een Wordpress 2.3 installatie nodig waar je zelf de template bestanden kan aanpassen.
Wordpress 2.3 biedt namelijk voor het eerst native support voor Tagging en we gaan deze tags koppelen aan je tags in Flickr.

Upload wat foto's in Flickr en zorg dat je ze GeoTagged.

Geotagging flickr foto

Dit zorgt ervoor dat de foto wordt gekoppeld aan latitude (lengtegraad) en longitude (breedtegraad) coördinaten. Deze heb je straks nodig om ze in Google Maps op de juiste plek te laten verschijnen. Flickr is van Yahoo en die gebruikt hiervoor zelf Yahoo Maps. Persoonlijk vind ik Google Maps net lekkerder (en vooral sneller) werken maar met Yahoo Maps moet dit ook prima te doen zijn.

Geef elke foto in Flickr ook een tag waarbij je de plaatsnaam gebruikt (bv. amsterdam, rotterdam, den haag). Dezelfde tags gaan we straks gebruiken in Wordpress.

Nu moet je zorgen dat je een Google Maps API hebt zodat je maps kan laten zien op je Wordpress site. Verdere instructies kan je vinden in de documentatie.

Ervan uitgaand dat je nu een werkend kaartje op je site hebt moet je nu je Flickr Geo feed gebruiken om de foto feed te krijgen van jouw foto's met de juiste tags. Die feed zal er ongeveer zo uitzien:

http://api.flickr.com/services/feeds/geo/?id=##FLICKR-ID##@N00〈=en-us
&format=rss_200&tagmode=any&tags=##TAGS##

Waarbij je uiteraard op de juiste plek je Flickr Id moet invullen en de tags. Het eerste is een constante maar de 2e is afhankelijk van je post in Wordpress. Deze moet je dus zelf even uitlezen. Hint: Gebruik get_the_tags() en een The Loop. De output moet komma gescheiden zijn.

Ok, nu heb je dus iets van een php xml-parser nodig om de Geo RSS in te kunnen zetten. Ik zag in de documentation van Google ook wel support om direct xml te gebruiken maar dat heb ik in dit geval niet gebruikt. Wellicht kan het ook maar ik wil gewoon full server-side control ;)

Op dit punt heb je dus al je foto's met bepaalde tag in een Array en kan je er eigenlijk alles mee doen. In mijn voorbeeld laat ik ze op de kaart projecteren (met een InfoWindow wanneer je erop klikt en daarin de thumbnail) en bovendien laat ik ze bovenin het scherm horizontaal voorbijkomen.

Dit is slechts een voorbeeld wat je allemaal kunt doen wanneer je creatief omgaat met de verschillende API's en RSS feeds.

My first mashup

Read More »

About

This is the company blog of
Drupal specialist Merge.nl

We are located in Breda (Netherlands) and build websites using Drupal. More about us.

Content on this blog is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Netherlands License.

Creative Commons License

Recent Comments

Social