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:
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:
Op de profiel pagina van de bezoeker is dan het volgende zichtbaar voor zijn of haar Facebook vrienden:
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:
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.
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.
Reacties
Ik heb de faceboek I LIKe
Ingediend door Edgar de Jong (niet gecontroleerd) op 27 Januari, 2012 - 12:04.Ik heb de faceboek I LIKe knop op mijn website gezet.check hier !
ik heb de faceboek I LIKe
Ingediend door Anonymous (niet gecontroleerd) op 20 December, 2011 - 10:16.ik heb de faceboek I LIKe knop op mijn website gezet.
als men deze indrukt werkt het wel op de website, maar je ziet het niet op de facebookpagina van de personen die de knop hebben ingedrukt.
werkt niet
Ingediend door jacorie (niet gecontroleerd) op 26 November, 2011 - 10:24.Ik heb verschillende geprobeerd maar helaas het wil er niet op komen de link wil niet in het html worden toegevoegd.
Facebook link
Ingediend door Anonymous (niet gecontroleerd) op 21 November, 2011 - 17:38.Hallo,
Ik ben bezig met het opbouwen van een website via one.com, alleen weet niet hoe ik hier de facebook like butten krijg ingevoegd, kunt u mij wellicht helpen?
Alvast bedankt,
Groetjes
ik kwam er dus niet achter
Ingediend door LadyModa (niet gecontroleerd) op 2 November, 2011 - 14:39.ik kwam er dus niet achter hoe het moest. En nu met deze hulp lukte het in 1 keer. Nu nog wat meer lke krijgen...haha 13 staat zo zielig :)
vraagje
Ingediend door Anonymous (niet gecontroleerd) op 19 Juli, 2011 - 16:02.bedankt, leuk!
Ik weet hoe ik een code moet genereren, ik weet waar het HTML gebeuren van mijn website is. Ik weet alleen niet waar ik de kode dan moet plakken.
moet ie ergens tussen of kan het gewoon onderaan geplakt worden?
vast bedankt en groetjes Linda
Widget
Ingediend door Roel (niet gecontroleerd) op 6 Juli, 2011 - 15:31.Hartelijk dank. Een erg handig stuk. Als ik de widget toevoeg aan een stuk en iemand "like"-t het stuk kiest facebook zelf een afbeelding. Ik neem aan dat facebook automatisch de eerste afbeelding neemt, die het kan lezen. Echter om nou mijn hele CMS te gaan herprogrammeren gaat me te ver. Is het mogelijk een andere afbeelding af te dwingen?
witruimte onder de widget
Ingediend door mamasha (niet gecontroleerd) op 6 Juni, 2011 - 09:01.Bedankt voor de duidelijk uitleg. Zelf ben ik geen html-kenner. Ik kan volgend probleem dan ook niet spontaan oplossen. Wanneer ik de html-code van deze widget onderaan een post zet, zie ik de widget staan, maar is er te veel witruimte onder de widget. Hoe kan ik dat veranderen? Dank je wel.
Widget
Ingediend door Marieke (niet gecontroleerd) op 10 Maart, 2011 - 20:18.Hoi,
Heb net geprobeerd om de HTML-code in te voegen bij mijn artikelen.
Dit is wel gelukt, maar zodra ik erop klik, krijg ik de melding "FOUT" erachter en als je die aanklikt, krijg je te zien dat de geselecteerde pagina niet bereikbaar is.
(kijk voor wat ik bedoel even op mijn site www.versmissen.nu bij Hotel Samoa op de detailpagina)
Met vriendelijke groet,
Marieke van Daal
Facebook Widget
Ingediend door Jasper (niet gecontroleerd) op 21 Februari, 2011 - 15:24.Hallo Geoffrey,
helaas ben ik niet erg handig nog met het bouwen van websites. Ik heb sinds kort mijn eigen website (ik bouw via sitebuilder.nl) en ik probeer de Facebook Widget erop te krijgen. Via bovenstaande uitleg begrijp ik het niet.
Kunt u mij hierbij helpen?
Met vriendelijke groet,
Het lookilike.net team
Wat je wilt weten is of het
Ingediend door Renaissance op 23 Februari, 2011 - 18:05.Wat je wilt weten is of het mogelijk is om eigen HTML code toe te voegen via de sitebuilder. Ik ben niet bekend met de sitebuilder dus kan je het beste vragen aan jouw hoster hoe je dat kan doen. Gebruik dan als code de aangegeven code bij het artikel.
Facebook widget Engels
Ingediend door Paul (niet gecontroleerd) op 23 September, 2010 - 13:18.Hallo,
Bedankt voor de informatie hierboven beschreven! Zeer makkelijk!
Ik vraag mij echter af of hoe dit werkt als de website in een andere taal, in dit geval Engels, is?
Bij voorbaat dank voor enige info!
Mvg,
Paul.
alleen facebook icoontje toevoegen
Ingediend door Corine (niet gecontroleerd) op 15 September, 2010 - 19:00.Hoi Geoffrey,
Duidelijk verhaal hierboven, echter ik ben op zoek naar de methode hoe ik alleen het icoontje van bijvoorbeeld Facebook, Hyves, Twitter etc toe kan voegen
Ben voorzichtig bezig voor ons bedrijf een aantal profielen aan te maken maar nu de koppeling naar onze site nog.
bedankt alvast!
Corine.
Nieuwe reactie inzenden