In dit artikel leer je waarom en hoe je een Social Share Button op jouw website kunt implementeren binnen enkele minuten.
Waarom een Social Share Button op jouw blogpage?
Om de volgende redenen moet jij een Social Share Button hebben:
- Social Shares is een "SEO ranking signal", m.a.w. hoe vaker jouw blog wordt gedeeld, hoe beter deze wordt gevonden;
- **Meer Brand Exposure. ** Simpel, hoe meer mensen jouw merknaam zien, hoe sneller ze jouw producten willen kopen / diensten willen afnemen.
- Verbeter de klantbelevenis. Als klanten jouw blog willen delen, help ze dan!
- Meer bezoekers. Ook logisch, hoe vaker iets gedeeld wordt, hoe meer mensen de pagina zullen bezoeken.
Waarom dien jij geen Social Share Button te hebben?
Gelet op hetgeen hierboven beschreven, lijkt het een no-brainer. Social Share buttons hebben eigenlijk alleen maar voordelen. Maar is dit wel zo? Er is onderzoek gedaan naar het deelgedrag van bezoekers (zie bijvoorbeeld deze post van Seattlewebdesign), waaruit blijkt dat de social share buttons bijna niet gebruikt worden.
En als deze toch bijna niet gebruikt worden, wat is dan het nut van een social share button?
Terechte vraag. Indien het blijkt dat jouw social share button niet wordt gebruikt, dan is ons advies: haal de knop maar weg.
Aan de andere kant, misschien ligt het wel aan iets anders. Zou het kunnen dat jouw Social Share Button niet genoeg opvalt, omdat de buttons er hetzelfde uitzien als op alle websites. Misschien nodigt het daardoor helemaal niet uit om er op te klikken?
Probeer dan eens een unieke Social Share Button. Hieronder leggen wij uit hoe je deze binnen 5 minuten een eigen Social Share Button kunt implementeren.
Hoe voeg je een Social Share Button toe?
De eerste stap is het vinden van een unieke Social Share Button. Wij hebben een openbaar design van internet geplukt, oorspronkelijk gemaakt door ene Nate. Je hoeft immers het wiel niet altijd zelf uit te vinden.
HTML
De eerste vraag die je jezelf moet stellen is waar je de Social Share Button wilt hebben. Wij hebben ervoor gekozen om deze op een 'fixed' positie van het scherm neer te zetten (linksonder). Zo is de knop altijd zichtbaar. Onderstaande code plak je in de HTML body van jouw pagina. published
HTML code for Social Share Button
**Let op: **
- Je hebt fontawesome nodig voor de icoontjes.
- De links naar RentVisie kun je uiteraard aanpassen naar je eigen URL.
Aan het eind van het artikel tref je een link naar een codepen, waar je de code direct kunt kopiëren (inclusief toegang tot Fontawesome).
SCSS
Een van de belangrijkste aspecten: de styling. De knop moet er natuurlijk goed uitzien. Hieronder tref je onze code aan. Merk op dat we de property position: fixed gebruiken om de knop linksonder op het scherm vast te pinnen. published
Styling: CSS for Social Share Button
Let op: wij hebben de styling in SCSS geschreven. De oorspronkelijke code is CSS, deze kun je ook gebruiken.
Javascript
En tot slot alleen nog wat plain vanilla Javascript om de knop zijn coole bewegende effecten te geven.
Javascript code for Social Share Button
Klik hier om de volledige oorspronkelijke code van Nate te bekijken en vervolgens te implementeren op jouw eigen website.
Afsluitende Opmerking
In deze blog hebben we laten zien hoe jij binnen 5 minuten een Social Share Button kunt implementeren op jouw website. Wil je toch liever een andere button hebben, dan kun je hetzelfde doen als wij. Vind een button die je mooi vind op internet (bijvoorbeeld hier) en gebruik de basis van die code om jouw eigen unieke social share button op jouw pagina te implementeren.