start direct

Hoe voeg ik een Instagram feed toe aan mijn webshop?

Instellen van een Instagram feed met SnapWidget. Om een Instagram feed te plaatsen, is het noodzakelijk dat je Google Tag Manager hebt gekoppeld (dit is beschikbaar vanaf een Mijnwebwinkel PRO abonnement). Mocht je dat nog niet gedaan hebben, lees dan via onderstaande links hoe je een Google Tag Manager account aanmaakt en hoe je deze kunt koppelen in de beheeromgeving van je webshop. Doe dit voordat je met SnapWidget verdergaat. 

 Informatie over Google Tag Manager en het aanmaken van een account
 Handleiding: hoe koppel ik Google Tag Manager aan mijn Mijnwebwinkel shop

Een voorbeeld van een Instagram feed met behulp van SnapWidget zie je bij één van onze webwinkeliers: Little Universe.

Stap 1: SnapWidget

Bij de eerste stap ga je ervoor zorgen dat je bekend wordt met SnapWidget en dat je de Instagram feed kunt instellen. 

Account aanmaken

Ga naar snapwidget.com en maak een eigen account aan door op ‘sign up’ te klikken. Het is mogelijk om een gratis account of een betaald account aan te maken. We adviseren het betaalde account ‘Lite Plan’*. De belangrijkste voordelen van een betaald account zijn dat de foto’s uit de feed doorlinken naar je eigen Instagram-account en dat de widget voor verschillende devices (mobiel, tablet, desktop) in is te stellen zodat deze goed schaalt.

* Geaccepteerde betaalmethodes zijn creditcard en PayPal

unnamed-2_0.png

Widget maken

  • Wanneer je een account hebt aangemaakt kun je een widget maken waarmee je de Instagram feed instelt. Klik op ‘choose a service’ en selecteer ‘Instagram’.
    Je hebt keuze uit verschillende lay-outs. In deze handleiding kiezen wij voor de lay-out ‘Instagram grid’.
unnamed_1.png

Widget configureren

  • Klik na het kiezen van de lay-out op de knop ‘configure widget’. Koppel het Instagram-account waarvan je de foto’s wilt tonen in de feed. Je kunt je account koppelen door in te loggen via Instagram of Facebook.
pasted image 0-8.png
  • Stel je widget in door in het menu links de gewenste opmaak te kiezen. 
pasted image 0-9.png
  • Zet de ‘thumbnail size’ op 160 pixels en zet in onderaan in het menu de ‘responsive’ optie op Yes. Dit zorgt voor het optimaal schalen van de feed in je webshop.
pasted image 0-10.png
  • In het tabblad ‘responsive’ kun je de widget instellen voor de verschillende devices. In de rechterhelft van het scherm zie je een voorbeeld van de Instagram feed.
pasted image 0-11.png

Tip! Kies voor mobiel een breedte van maximaal één of twee foto's zodat de Instagram feed ook op mobiel goed zichtbaar is.

  • Als de widget helemaal naar wens is, klik dan op de blauwe knop ‘get widget’. Je ziet nu een pop-up scherm met een iframe code. 
pasted image 0-12-2.png
  • Klik op ‘copy to clipboard’ en plak de code even tijdelijk in een text-editor zoals kladblok (Windows) of notities (Mac OSX). Deze code heb je nodig in de volgende stap bij Google Tag Manager in de beheeromgeving van je webshop.

Stap 2: Google Tag Manager

Nu is het tijd om aan de slag te gaan met Google Tag Manager. 

Tag aanmaken

  • Zorg dat je bent ingelogd in Google Tag Manager en selecteer de container die je gekoppeld hebt met je winkel. Selecteer links in het menu het item ‘Tags’.
GTM 1_0.jpg
  • Klik vervolgens op de blauwe knop ‘Nieuw’, om een nieuwe tag aan te maken.
GTM 2.jpg
  • Geef je tag een naam en klik vervolgens op het blok ‘Tagconfiguratie’.
pasted image 0-15.png
  • Kies vervolgens ‘Aangepaste HTML’.
GTM 3.jpg
  • Plak vervolgens onderstaand stukje code in het HTML-veld (dus niet het stukje code wat je net in je kladblok gekopieerd hebt).

<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<script>
 var iframe = '';
 var elements = document.getElementsByTagName("p");
 [].forEach.call(elements, function (element) {
   if (element.textContent === "[instagram-feed]") {
     var iframeDiv = document.createElement("div");
     iframeDiv.innerHTML = iframe;
     element.parentNode.replaceChild(iframeDiv, element);
   }
 });

</script>

  • Pak nu de iframe code erbij die je in de vorige stap hebt gegenereerd met SnapWidget. Kopieer alleen het stukje vanaf <iframe… tot en met </iframe>. Alle overige informatie hoeft niet gekopieerd te worden.
instagramfeed.png
  • Plak de iframe code tussen de 2 apostrofs ( ‘ ‘) op de 4e regel. Zie onderstaande afbeelding ter verduidelijking:
Tagconfiguratie_0.jpg
  • Wanneer je alle code hebt geplakt, klik je rechtsboven in je scherm op de blauwe knop ‘Opslaan‘. Er komt nu een pop-up met de melding dat je nog geen trigger hebt geselecteerd. Klik op ‘Trigger toevoegen‘.
pasted image 0-18.png
  • Selecteer vervolgens de optie ‘All pages’ bij Triggers.
     
  • Klik nogmaals op de blauwe knop ‘Opslaan’ rechtsboven in je scherm om je tag op te slaan. Als je tag is opgeslagen klik je rechtsboven in je scherm op ‘Verzenden’ en vervolgens op ‘Publiceren’. Geef je tag eventueel een naam en beschrijving en klik op ‘Doorgaan’. Je ziet nu het volgende scherm:
GTM 4.jpg

Na het laden is je tag gepubliceerd en kun je de Instagram feed in je webshop plaatsen!

Stap 3: Mijnwebwinkel

Tot slot is het tijd om je Instagram feed te plaatsen in je webshop. 

Instagram feed plaatsen in je webshop

Ga naar de beheeromgeving van je webwinkel. Ga daar naar de pagina waar je de Instagram feed wilt plaatsen. In de tekst van deze pagina plak je de volgende code: [instagram-feed] 

Let op: zorg dat ‘[instagram feed] niet dikgedrukt is en gebruik een enter om de tekst in te voegen (geen shift enter want dan werkt het niet).

Klik vervolgens op ‘Opslaan’.

pasted image 0-20.png

Google Tag Manager zal nu dit stukje code automatisch vervangen met de Instagram feed van SnapWidget!

Let op! Wanneer je de lay-out van de Instagram Feed wijzigt nadat je die in je webshop hebt ingesteld, kan het zijn dat de wijzigingen niet doorgevoerd worden. Dit komt doordat de Instagram feed in je cache onthouden wordt. Om de Instagram Feed op de juiste manier te zien, moet je even je cache legen of je webshop bekijken in de incognito stand van je browser.

Instagram feed laten instellen? Nu voor €39!

Geen zin om het zelf in te stellen of kom je er niet helemaal uit? Wij helpen je graag met het instellen van je Instagram feed! We rekenen voor deze service eenmalig €39 (excl. BTW). 

Neem hiervoor contact op met onze klantenservice: bel 0412 66 80 11 of mail support@mijnwebwinkel.nl.

Let op

Het kan voorkomen dat je na verloop van tijd het instagram widget opnieuw moet koppelen (re-auth) aan je Instagram account. Dat komt doordat de autorisatie is verlopen:

Widget updaten.png

Om dit op te lossen log je in in je Snapwidget account, waarna je klikt op het vak onder "username" (zie afbeelding hieronder). Daarna volg je de stappen om opnieuw te koppelen. Klik daarna op "Update & Get Widget" en klaar is kees!

Opnieuw koppelen.png