Hoe kan ik de Facebook Like widget gebruiken op mijn eigen website?

Gisteren lanceerde de immens populaire sociale netwerksite Facebook hun nieuwe Facebook Like widget. Met behulp van deze widget kunnen website bezoekers die een Facebook account hebben op een eenvoudige manier jouw website aanraden aan hun vrienden op Facebook. En het enige wat jij nodig hebt is een beetje HTML kennis om ook deze widget toe te voegen aan jouw website!

De Facebook Like widget in detail

Hieronder een voorbeeld van de nieuwe widget op CNN:

Facebook Like widget op CNN

Nog een beter voorbeeld van een passend gebruik van deze widget is te vinden op IMDb.com waar bezoekers zaken als films, acteurs en actrices met een druk op de knop kunnen aanraden aan hun Facebook vrienden:

Facebook Like widget op IMDb

Op de profiel pagina van de bezoeker is dan het volgende zichtbaar voor zijn of haar Facebook vrienden:

Facebook Like widget

De Facebook Like widget toevoegen aan uw website

Gelukkig heeft Facebook het voor website eigenaren erg gemakkelijk gemaakt om de Facebook Like widget toe te voegen aan een. Neem bijvoorbeeld de onderstaande code:

<iframe src="http://www.facebook.com/widgets/like.php?href=http://www.renaissance.nl/node/102"
        scrolling="no" frameborder="0"
        style="border: none; width:450px; height:80px"></iframe>

Deze paar regels code zijn genoeg om de Facebook Like widget toe te voegen aan een pagina. Het gedeelte na de href= is het adres van de pagina die aangeraden wordt. Dit zal in de meeste gevallen het adres zijn van de pagina waar de widget op dient te komen.

Hieronder staat een werkend voorbeeld van de widget voor dit artikel. Probeer gerust de widget uit als je een Facebook account hebt door op de Vind ik leuk knop te klikken.

De Facebook Like widget verder uitbreiden

Uiteraard is dit niet alles wat mogelijk is en kan de widget aangepast worden naar jouw behoeften. De makkelijkste manier om deze mogelijkheden te ontdekken is om gebruik te maken van de Facebook Like widget generator. Met deze tool kan je aan de hand van een aantal keuzevragen jouw widget helemaal zelf samenstellen en wordt de benodigde HTML code voor je aangemaakt.

Mocht je toch zelf aan de slag willen, heb ik hieronder nog een tweetal voorbeelden geplaatst:

Compacte versie

Door layout=button_count toe te voegen aan het iframe source adres, kun je een compacte versie krijgen van de widget:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.renaissance.nl/node/102&layout=button_count" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Resultaat:

Gebruikersafbeeldingen verbergen

Door show_faces=false toe te voegen aan het iframe source adres, zullen er geen gebruikersafbeeldingen getoond worden door de widget:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.renaissance.nl/node/102&show_faces=false" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Resultaat:

Vragen?

Mocht je nog vragen of opmerkingen hebben, dan hoor ik ze uiteraard graag.

Over de auteur
User picture

Geoffrey de Vlugt is hoofd project ontwikkeling en systeembeheer bij Renaissance. Als hij niet aan het werk is, is hij toch nog te vinden achter zijn notebook.

Vragen? Bel dan 071 5724203

Geoffrey de Vlugt's tweets

  • @Vincentgdevlugt Gelukkig zijn de kapsels beter dan de stemmen... #esf 5 jaren 25 weken ago
  • @Vincentgdevlugt Ben je daar nu in de buurt? 5 jaren 29 weken ago
  • @vodafoneNL Oeps! Ik was vergeten dat ik mijn bedrijfsgegevens heb gebruikt. Ik heb deze per DM zojuist aan jullie verstuurd. 5 jaren 37 weken ago
  • @vodafoneNL Wanneer kan ik mijn Wipeout 2048 code ontvangen? Ik heb op 22 februari, 20 euro opgewaardeerd maar nog niets ontvangen. 5 jaren 37 weken ago
  • Stop Internet #Censorship! Sign the urgent global petition @Avaaz urging the EU Parliament to reject #ACTA: http://t.co/8VvkQQJe 5 jaren 42 weken ago
Dell Registered Partner SIDN deelnemer