Het is sinds een tijdje mogelijk om een WhatsApp knop toe te voegen aan je (WordPress) website. Hiermee maak je het voor je mobiele gebruikers mogelijk om, naast Facebook en Twitter, je berichten te delen via WhatsApp. Omdat WhatsApp zo veel gebruikers heeft, zo rond de 9,5 miljoen in Nederland alleen al, is het natuurlijk een handige optie om toe te voegen aan je website.

Waarom WhatsApp als je al Facebook en Twitter hebt?

Het eerste wat veel mensen zich afvragen, is of het wel nodig is om een WhatsApp knop toe te voegen als je al Facebook en Twitter mogelijkheden hebt. Zoals eerder gezegd is, is WhatsApp erg populair en veel mensen bezoeken tegenwoordig je website op hun mobiel. Ze kunnen dan meteen je bericht delen met familie of vrienden die er waarschijnlijk ook in geïnteresseerd zijn: er is dus een grote(re) kans dat diegene je bericht zal lezen.

Verder is WhatsApp privé, in tegenstelling tot Facebook en Twitter, en dat maakt de drempel om iets te delen voor sommige bezoekers een stuk lager. Een ander nadeel van social media, wat WhatsApp niet heeft, is dat gedeelde berichten vaak gemist worden; er komen namelijk zoveel berichten voorbij op een dag. Bij een WhatsApp bericht daarentegen kijk je over het algemeen wel wat erin gezegd wordt.

Hoe krijg ik de WhatsApp knop op mijn WordPress website?

Er zijn verschillende manieren om de WhatsApp knop toe te voegen aan je website. Dit varieert van plugins tot handmatig code toevoegen aan je website.

WhatsApp met Mobile ShareBar plugin

De eerste manier die we zullen langslopen is een plugin genaamd Mobile ShareBar. Nadat je de plugin hebt geïnstalleerd en geactiveerd, kan je onder ‘Instellingen > Mobile ShareBar’ een aantal onderdelen wijzigen. Over het algemeen staan veel dingen standaard goed ingesteld, maar ik snap als je de teksten voor de verschillende social media knoppen wilt aanpassen; die staan namelijk in het Engels. Verder is het mogelijk om bepaalde social media niet weer te geven door deze uit te vinken en je kunt de positie van de knoppen bepalen onder ‘Display’. Je kunt in de live preview aan de rechterkant meteen zien hoe het er op mobiele apparaten weergegeven zal worden. Onder ‘Troubleshooting and other stuff’ is het aangeraden om de optie ‘Show on every mobile device’ aan te vinken, anders zullen de knoppen alleen zichtbaar zijn voor iPhone en Android gebruikers. Als je Mobile ShareBar alleen voor de WhatsApp knopt gebruikt, dan hoef je deze optie niet aan te vinken; WhatsApp werkt namelijk alleen op die twee apparaten.

Als alles is ingesteld, sla je de wijzigingen op. Vervolgens pak je je mobiel en ga je naar je website om te kijken of alles werkt.

WhatsApp met AddToAny plugin

Nog een plugin die een WhatsApp knop aanbiedt is AddToAny. Nadat je de pluging hebt geïnstalleerd en geactiveerd, vind je hem onder ‘Instellingen > AddToAny’. Daar vind je de mogelijkheid om aan te geven welke social media je wilt weergeven op je website. Standaard zullen hier Facebook, Twitter en Google+ weergegeven worden, maar je kunt dit naar wensen aanpassen. Om de WhatsApp knop toe te voegen, klik je op ‘Toevoegen / Verwijderen Diensten >>’ en er zal een veld tevoorschijn komen met allerlei social media knoppen. De knoppen staan gelukkig in alfabetische volgorde, dus het zal niet al te moeilijk moeten zijn om WhatsApp hiertussen te vinden. Klik er vervolgens op en hij zal worden toegevoegd aan de zichtbare social media knoppen. Je kunt het verder nog naar wensen aanpassen door de plaats van de knoppen en de grootte aan te passen. Ook beschikt AddToAny over een zijbalk met social media knoppen die meescrolt met de gebruiker. Je kunt deze aanzetten door naar het tabje ‘Floating’ te gaan en daar de plaatsing op links of rechts te zetten.

Het is ook mogelijk om je eigen iconen te gebruiken. Hiervoor moet je bij de geavanceerde opties een vinkje zetten bij ‘Use custom icons’. Vervolgens moet je een URL opgeven naar een map waar de betreffende iconen te vinden zijn. Let er hierbij op dat je ze de juiste benaming geeft. Zo wordt er voor Facebook namelijk gezocht naar facebook.png, voor Twitter naar twitter.png, etc. Je kunt de exacte benamingen ook vinden door de map ‘icons’ in de plugin-map te openen (wp-content/plugins/add-to-any/icons).

Als alles naar wensen is ingesteld, klik je op ‘Wijzigingen opslaan’ en zal je op je mobiel moeten kijken of de WhatsApp knop naar behoren werkt.

WhatsApp met Jetpack?

Als je gebruikt maakt van de Jetpack plugin, dan zal de WhatsApp functie daar ook een keer worden toegevoegd aan de beschikbare diensten. Op dit moment is dit nog niet het geval, maar ze zijn ervan op de hoogte en het zal in een toekomstige update worden meegenomen. Wanneer deze precies komt is afwachten op dit moment.

WhatsApp handmatig toevoegen

Het is ook mogelijk om geen plugin te gebruiken en een WhatsApp code te laten genereren. Hiervoor moet je naar de Whatsapp Sharing Button Generator website gaan. Daar aangekomen scroll je naar beneden en vul je de gevraagde gegevens in. Als voorbeeld kun je de afbeelding hieronder aanhouden:

Hierin is er bij “Sharing gText” gekozen voor het gebruik van “<?php the_title(); ?>”, zodat WordPress hier de titel van het betreffende bericht in zal vullen. Verder wil je waarschijnlijk niet voor elke pagina / elk bericht een nieuwe knop aanmaken, dus er is voor “Custom URL” gekozen en hier is “<?php the_permalink(); ?>” ingevuld. WordPress zal dan per bericht / pagina zelf de url toevoegen, zodat je de WhatsApp knop overal kunt gebruiken.

Als je alles hebt ingevuld, zal je eronder een code aantreffen die je voor de knop kunt gebruiken en een stukje daaronder nog meer code. Het eerste stuk is een HTML code en het tweede een JavaScript code die beiden in je thema (of liever child theme) geplaatst moeten worden. Allereerst de JavaScript code:

<script type="text/javascript">if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="pad/naar/whatsapp-button.js";h.appendChild(s);}</script>

Deze kun je plaatsen in je footer.php bestand net voor de “</body>” of “</html>” tag. Ook moet je de broncode van de knop downloaden (staat aangegeven bij de 4^e stap op de pagina) en uploaden naar je webserver via FTP. Onthoud de plek waar je dit bestand hebt geüpload, want je moet het “src=”pad/naar/” gedeelte in de code hierboven nog aanpassen.

Dan komen we nu aan bij de HTML code. Deze is afhankelijk van wat je zelf eerder had ingevuld, maar over het algemeen zal hij er ongeveer zo uit zien:

<a href="whatsapp://send" data-text="Bekijk het artikel <?php the_title(); ?> op WPsitemaken.nl:" data-href="<?php the_permalink(); ?>" class="wa_btn wa_btn_s" style="display:none">Delen</a>

Deze code moet je plaatsen op de plek waar je de WhatsApp knop wilt hebben. Het is afhankelijk van het thema wat je gebruikt waar je dit precies moet doen, maar vaak zal het voor berichten in een bestand zijn genaamd “single.php”, dus daar kan je beginnen met kijken. Daarin zou je ergens de functie “<?php the_content(); ?>” moeten zien en je kunt de html code daaronder plakken. De WhatsApp knop zal dan, als alles goed is gegaan, onder je bericht worden weergegeven. Let er hierbij wel op dat de knop alleen zichtbaar zal zijn op mobiele apparaten en je de knop op je computer dus niet zal zien.

Tekortkomingen

Op dit moment werkt de WhatsApp knop alleen voor bezoekers met een iPhone of een smartphone met de laatste Android versie. Dit is natuurlijk wel het grootste deel van de smartphone gebruikers, maar voor een aantal zal het dus niet mogelijk zijn om je WhatsApp knop te gebruiken.