Een bewaarknop voor je website maken

Tips en probleemoplossing

"Let op: als je de officiële bewaarknop vóór juni 2016 aan je code hebt toegevoegd, is op 3 oktober 2017 "Pin It" veranderd in "Bewaren"."

De bewaarknop is de beste manier om je bedrijf op Pinterest ontdekt te laten worden. Als je de bewaarknop toevoegt aan de pagina's van je website, kunnen je klanten dingen die ze leuk vinden op Pinterest bewaren, zodat nog meer mensen die dingen kunnen vinden. 
 
Als je een website via Wordpress, Blogger, Tumblr, Wix of Squarespace hebt:
 
WordPress.com WordPress.com
Voor de Pin It-knop voor Wordpress hoef je geen extra code aan je website toe te voegen. Je kunt de Pin It-knop aan al je WordPress-berichten toevoegen door hem in te schakelen in de standaarddeelopties.
  1. Ga naar het dashboard van je WordPress-blog
  2. Ga naar Instellingen en vervolgens Delen
  3. Verplaats Pinterest van Beschikbare diensten naar Ingeschakelde diensten onder het kopje Deelknoppen
  4. Als je de officiële Pin It-knop wilt gebruiken, kies je in het menu Knopstijl voor Officiële knoppen
  5. Klik op Wijzigingen opslaan onder aan de pagina
WordPress.org WordPress.org

Download een invoegtoepassing voor Pin It-hoverknoppen uit de WordPress.org plugin directory.

Blogger Blogger
  1. Ga op het dashboard van je Blogger-blog naar Lay-out
  2. Klik op Bewerken onder het kopje Blogberichten
  3. Zoek de optie Deelknoppen weergeven en controleer of die is ingeschakeld
  4. Verander de volgorde als je dat wilt onder Items rangschikken en klik op Opslaan
Tumblr Tumblr
Je moet eerst een regel JavaScript toevoegen.
 
De JavaScript-regel toevoegen:
  1. Kies het blog dat je wilt bewerken op je Tumblr-dashboard en klik op Aanpassen
  2. Klik op HTML bewerken in het venster Aanpassen
  3. Scrol naar de onderkant van de code
  4. Bekijk of er pinit.js in je code staat - als dit het geval is ben je klaar!
  5. Voeg als dit niet het geval is de volgende code direct boven de afsluitende </body>-tag toe: <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
Zo kun je een Pin It-hoverknop toevoegen:
  1. Voeg de JavaScript-regel toe zoals hierboven is beschreven
  2. Kies het blog dat je wilt bewerken op je Tumblr-dashboard en klik op Aanpassen
  3. Klik op HTML bewerken in het venster Aanpassen
  4. Scrol naar de onderkant van de code
  5. Add data-pin-hover="true" toe voor “src=” in de code van stap 4. Je nieuwe regel ziet er dan zo uit: <script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. Klik op Voorbeeld bijwerken. De Pin It-knop verschijnt nu als je de muis over de nevenstaande voorbeeldafbeelding beweegt. Werkt het niet? Ga dan terug naar stap 4 en controleer of alles klopt.
  7. Klik op Opslaan
Wix.com Wix.com
  1. Klik aan de linkerkant van je editor op Toevoegen (+).
  2. Klik op Sociaal.
  3. Scrol naar de onderkant en klik op Pin It-knop van Pinterest.
  4. Versleep de Pin It-knop naar de gewenste plek op je pagina.
  5. De Pin It-knop maakt een pin gebaseerd op de afbeelding en de beschrijving die je kiest. De pin linkt terug naar de pagina waar je op bent als je op Pin It klikt.
Squarespace Squarespace

Klik hiervoor informatie over hoe je een Pin It-knop maakt voor je Squarespace-site. 

 
Als je zelf een knop wilt maken, moet je eerst kiezen wat voor soort bewaarknop je wilt toevoegen. Je kunt uit drie types kiezen: 
 
  • Hoverknop (klik hier voor een voorbeeld): De bewaarknop verschijnt als iemand de muis over afbeeldingen op de pagina beweegt.
    Learn how to build it Learn how to build it
    1. Ga naar de widgetmaker.
    2. Kies Hoverknop in het gedeelte Knoptype.
    3. Pas de vorm en grootte van de knop aan. 
    4. Probeer je knop uit door je muis over de voorbeeldafbeelding te bewegen. Je kunt ook de Pin It-knop testen door erop te klikken.
    5. Als je tevreden bent met je knop, kopieer dan de code onder het kopje De code kopiëren.
    6. Plak de code net voor de afsluitende </body> van elke pagina van je website waar je de knop wilt zien.
  • Alle afbeeldingen (klik hier voor een voorbeeld): Klik op deze knop om alle afbeeldingen op de website te bewaren. Deze is gemakkelijk te maken.
    Learn how to build it Learn how to build it
    1. Ga naar de widgetmaker.
    2. KiesAlle afbeeldingenin het gedeelteKnoptype
    3. Pas de vorm, grootte, taal of afbeelding van de knop aan. 
    4. Probeer je knop uit door je muis over de voorbeeldafbeelding te bewegen. Je kunt ook de bewaarknop testen door erop te klikken.
    5. Als je tevreden bent met je knop, kopieer dan de code die aan de rechterkant van de pagina verschijnt.
    6. Plak de code tussen de tags <body> en </body> van elke pagina van je website waar je de knop wilt zien.
  • Eén afbeelding (klik hier voor een voorbeeld): Dit is een bewaarknop voor een enkele afbeelding op je pagina. Hier komt wat programmeerkennis bij kijken.
    Learn how to build it Learn how to build it
    1. Ga naar de widgetmaker
    2. Pas de vorm, grootte, taal of afbeelding van de knop aan. 
    3. Voeg de URL's toe van de pagina's waarop de afbeelding waarvoor je een bewaarknop voor wilt maken te vinden is (bijvoorbeeld je startpagina of een ander pagina van je website)
    4. Open een nieuw venster in je browser en ga naar je website
    5. Klik met je rechtermuisknop op de afbeelding waar je een bewaarknop voor wilt maken
    6. Klik op Afbeeldings-URL kopiëren
    7. Ga terug naar de widgetmaker en plak de URL van de afbeelding in het veld Afbeelding
    8. Vul een beschrijving van je afbeelding in
    9. Klik op Maken! om een voorbeeld van de knop te zien
    10. Als je tevreden bent met je knop, kopieer dan de code die aan de rechterkant van de pagina verschijnt
    11. Plak de code tussen de tags <body> en </body> van elke pagina van je website waar je de knop wilt zien

Veelvoorkomende problemen

De teller van de bewaarknop is niet zichtbaar of klopt niet
Als je op de bewaarknop klikt opent de bordkiezer niet in een nieuw venster
Je hoverknop werkt niet
Pinterest kan geen verbinding maken met mijn site

De teller laat het aantal pins zien dat naar de URL verwijst die je in de code van de knop hebt opgegeven. Als dat een andere pagina is dan de pagina waar je je op dit moment op bevindt, kan de teller iets anders aangeven dan je verwacht.

Als je een bewaarknop gebruikt met de instelling "Alle afbeeldingen", laat de teller zien hoeveel pins er in totaal naar de URL van de huidige pagina verwijzen.

Als je de teller naast de knop gebruikt en geen pins op die pagina hebt, is de teller niet zichtbaar. Zodra er minstens één pin vanaf de pagina is verschijnt de teller.

Als je de bewaarknop gebruikt via de plugin van een derde, neem dan contact op met de makers van de plugin om te zien of zij het probleem kunnen oplossen.

Als je je eigen bewaarknop gebruikt, probeer dan deze tips uit:

  • Zorg ervoor dat je de JavaScript-regel in de code van je pagina hebt opgenomen, direct boven de afsluitende tag
  • Als je de regel JavaScript meerdere keren op je pagina hebt, probeer dan alle regels te verwijderen, op de laatste na.
  • Als je zowel de geavanceerde asynchrone als de gewone JavaScript-regel gebruikt, verwijder er dan een van.
  • Controleer als je een plugin van een derde gebruikt of die niet al een pinit.js-regel aan je code toevoegt. Als dit het geval is hoef je hem niet zelf toe te voegen.
Sommige hosts ondersteunen geen JavaScript; je kunt dan de code van onze widgetmaker niet toevoegen. Het is misschien mogelijk dat je bij je host op alternatieve manieren widgets kunt toevoegen.

Probeer deze tips:
 
  • Zorg ervoor dat je afbeeldingen ten minste 100 pixels (hoogte of breedte) bij 200 pixels (andere richting) zijn (en ten minste 120 bij 120 pixels in het geval hover-knoppen)
  • Zorg ervoor dat je afbeeldingen niet worden aangeroepen vanuit de CSS (background) en elke afbeelding een src-eigenschap heeft dat begint met "img"
  • Voeg de code toe voor de afsluitende tag

Dit betekent dat de maximale wachttijd voor de verbinding is verstreken voordat we via je site een pin hebben kunnen maken. Dit kunnen we helaas niet oplossen. Dit probleem treedt meestal op als een site langzaam is. Ga na of je het probleem aan jouw kant kunt oplossen.