WhatsApp share button toevoegen aan je WordPress website

Weten hoe je een WhatsApp share button kunt toevoegen aan je WordPress website? Dat lees je hier.

Plug-in 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 plug-in en zijn er ook plug-ins te vinden die alleen een WhatsApp button toevoegen. Naast plug-ins is er ook een online share button generator te vinden die je kan toevoegen aan je WordPress site.

legoblokken plugins header

Hoe herken je een goede & veilige WordPress plug-in? | Prettige Plug-ins

Ga voorzichtig om met plug-ins. Ontdek hier waar je op moet letten.

Bekijk de blog

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 plug-in.

Niels Pilon, WordPress Specialist bij Fris Online

Oplossing met eigen code

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

De basis voor de share link is als volgt:

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

Deze link opent de WhatsApp app op je telefoon, daarna kun je – na een contactpersoon hebt geselecteerd – een bericht versturen.

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

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

Het is natuurlijk heel 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 door de links een aparte class mee te geven. Zo wordt met media queries bepaald welke button wordt getoond op basis van scherm formaat.

Eerste hulp bij je website?

Onderhoud laten plegen aan je WordPress website? Of kom je ergens niet uit? Bekijk de mogelijkheden of neem direct contact op met onze WordPress Specialist! >>

Bekijk de mogelijkheden

Of neem contact op

Niels Pilon

WordPress Specialist

0182 – 71 20 40
niels@fris.online

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:

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

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

[php]
<?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; ?>
[/php]

Welk template-bestand je nodig hebt, ligt aan je thema. Voor een standaard nieuwsbericht zul 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. Scroll maar naar beneden, dan kun je ‘m bewonderen. Voor de icons op onze website gebruiken we FontAwesome.

Je website optimaliseren?

Is je website niet aan vervanging maar wèl aan verbetering toe? Of heb je een prima website die je wilt doorontwikkelen? Dan is website optimalisatie iets voor jou.

Bekijk de mogelijkheden

Of neem contact op

Niels Pilon

WordPress Specialist

0182 – 71 20 40
niels@fris.online

Meer artikelen over Websites

4 WordPress plug-ins die je wilt mijden

Wil je een snelle en effectieve WordPress website? Ontdek welke populaire plug-ins je dan beter niet kunt gebruiken.

Lees verder
tagWebsites
WordPress 5.8

WordPress 5.8 | Wat verandert er bij deze nieuwe release?

WordPress heeft op 20 juli een nieuwe release uitgebracht: WordPress 5.8. Wat is nieuw binnen deze update van de WordPress core? Lees het hier.

Lees verder
tagWebsites
snelheid_website_verbeteren

Snelheid van je website verbeteren? | Zo is een trage website verleden tijd

Is jouw website traag? Of valt het wel mee, maar wil je de snelheid van je website nog meer verbeteren? Ontdek hier onze 6 tips om je website sneller te maken.

Lees verder
tagWebsites