WhatsApp button op je website plaatsen

Het plaatsen van een WhatsApp button op je website is sinds enige tijd mogelijk.

Met de WhatsApp button geef je mobiele gebruikers de mogelijkheid om artikelen op je website te delen via WhatsApp.

Wanneer een gebruiker op de WhatsApp button klikt kan hij of zij de link van het desbetreffende artikel delen met een vriend, vriendin of groep op WhatsApp.

De knop wordt op dit moment nog niet op heel veel websites gebruikt, maar kan zeker de moeite zijn. In het beginstadium van de WhatsApp knop werkte de knop alleen op iPhones. Tegenwoordig werkt de knop ook op smartphones met de nieuwere versies van Android, wat zeker een goede vooruitgang is.

Heb je een blackberry of Windows Phone, dan kun je er helaas nog steeds geen gebruik van maken.

De WhatsApp button is in ieder geval puur gericht op mobiele telefoons en zal (bij goede implementatie) niet te zien zijn als je een website op een computer bekijkt.

Eerste resultaten van de WhatsApp button

De WhatsApp deel-knop bestaat nog niet ontzettend lang en wordt nog niet op veel websites gebruikt. Veel resultaten zijn er dus nog niet bekend, maar ik heb al wel wat informatie kunnen vinden over hoe de knop het op twee websites doet.

De website Buzzfeed is als eerste begonnen met het testen van de WhatsApp button. Het resultaat is dat de WhatsApp button vaker werd aangeklikt dan de Twitter knop die ernaast staat.

De website FTW van USA Today’s Sports is ook al aan het experimenteren geweest met de WhatsApp button en ook hier is het resultaat dat er op de WhatsApp button vaker werd geklikt dan op de Twitter deel-knop. WhatsApp kreeg 18% van de kliks, Twitter 13%, Facebook 34% en de e-mail knop kon rekenen op 35% van de kliks. (bron: Niemanlab.org)

Met het zien van deze resultaten kan het dus zeker de moeite waard zijn om te testen of het ook op jouw website zo gaat.

Verschil: WhatsApp vs. Facebook en Twitter

Het grootste verschil is dat je op WhatsApp privé iets met iemand kunt delen. Op Facebook en Twitter deel je het met al je volgers.

Wanneer iemand iets privé deelt met een goede vriend is de kans dat erop geklikt wordt natuurlijk groter dan wanneer het gedeeld wordt op Facebook of Twitter.

Dit komt omdat de persoon die het deelt waarschijnlijk weet dat degene met wie hij het deelt hier geïnteresseerd in zal zijn. Daarnaast zie je niet alle berichten op social media voorbij komen. WhatApp berichten worden daarentegen wel bijna altijd gelezen.

Via de WhatsApp deel-knop zal je in totaal wel minder mensen bereiken, maar de kans dat je de juiste mensen bereikt is weer groter.

Hoe krijg ik een WhatsApp button op mijn website?

Wil je een WhatsApp button op je website plaatsen, dan heb je steeds meer keuze uit verschillende WordPress plugins die ervoor zorgen dat je een WhatsApp button op je website kunt plaatsen.

Enkele WordPress plugins waar je gebruik van kunt maken die op dit moment al een WhatsApp button hebben geïntegreerd:

Er is wel een nadeel bij het gebruik van de meeste van dit soort plugins. De WhatsApp knop is meestal overal zichtbaar, terwijl het alleen op de iPhone en Android werkt.

Wanneer je niet wilt dat mensen op een computer de WhatsApp button zien, dan kun je het anders doen. Een andere manier om de WhatsApp button op dit moment op je website te plaatsen, is door gebruik te maken van de officieuze WhatsApp Sharing Button Generator.

Daarnaast is de WhatsApp Sharing Button Generator zeker de beste manier om een WhatsApp button te plaatsen op je website, indien je geen WordPress hebt.

WhatsApp button handmatig op je website plaatsen

WhatsApp ButtonStap 1: Ga naar de website WhatsApp Sharing Button Generator.

Stap 2: Vul alle gegevens in waar om gevraagd wordt.

Bij “Size” kun je kiezen voor small, medium en large. Bij “Button text” kun je iets als “Delen” invullen (zonder aanhalingstekens) en bij “Sharing gtext” kun je voor WordPress websites de volgende code invullen: “<?php the_title(); ?>:“. Dit zorgt er bij WordPress voor dat hier de titel van het artikel komt te staan.

Je wilt natuurlijk niet bij elk artikel handmatig een knop plaatsen. Kies daarom voor een custom URL en zet hier “<?php the_permalink(); ?>” neer. Dit zorgt er bij WordPress voor dat de URL van het desbetreffende artikel gebruikt wordt.

Als het goed is ziet het er nu zo uit als je alles hebt ingevuld:

WhatsApp knop instellingen

Stap 3: Nu je alles hebt ingevuld staat onder de plek waar je alles hebt ingevuld de code die je kunt gebruiken. Dit is het moeilijkste gedeelte voor als je geen technische kennis hebt, we gaan de code in de thema bestanden plaatsen. Je kunt hier het best een child theme voor gebruiken, de wijzigingen gaan dan niet verloren wanneer je het thema een keer moet updaten.

De code bestaat uit twee delen, een JavaScript code en een normale HTML code. Op de javascript code komen we later terug, we gaan eerst met de HTML code aan de slag.

De HTML code zal er als volgt uitzien (kan iets anders zijn als je andere dingen hebt ingevuld):

&lt;a href="whatsapp://send" data-text="&lt;?php the_title(); ?&gt;:" data-href="&lt;?php the_permalink(); ?&gt;" class="wa_btn wa_btn_s" style="display:none"&gt;Delen&lt;/a&gt;

Dit gedeelte moet je plaatsen op de plek waar je de WhatsApp knop wilt hebben staan op je website. Hoe graag ik het ook zou willen, ik kan helaas niet zeggen waar dit precies zal zijn. Alle WordPress thema’s verschillen van elkaar in code.

Ik kan je wel een suggestie geven als je de knop onder het artikel wilt hebben, maar wellicht werkt dit niet bij het thema dat je gebruikt. Ga naar het single.php bestand van je thema en zoek naar “<?php the_content(); ?>“. Plaats vervolgens de HTML code die je hebt gekregen onder deze code en sla het bestand op.

Stap 4: Om de knop werkend te krijgen moet je het bijbehorende JavaScript bestand downloaden. Wanneer je dit gedaan hebt kun je het bestand via FTP uploaden op de server van je website.

Stap 5: Nu het JavaScript bestand op de server van je website staat moet je deze nog wel aanroepen met behulp van een code. De Javascript code is altijd hetzelfde en is onderstaande code:

&lt;script type="text/javascript"&gt;if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="url/to/your/button/whatsapp-button.js";h.appendChild(s);}&lt;/script&gt;

Het enige wat je hier nog moet wijzigen is “url/to/your/button/whatsapp-button.js” naar de URL van de locatie waar je het JavaScript bestand hebt geplaatst.

De Javascript code kun je het beste in het footer.php bestand van je thema plaatsen net boven de code “</html>“.

Als alles goed is gegaan zal de WhatsApp button nu onder het artikel komen wanneer je het artikel met een iPhone of Android smartphone bekijkt. Je kunt dus alleen testen of alles goed staat wanneer je het op een iPhone of Android telefoon bekijkt. De WhatsApp button zal niet zichtbaar zijn op een Blackberry, Windows Phone of computer.

Conclusie

De WhatsApp button levert op het eerste gezicht al wat goede resultaten bij een aantal websites die de gegevens bekend hebben gemaakt.

De knop werkt momenteel alleen nog op iPhones en smartphones met Android. Ik verwacht dat deze optie uiteindelijk ook wel voor Blackberry en Windows Phones beschikbaar wordt, maar het is afwachten wanneer dit het geval is.

Het plaatsen van de WhatsApp button is momenteel nog vrij technisch en er zijn nog niet heel veel WordPress plugins die goed met de WhatsApp knop omgaan.

Wat denk jij van de WhatsApp button? Is het de toekomst en ga jij het ook gebruiken op je website? Laat je mening hieronder horen in de reacties.

Waarom de WhatsApp knop niet actief is op Webtalis? De knop was een tijd te vinden op Webtalis, maar ik gebruik tegenwoordig een ander social media plugin waarbij de WhatsApp knop helaas ook wordt weergegeven op apparaten waar het niet op werkt. Dit is voor mij de reden waarom ik op dit moment tijdelijk geen WhatsApp knop gebruik.

14 reacties Voeg ook een reactie toe

  1. PS
    De foutmelding:
    Deze site is niet bereikbaar Het IP-adres van de server van send kan niet worden gevonden.
    DNS_PROBE_FINISHED_NXDOMAIN

  2. Ik kreeg het niet aan de praat. De code is al wat ouder. Zou het nog moeten werken met iOS 12 en WordPress 4.9.8?

    • Ik durf het op dit moment niet te zeggen. Ik heb het nergens meer draaien om het uit te testen en er op dit moment ook even geen tijd voor om dit te doen. Wellicht dat de foutmelding van tijdelijke aard is.

  3. Hi Maikel, wij hebben op de website dmv plugin “whatshelp chat button” en chat functie geplaatst. dit werkt voor zowel iphone als ook andriod goed. echter kan je niet ingeven dat het niet actieg moet zijn op de desktop versie van je website.

    kijk maar op de website : http://www.autoprobaat.nl
    grtjes

    • Tegenwoordig is er op de desktop ook een WhatsApp app en dergelijke, waardoor het in theorie ook hierop kan werken als mensen dit geïnstalleerd hebben. Dit zal de reden zijn waarom het niet automatisch is verborgen. Wanneer je het wel wilt verbergen, zou je dit met CSS moeten doen voor schermen van een x aantal pixels breed.

    • Klopt, op de manier die je hierboven beschrijft kunnen mensen al wel je website delen via WhatsApp. Via apps zie je dit inderdaad weleens opgeroepen worden als je iets wilt delen.

      Voor zover ik weet kun je dit helaas niet met je website oproepen. Het blijft dus nog even wachten tot de WhatsApp button ook gaat werken op Android of dat je het standaard menu om te delen kunt oproepen.

      • Het lijkt mij ook logischer om het mobiele delen menu te openen dan alleen een whatsapp knop zodat je zelf kunt kiezen via wat je wilt delen. Aan de andere kant triggert het whatsapp logo misschien meer….

        • Het is hetzelfde als de deelknoppen van Facebook, Twitter, Google+, etc. die je ook gewoon op je smartphone ziet.

          Welke manier het beste resultaat geeft zou je eigenlijk moeten testen, maar dat is in dit geval niet mogelijk.

  4. Op dit moment kan ik in Chrome op Android al via het menu lezen voor delen, je krijgt dan de standaard Android keuze via welke app je wilt delen. Kan dit menu niet vanuit een pagina worden opgeroepen? Iemand die dat weet? Dan kan de gebruiker alsnog whatsapp kiezen… interessante ontwikkeling in iedergeval…

  5. Super! Ik wist helemaal niet dat dit kon. Het is wel jammer dat het alleen nog op de iPhone werkt.

    Zodra het op android telefoons en misschien ook op windows phones gaat werken zie ik er wel toekomst in. Het lijkt mij een handige manier om dingen te delen.

    Bedankt voor dit artikel. Ik ga proberen om de WhatsApp button op mijn website te krijgen.

    • Het is inderdaad van belang dat de button ook gaat werken op smartphones met Android en andere besturingssystemen. Het lijkt me echter niet meer dan logisch dat dit na verloop van tijd gaat gebeuren.

      Succes met het implementeren van de button op je website. Wanneer er iets niet lukt kun je hier gerust nog een reactie met je vraag achterlaten.

Geef een reactie