WhatsApp op telefoon

WhatsApp share button toevoegen aan je WordPress website

Recentelijk hebben we een WhatsApp share button toegevoegd aan onze nieuws items. Hoe we dat gedaan hebben? Dat lees je in dit bericht.

Plugin gebruiken of niet?

Er zijn meerdere manieren om een whatsapp share button toe te voegen aan je WordPress website. Zo zit deze mogelijkheid ingebouwd in de AddThis plugin en zijn er ook plugins te vinden die alleen een WhatsApp button toevoegen.

Naast plugins is er ook een online share button generator te vinden die je kan toevoegen aan je WordPress site.

Al deze oplossingen bevatten in mijn ogen veel te veel onnodige code of andere functionaliteiten waar ik niet op zit te wachten. Zelf ben ik een voorstander om dit soort functionaliteit zo eenvoudig mogelijk te houden zonder afhankelijk te zijn van een externe plugin.

Oplossing met eigen code

Alleen als je geen bestaande oplossing wil gebruiken, hoe los je dit dan op? Gelukkig is het heel eenvoudig om deze functionaliteit toe te voegen aan je website. Het is zelfs zo eenvoudig dat je alleen een link nodig hebt met daarin een aantal whatssapp specifieke parameters.

De basis voor de share link is als volgt:

<a href="whatsapp://send?text=De titel van je bericht De link naar je bericht>Deel via WhatsApp</a>

Deze link opent de WhatsApp app op je telefoon waarna je na het selecteren van een contactpersoon het bericht kan versturen.

Naast de mobiele app bestaat ook de desktop variant van WhatsApp. Bovenstaande link is niet bruikbaar voor deze variant maar ook daar is een oplossing voor. Door de link aan te passen naar onderstaand voorbeeld krijg je een link die gebruikt kan worden voor de desktop variant:

<a href="https://web.whatsapp.com/send?text=De titel van je bericht De link naar je bericht>

Het is uiteraard zeer verwarrend om twee nagenoeg identieke links te tonen op je website waarbij de ene link alleen werkt op mobiel en de andere op desktop. Ik heb dit opgelost om de links een aparte class mee te geven en op basis van media queries bepaalt welke button is laat zien op basis van scherm formaat.

Aanpassing voor WordPress

Nu moeten we de links alleen nog wel werkend krijgen voor WordPress zodat de juiste titel en link gebruikt worden voor elk nieuwsbericht. Dit is bijzonder eenvoudig door de code als volgt aan te passen:

<a href="whatsapp://send?text=<?php the_title();?> <?php the_permalink();?>Deel via WhatsApp</a>

Deze code werkt op basis van de standaard WordPress loop en dien je ook binnen de loop te plaatsen.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		
    <!—- Plaats je WhatsApp share code ergens tussen deze php code -->
		    
<?php endwhile; else : ?>
		
    <!-— Toon content niet gevonden melding -->

<?php endif; ?>

Welke templatebestand je nodig hebt ligt aan je gebruikte thema. Voor een standaard nieuwsbericht zal je het single.php bestand nodig hebben.

Styling van je button

Hoe je de button vorm wilt geven laat ik aan jou over. Zelf gebruiken we de officiele WhatsApp kleur als achtergrond, #25D366, en tonen we een WhatsApp icon. Voor de icons op onze website gebruiken we het bekende FontAwesome.

WordPress onderhoud

WordPress website onderhoud

Loop je wel eens tegen een probleem aan? Kun je af en toe wel wat hulp gebruiken van een WordPress specialist? We staan ook op afroep klaar om je te helpen met je website!

Bekijk de mogelijkheden

Ook interessant

Cookies en privacy

Je weet dat ze er zijn: cookies. Per categorie kan je jouw keuze voor het gebruik van cookies aangeven. Deze methode komt overeen met de nieuwe AVG (ingangsdatum 25 mei 2018). Wij hebben de cookies van Google Analytics volledig geanonimiseerd en daarom mogen wij die plaatsen zonder toestemming. Op onze Privacy Pagina kan je hier meer over lezen.

Privacy policy | Sluiten
Instellingen