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 winkeliers: Little Universe.

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

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

• 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’.

• 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.

  

• Stel je widget in door in het menu links de gewenste opmaak te kiezen. 

  

• 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.

  

• 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.

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. 

  

• 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.

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

• 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’.

  

• Klik vervolgens op de blauwe knop ‘Nieuw’, om een nieuwe tag aan te maken.

  

• Geef je tag een naam en klik vervolgens op het blok ‘Tagconfiguratie’.

  

• Kies vervolgens ‘Aangepaste HTML’.

  

• 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.

  

• Plak de iframe code tussen de 2 apostrofs ( ‘ ‘) op de 4e regel. Zie onderstaande afbeelding ter verduidelijking:

  

• 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‘.

  

• 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:

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

Tot slot is het tijd om je Instagram feed te 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’.

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.

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 €49 (excl. BTW). 

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

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:

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!