Hur kan jag visa mitt Instagram-flöde i min butik?

E37 Smart E-handel har ingen specifik widget för Instagram, men med widgeten Fri HTML-kod och en inbäddnings-kod från en tredjepartstjänst kan du visa upp den eller de senaste bilderna ifrån ditt företags Instagramkonto.

Val av Instagram-tjänst

Instagram har ingen egen tjänst för att visa upp ett kontos senaste bild på en annan sida, men det finns olika tredjepartstjänster som låter dig göra just det. Två lättanvända tjänster vi hittat heter SnapWidget  och LightWidget  (som tidigare hette Instansive). De har olika för- och nackdelar. Notera att dessa tjänster inte är utvecklade eller tillhandahållna av oss på E37, så vi kan inte ansvara för hur de fungerar, uppdateras eller om de ändrar prissättning eller villkor så att informationen på denna sida blir inaktuell.

Gör så här

1. I admin: Välj Webbplats -> Sidor
2. Klicka på sidan där du vill lägga in Instagram-widgeten på.
3. Klicka knappen Lägg till widget.
4. Välj widgeten Fri HTML-kod (under den förvalda kategorin Allmänna.)
5. Ge widgeten en Rubrik och välj Rubrikmall. Om du väljer Ingen rubrik som rubrikmall är rubriken du valt endast för att senare lättare veta vilken widget det här är i admin, så döp den i sådana fall förslagsvis till "Instagram".
6. Sätt widgetens Höjd i pixlar. Lämnas fältet tomt så tar widgeten upp det utrymme den behöver för att visas i sin helhet.
7. Gå över till tabben Widgetinställningar.
8. I ett annat webbläsarfönster: Skapa din inbäddnings-kod från tredjepartssidan, se Hur får jag min inbäddnings-kod nedan. Markera och kopiera koden.
9. I admin: Klistra in din kod i rutan HTML-kod. (Den förskrivna texten <p>Detta är en <b>exempeltext</b>.</p> är såklart bara ett exempel och ska i sin helhet skrivas över.)
10. Klicka knappen Spara.
11. Dra och släpp så att din widget hamnar där du vill ha den på sidan och så att den tar upp rätt antal kolumner.

Hur får jag min inbäddnings-kod?

SnapWidget

1. Gå till https://snapwidget.com/signup.
2. Skapa ett konto för SnapWidget. Notera att du som ditt lösenord här inte bör återanvända ditt lösenord ifrån Instagram.
3. I popup-fönstret som öppnas loggar du in på Instagram med ditt användarnamn och lösenord där.
4. Ditt kontos Username på Instagram fylls ny automatiskt i.
5. Välj Widget type
• Grid visar upp den/de senaste bilderna i ett rutnät.
• Board visar även upp bildtexter, postare och hashtags för bilderna.
• Scroll låter användaren skrolla mellan flera bilder i sidled.
• Slideshow visar övertoningar mellan de senaste bilderna.
• Map visar bilderna på en karta från Google för att visa var bilderna tagits.
6. Så här ser inställningarna som går göra hos SnapWidget för widget-typen Grid ut med ett gratiskonto. Med en uppgraderad betalversion får man även tillgång till tabben Advanced settings.
   
7. Välj Thumbnail size för att ställa in storleken på bilderna. Om du, (för Grid eller Board), istället väljer att slå på sista valet Responsive så kommer denna inställning inte att användas.
8. Layout väljer hur många gånger hur många bilder som ska visas.
9. Photo Border avgör om bilderna ska visas med en ram.
10. Background color blir bakgrundsfärg och anges som ett hex-värde, så ffffff blir till exempel vitt.
11. Photo padding avgör hur många pixlar som lämnas tomma mellan bilderna.
12. Hover effect avgör vilken, om någon, effekt som kan ske när man för muspekaren över en bild.
13. Om Sharing buttons slås på så visas knappar för att dela bilderna på Facebook och Twitter.
14. Välj om widgeten ska vara Responsive, dvs om innehållet i den responsivt ska skalas om beroende på utrymmet den ges.
15. Klicka knappen Preview för en förhandsvisning av hur widgeten kommer se ut.
16. Om allt ser bra ut klicka knappen Close för att stänga förhandsgranskningen och sedan Get widget.
17. Markera och kopiera den genererade koden.

LightWidget

1. Gå till lightwidget.com.
2. Klicka knappen Log in with Instagram och logga in med ditt Instagram-konto.
3. Fyll i ditt kontos Username på Instagram eller den Hashtag vars bilder du vill visa.
4. Välj Type of widget. Beroende på ditt val visas olika underval.
   1. Välj antal bilder som ska växlas mellan.
   2. Välj vilken effekt, om någon, du vill ha när muspekaren förs över en bild.
   1. Välj hur många kolumner du vill visa.
   2. Välj hur många bilder du vill visa totalt. Det är oftast rimligt att visa ett antal bilder som är jämnt delbart med antalet kolumner du valt så att varje kolumn får lika många bilder i sig.
• Grid visar upp den/de senaste bilderna i ett rutnät.
  1. Välj antal kolumner och rader av bilder som ska visas.
  2. Välj vilken effekt, om någon, du vill ha när muspekaren förs över en bild.
  3. Välj antalet pixlar mellan bilderna.
  4. Välj om du vill visa en laddningsanimering medan bilderna laddas in.
  5. Välj om du vill visa eventuella bildtexter (och hashtaggar). Om du väljer att visa dem, välj även maxantal tecken som ska visas. (Längre texter klipps av med "...".)
• Slideshow visar upp en bild i taget och växlar automatiskt mellan bilderna.
• Column (Pinterest style) Visar bilderna i kolumner, layout liknande hur bilder presenteras på siten Pinterest.
5. Om du vill visa flera av LightWidgets widgets intill varandra så kan du trycka länken Add för att lägga till ytterligare en widget till din inbäddnings-kod. Typiskt klarar du dig troligen utan att göra detta om du inte av någon anledning har flera Instagram-konton eller hashtaggar som ska visas upp.
6. Klicka knappen Preview för att se en förhandsgranskning av hur din widget kommer att se ut. Förhandsgranskningen har ett handtag till höger som går dra i för att se hur din widgeten kommer se ut i olika storlekar. Notera att hur du ändrar i storleken på förhandsgranskningen inte är det som avgör hur stora bilderna blir i din widget; widgeten är responsiv och skalas om efter hur mycket utrymme du ger iframen. Detta ställer du in på E37 när väljer hur många kolumner och vilken höjd widgeten Fri HTML-kod ska få ta upp.
7. Om allt ser bra ut klickar du knappen Get code för att få din kod. Kopiera den genererade koden.