Hoe maak je een Facebook “vind ik leuk” knop?

zaterdag, 26 maart 2011 | door +Sigrid de Jong | 42 Reacties » |

 

Wat is een het?

Een Facebook vind ik leuk knop is een knop waar een bezoeker van je website op kan klikken en dan krijgt diegene een vind ik leuk berichtje op zijn facebook met een link naar jouw pagina. Bij de knop op je pagina kun je zien hoeveel mensen het leuk vinden en zo kun je je populariteit meten.

De Code

Om zo’n knop te maken zet je de volgende javascriptcode van facebook in de header van je pagina:

<script>
window.fbAsyncInit = function() {FB.init({appId: ‘your app id’, status: true, cookie: true, xfbml: true});  };

(function() {

var e = document.createElement(‘script’); e.async = true;

e.src = document.location.protocol +            ’//connect.facebook.net/nl_NL/all.js’;

document.getElementById(‘fb-root’).appendChild(e);  }());

</script>

Deze code plaats je tussen de <head> en </head> tags. Heb je een wordpress website dan vind je die code in header.php van het thema dat je gebruikt:

www.domeinnaam.nl/wp-content/themes/naam-thema/header.php

Op de plek in je website waar je de knop wilt hebben zet je de code:

<fb:like href="<?php echo get_permalink(); ?>" action="like"></fb:like>

Verschillenden versies van de vind ik leuk knop

Alleen het facebook icoontje

Knop/ button met aantal mensen die het leuk vinden erboven:


| <fb:like href="<?php echo get_permalink(); ?>" layout="box_count" action="like"></fb:like>

Knop / button met aantal mensen die het leuk vinden ernaast.

| <fb:like href=”<?php echo get_permalink(); ?>” layout=”button_count” action=”like”></fb:like>

knop met tekst

<fb:like href="<?php echo get_permalink(); ?>" action="like"></fb:like>

Alle opties van de vind ik leuk knop

  • href – De URL om leuk te vinden. The XFBML version staat standaard naar de huidige pagina (de pagina woor de kop op staat).
  • layout – Er zijn 3 opties.
    • standard – Een knop met rechts tekst, met het profiel van de vriend eronder. Minimum breedte: 225 pixels. Standaard breedte: 450 pixels. Hoogte: 35 pixels (zonder foto’s) of 80 pixels (met foto’s).
    • button_count – Een knop met (rechts) daarnaast het aantal ‘vind ik leuks’. Minumale breedte: 90 pixels. Standaard breedte ook 90 pixels. Hoogte: 20 pixels.
    • box_count – Knop met daarboven het aantal vind ik leuks. Minimum breedte: 55 pixels. Standaard breedte: 55 pixels. Hoogte: 65 pixels.
  • show_faces – Specificeer om wel of geen profiel foto’s te laten zien onder de knop. Werkt alleen bij de standaard layout.
  • width – De breedte van de knop.
  • action – Het woord op de knop. Opties: ‘like’, ‘recommend’ In het Nederlands: ‘ Vind ik leuk ‘, ‘recommend’
  • font – Het lettertype op de knop. Opties: ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, ‘verdana’
  • colorscheme – Het kleurenschema voor de vind ik leuk knop. Opties: ‘light’, ‘dark’
  • ref – een label voor tracking referrals; moet minder dan 50 karakters zijn en kan alfanummerieke karakters (letters en cijfers) en sommige interpunctie (op dit moment +/=-.:_) bevatten. De ref atribuut voegt 2 parameters aan de URL toe als een gebruiker op een link klikt van een lopend verhaal over een vind ik leuk actie:
    • fb_ref – de referentie parameter
    • fb_source – Het stroom type (‘home’, ‘profile’, ‘search’, ‘other’) waarin de klik plaats vind en het verhaal type (‘oneline’ of ‘multiline’), concatenated met een onderstreping.

Vind ik leuk in een andere taal

Je kunt de knop in een andere taal zetten door de javascriptcode in de header aan te passen. In de voorbeeld staat de taal in gesteld op Nederlands met nl_NL.

  • Nederlands
    nl_NL
  • Duits
    de_DE
  • Engels (US)
    en_US
  • Frans
    fr_FR

Er zijn mensen die vind ik leuk geweldig vinden:

En er zijn mensen die het niet leuk vinden:

Links

Facebook developers pagina over de like button

 

WordPress plugings

Er zijn ook wordpress plugins voor de facebook vind ik leuk button.

http://healyourchurchwebsite.com/2010/04/22/the-facebook-like-button-plugin-for-wordpress/


42 Reacties op "Hoe maak je een Facebook “vind ik leuk” knop?"

  1. Hallo,
    In de uitleg staat:
    ”Om zo’n knop te maken zet je de volgende javascriptcode van facebook in de header van je pagina:”
    Maar wat wordt bedoeld met ‘header van je pagina’?

    Alvast bedankt.

  2. De header van je pagina is het gedeelte van de html tussen de tags (html codes) en . Je kunt de codes vinden als je de bron van je pagina bekijkt (Rechts klikken in de browser, het is de html code van de pagina). De header: ***codes*** komt altijd voor de body. De body is het de code tussen en . In de header geef je allemaal informatie mee over de pagina die je dus niet direct ziet op de pagina en in de body stop je de code om de pagina weer te geven zoals de tekst en de plaatjes van de pagina.

  3. De code werkt niet bij mij omdat mijn website opgebouwd is met HTML 4.01 Transitional//EN. Kan iemand de code omzetten naar HTML 4.01?

  4. Als er nou is niet zo in die termen wordt gepraat, ik snap dr helemaal geen reet van. Ook niet van het toevoegen van die Vindt ik Leuk knop …

  5. Welke termen bedoel je zoals?
    Het komt er op neer dat je om een Vind ik leuk knop op je pagina te zetten je 2 stukjes code in je website moet plaatsen. Omdat te kunnen doen moet je als eerste bij de code van je website kunnen. Als je met je rechtermuis op de pagina klikt en dan op “Pagina bron” weergeven (in het menu dat verschijnt) dan krijg je de code van die pagina te zien. Kun je die van jou website wijzigen? Ja? kopieer en plak dan de 2 codes die ik hierboven heb opgeschreven in je site.
    De eerste code is de code onder het kopje “code” en begint met en eindigt met . Deze plakje in de header van je pagina. De header van een pagina is een stukje tekst dat extra informatie meegeeft die belangrijk is voor je pagina, maar niet wordt weergegeven op de pagina zelf. Hier komen onder andere javascript codes. De header begint met en eindigt met En tussen die twee tags (dus tussen en ) plak je de code.

    Daarna kopieer je de code <fb:like href="” action=”like”> en plak je die in je website op de plaats waar je de Vind ik leuk knop wilt hebben, bijvoorbeeld onderaan een artikel van je website.

  6. heey,
    kan je me uitleggen waar alles staat. Want ik weet hier niks van en ik heb het nodig. Header, html enzovoort danku

  7. Ik bedoel eigenlijk hoe je die codes erin plakt enzo

  8. De codes die je kunt kopieren staan bovenaan in het artikel, dus bovenaan deze pagina. De eerste code staat in een blauw veld (lichtblauwe achtergrond met blauw lijntje eromheen) deze moet dus bovenaan je webpagina ergens tussen het woord en . Waar precies maakt niet zoveel uit maar het liefst wel op een nieuwe regel. Er staan meerdere dingen tussen en die allemaal iets doen. Je kan de code bijvoorbeeld direct na plakken of vlak voor plakken, dan weet je zeker dat je de code niet door een andere code heen zet.

    De tweede code staat iets onder de eerste en heeft een blauwe achtergrond. Die plak je bijvoorbeeld onder je artikel dus onder:

    bla bla dit is mijn artikel

    en dan dus na .

    Het wordt tijd dat ik eens een artikeltje schrijf over basis html, dan kan ik daarnaar verwijzen. Was ik al wel een keer van plan om te doen, maar ik dacht “dat weet vast iedereen al…”

  9. Met kopieren en plakken. Kopieren, met je muis de code selecteren, dan wordt ie blauw, dan ctrl-C of cmd-C (op de mac). Plakken: ctrl-V, cmd-V op de mac. Ik ben een voorstander van het gebruik van toetsen in plaats van met de muis naar het rechter menu. Het werkt sneller en je krijgt minder snel RSI.

  10. dank je voor al die nuttige uitleg maar ik zie de code niet als ik hem probeer te plakken, die komt niet te voorschijn. Is dit normaal ?

  11. Het is gewoon een stukje tekst, die je op dezelfde manier knipt en plakt als andere tekst.

    Dit is de code voor in de header, dus tussen <head> en </head>:

    <script>
    window.fbAsyncInit = function() {

    FB.init({appId: ‘your app id’, status: true, cookie: true, xfbml: true}); };

    (function() {

    var e = document.createElement(‘script’); e.async = true;

    e.src = document.location.protocol + ’//connect.facebook.net/nl_NL/all.js’;

    document.getElementById(‘fb-root’).appendChild(e); }());
    </script>

    en dit is de code voor in je pagina waar je de knop wilt hebben:

    <fb:like href="” action=”like”>

  12. Hey Sigrid,
    Ik kopieer de codes tussen en en die andere code waar ik wil. Maar dan krijg ik vervolgens bij die scriptcode een syntax error. Enig idee?

  13. Niet direct. Je zou kunnen kijken of er aanwijzingen in de error staan en bij welke regel het begint. Je kunt ook regel voor regel invoeren en kijken wanneer het misgaat.
    Ik heb in ieder geval letterlijk dezelfde code op deze website gebruik om de vind-ik leuk button erin te zetten.
    Het kan ook zijn dat je pagina nog meer javascript hebt staan die een conflict geven. Bijvoorbeeld dat bepaalde woorden/codes voor iets anders gebruikt worden.

  14. Ik kan mijn bron niet bewerken dus dan heeft het geen nut?? Ik wil zo graag een VIND IK LEUK BUTTONNNN :(:(

  15. Ja dat klopt, maar je kunt ook een wordpress plugin zoeken voor een vind ik leuk knop en die op je wordpress instaleren.

  16. @Matthijs
    Elders las ik dat het soms helpt om deze regel in het script
    js.src = “//connect.facebook.net/nl_NL/all.js”;

    te vervangen door:
    js.src = “//connect.facebook.net/nl_NL/all.js#xfbml=1″;

  17. mmm

  18. Het lukt mij niet om de knop zichtbaar te krijgen. Komt dat soms omdat ik met Frontpage werk?

  19. Dat kan heel goed, ik vind Frontpage zelf een waardeloos kut programma… Nou ja het maakt allemaal extra codes en na een aantal verbeteringen doet het niet meer wat je wilt maar iets anders…
    Het kan natuurlijk evengoed aan iets anders liggen: plaatje laad niet, verwijzing naar het plaatje staat op de verkeerde plek enz.

  20. @keesbleekemolen: Waarschijnlijk zal je deze knop enkel zien verschijnen als je website online staat. Op je pc zal hij normaal niet verschijnen.

  21. Hallo,
    Alles is gelukt! Er staat een mooie knop op mijn site.
    Het enige wat ik me afvraag is hoe ik het plaatje kan vervangen als je op de knop hebt gedrukt. Ik krijg dan op mijn FB pagina de goede link maar hij pakt als plaatje een x gedeelte van de pagina erbij. Kan ik die ook vervangen door een ander plaatje?

  22. Hoi,
    Hier een complete leek. Ik heb een bedrijfspagina aangemaakt binnen facebook en wil de vind ik leuk knop toevoegen. Ik krijg een bepaalde code maar geen flauw idee wat ik er mee moet doen. Kan iemand het me in lekentaal uitleggen? ik ben je erg dankbaar!

  23. Die code plak je op je eigen site of op de site van je bedrijf, dat is dus niet een facebook pagina. Op jouw site komt dan een knopje/plaatje en als je daar op klikt dan zorgt die code ervoor dat op je bedrijfspagina een vind ik leuk melding komt van degene die erop geklikt heeft. Voor de uitleg volg de stappen uit het verhaal letterlijk.

  24. Hoi,
    Ik wil eigenlijk alleen het facebook icoontje (blauw vierkant met witte f) om mijn homepage zodat men met een klik direct kan switchen.
    Is dit mogelijk?
    Alvast bedankt voor je reactie.
    Groet
    Frans

  25. Nee niet meer, je hebt maar 3 mogelijkheden: Standaard: handje met tekst: vind ik leuk, button_count: aantal ernaast en box_count: aantal erboven. Zie de facebook website voor ontwikkelaars waar je alle opties kunt bekijken, instellen en daarna de code ophalen.

  26. Hoi,

    Ik maak mijn nieuwsbrieven in publisher, kan ik daar ook de link + het icoontje naar FB toeveoegen?

  27. Hangt er van af. Als de nieuwsbrief een website is: Ja. Als het een email is, dan weet ik het niet.

  28. wordt verstuurd als email.

  29. Ik krijg een error.
    document.getElementById(…) is leeg of geen object.
    wat gaat er fout (IE8+vista)

  30. Hoi,

    Ik heb de codes ook op mijn site geplaatst. Dit is opzich allemaal gelukt. Echter als ik dus op die button klik, verschijnt er ook een ‘reageer’ box, terwijl je dit op andere sites nooit ziet. Enig idee hoe dat komt?
    Thnx

  31. hallo ik heb aardig verstand van site’s maken maar ik krijg dit niet werkend ik heb het gedaan zoals je het uitgelegd maar mijn script geeft nu een fout aan en dan ga ik naar die regel en zie ik dat in de regel van

    FB.init({appId: ‘your app id

    de id niet word geaccepteerd hoe kan ik dit veranderen

    ik schrijf alles in html kit met html code’s en php

    groetjes lars

  32. Misschien staan er nog andere javascrips in je webpagina en gebruiken meerdere scrips dezelfde codes en krijg je een conflict. Tenminste dit vermoed ik vanwege de foutmelding. Als je meerdere scrips in de pagina hebt staan kun je eens proberen of werkt met de andere scripts eruit. Je kunt de volgorde van de scripts ook aanpassen.

    Html-kit ken ik niet, ben net even gaan kijken en ziet er prima uit.

    @Ivo, ja ik zie nu ook een reageer box als ik op de facebook pagina klik, leuk, facebook heeft het dus aangepast. Dat was eerst op mijn site namelijk niet zo en nu wel zonder veranderingen, nou ja ik heb wel de wordpress updates uitgevoerd.

  33. hey kweet nie ek da doe

  34. hey kweet nie ek da doe

    das vel te moeilijk

  35. waneeeeeeeeeeer kun jullie me helpen mijn man wacht al een jaar of 2 om zo een pagina te maken hij wil da van een beroemede maken die hij kent

  36. Hoi Sigrid,

    Ik heb gedaan wat je zegt (ik heb een WordPress-site), maar hij laat de knop niet zien. Wat kan er mis zijn gegaan. Ik wil hem links onder mijn link naar mijn facebookpagina hebben.

    Met vriendelijke groet,
    Jolanda Hididnk

  37. ik krijg de “vind ik leuk” boven en onder bij me tekst
    kan ik dit ook nog aan passen. overgens is het van novosite waar ik ook html kan aanpassen

  38. Hoi hoi, ik heb het op mijn website vermeld en mensen hebben het ook gebruikt, maar op facebook zelf komen die niet erbij te staan, kan dit kloppen of moet ik dan iets veranderen zodat mensen mijn facebook pagina ook automatisch leuk vinden?

  39. Ik heb even op je vind ik leuk knop geklikt en hij staat er bij mijn vind ik leuks bij. T’s alleen dat je bij facebook niet al je eigen diengen ziet, maar anderen zien ze wel en als je bij je eigen naam kijkt (je eigen pagina dus) dan kun je het wel terug vinden.

  40. Hoi,

    Allereerst bedankt voor de heldere uitleg! Alleen helaas lukt het bij mij nog steeds niet haha.
    Ik heb een site met DW gebouwd dus een beetje kennis heb ik wel. Codes staan op de goede plek volgens mij. Maar de afbeelding van de knop, moet ik die niet ergens op mijn pc opslaan daar naar linken ofzo? Ik krijg met alleen de codes nu geen knop te zien namelijk…

    Groetjes Meike

  41. Mensen koop even het boek HTML VOOR DUMMIES (via BOL.COM).
    Het zal jullie de ogen openen en alle hierboven gestelde vragen beantwoorden. Bovendien maak je dan in geen tijd je eigen websites en breng je wijzigngen aan als een baas.

  42. Dit is geweldig! Heb me echt rot zitten zoeken hoe ik “vind ik leuk” in “like” moest veranderen. Maar eindelijk kwam ik deze site tegen! Top! Dank dank dank

Reageer:




Heldere Ster, Burchtstraat 28, 3000, Leuven (België) | Tel: 0032488333934 |

| © 2010-2012 door +Sigrid de Jong, Alle rechten voorbehouden. |