Integreer een sociaal netwerk in je website (1)

Toen ik begon met koene.be op te bouwen, had ik niet direct het idee een (groot) aantal bezoekers te lokken. Ik blijf realistisch en dus telt elke view. Het moest een manier zijn om mij up-to-date te houden met het 'webgebeuren'.

Maar natuurlijk heeft iedereen het graag als zijn of haar posts gezien of gelezen worden. En daar hoor ook ik bij. Vrienden en kennissen lokken, daar ging het mij om te doen.

What friends are for

Wie aan 'friends' denkt, denkt natuurlijk aan... Facebook! Toegeven, ik ben niet de grootste Facebookfan (dat is nog licht uitgedrukt als je me kent :p). Maar het zou koene.be wel een grotere visibiliteit geven.

De fameuze 'like' button, je kunt er tegenwoordig niet meer naast kijken. Klikt een (ingelogde) bezoeker op een like button, dan deelt hij die pagina met al z'n Facebookvrienden. Ideaal! Dat moet ik ook hebben dacht ik. Voor dit soort zaken kun je terecht op de developerspagina van Facebook. Daar vind je heel wat informatie over hoe je social plugins gebruikt.

Voor het integreren van een like button op je pagina, kun je kiezen tussen ofwel XFBML of een Iframe. Omdat je met XFBML meer opties kunt meegeven, koos ik voor deze versie. XFBML vereist wel dat je de JavaScript SDK gebruikt. No biggie, je geeft gewoon dit mee in de head:

< script src="http://connect.facebook.net/nl_BE/all.js#xfbml=1">

Hier kies je eigenlijk al direct de taal waarin alle social plugins gerenderd worden. Standaard is dit en_US. In mijn geval wordt dit dan nl_BE (Nederlands_België). De like-button voeg je met deze simpele lijn toe:

< fb:like layout="standard" width="250">< /fb:like>

Je kunt hier al heel wat attributen meegeven zoals in het voorbeeld staan: layout="standard" en width="250". Nog attributen die je kunt meegeven zijn show_faces, action, font en colorscheme.

So far so good!

Dit werkt in principe al, maar nog niet zoals het moet. Je kunt bijvoorbeeld ook de afbeelding, titel en url die op de wall moeten verschijnen instellen. Cool! Dit doe je door Open Graph Tags toe te voegen aan de head van je pagina.

< meta property="og:title" content="Welcome to koene" />
< meta property="og:type" content="article" />
< meta property="og:url" content="http://www.koene.be" />
< meta property="og:image" content="http://www.koene.be/images/koene.jpg" />
< meta property="og:site_name" content="koene.be" />

Et voila! Een volwaardige like-button is geboren. Je kunt nog veel meer social plugins gebruiken om je website dat extra beetje zichtbaarheid te geven. Voor meer info kun je terecht op deze pagina.