Hoe voeg ik een Instagram feed toe aan mijn webshop?

Geupdate op: 31 mei 2021

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.

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

snapwidget sign up
  • 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’.
snapwidget layout
  • 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.
snapwidget instagram account kiezen
  • Stel je widget in door in het menu links de gewenste opmaak te kiezen. 
snapwidget opmaak 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.
snapwidget responsive
  • 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.
snapwidget devices

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. 
snapwidget popup 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’.
google tag manager 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.
google tag manager snapwidget code
  • 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‘.
google tag manager triggers
  • 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’.

beheeromgeving mijnwebwinkel pagina bewerken

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 €32,50 (excl. BTW). 

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

Heeft dit artikel je geholpen?