Hur man lägger till Instagram-bilder som kan köpas i WordPress

En av de coola sakerna med Instagram är dess funktion för shoppningsbara inlägg. Du kan tagga produkter direkt i dina foton, vilket gör det enkelt för följare att handla dina varor med bara en tryckning.

Men här är haken: de inbyggda shoppingtaggarna fungerar inte när du bäddar in ett Instagram-inlägg på din WordPress-webbplats. Det betyder att du kan gå miste om försäljning.

Men oroa dig inte! Vi har hittat ett enkelt sätt att lägga till köpbara Instagram-bilder till WordPress med hjälp av Smash Balloon-pluginet. 🛍

Denna lösning låter dig skapa ett shoppable Instagram-flöde på din webbplats, vilket hjälper dig att omvandla ditt sociala medieinnehåll till ett kraftfullt säljverktyg.

I den här artikeln visar vi dig hur du enkelt lägger till köpbara Instagram-bilder i WordPress.

Vad är ett köpbart Instagram-flöde?

Ett shoppable Instagram-flöde är en serie foton där varje foto länkar till en produktsida. När du klickar på fotot leder det dig till produkten som visas på fotot.

Du kanske är bekant med den här funktionen när du går in på Instagram och ser att ett foto har en speciell produktetikett, så här:

På Instagram självt är den här funktionen användbar för användare som omedelbart vill köpa en produkt de ser i appen. Och om du är en småföretagare, kanske du vill ta med den här funktionen till ditt inbäddade Instagram-flöde på din webbplats också.

Varför behöver du ett plugin för att lägga till Instagram-köpbara bilder i WordPress?

Huvudanledningen till att du behöver ett plugin för detta är att Instagrams officiella shoppingtaggar försvinner när du bäddar in ett inlägg på din webbplats.

Så även om du har ett shoppningsbart inlägg på Instagram, kommer dina webbplatsbesökare inte att kunna se eller klicka på produktlänkarna. Ett plugin hjälper dig att återskapa den shoppningsbara upplevelsen direkt på din webbplats.

Haken är att det inte är lätt att konfigurera. Du måste konfigurera en Facebook-katalog, en produktkatalog och en Facebook-företagssida.

Dessutom behöver du få godkännande från Instagram för att använda dessa shoppingfunktioner.

Ännu viktigare, även om du bäddar in ett Instagram-inlägg med en produktetikett på din webbplats, kanske etiketten inte visas. Med andra ord, du kan missa många potentiella konverteringsmöjligheter.

Lyckligtvis finns det ett enkelt alternativ med Smash Balloon Instagram Pro.

Låt oss se hur du enkelt kan lägga till Instagram-köpbara bilder på din WordPress-webbplats.

Du kan använda dessa snabblänkar för att navigera genom stegen:

Steg 1: Installera ett Instagram-foton-plugin med shoppable-stöd

Det bästa sättet att lägga till shoppable Instagram-bilder i WordPress är att använda Smash Balloon Instagram Pro.

Det är det bästa pluginet för Instagram-fotoflöden på marknaden och låter dig skapa ett helt anpassningsbart, köpbart flöde på din webbplats.

När du publicerar nya bilder på Instagram kommer de att visas på din webbplats automatiskt. Du kan sedan enkelt lägga till köpbara länkar till dessa nya inlägg inom Smash Balloon, vilket säkerställer att besökare alltid ser ditt senaste innehåll och dina produkter.

Vi har grundligt testat Smash Balloon-pluginet och funnit att det är mycket nybörjarvänligt. För att lära dig mer, se vår detaljerade recension av Smash Balloon.

Innan du börjar måste du koppla ditt Instagram-konto till en Facebook-sida.

Om du har ett personligt Instagram-konto, kanske du också vill göra det till ett företagskonto, eftersom detta gör det möjligt för Smash Balloon att automatiskt visa din Instagram-bio och rubrik.

För steg-för-steg-instruktioner om hur du gör båda dessa saker kan du se FAQ-sektionen i slutet av den här guiden.

När du är redo, fortsätt och installera och aktivera Smash Balloon Instagram Pro-pluginet. För mer information, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Instagram Feed » Settings och ange din licensnyckel i fältet 'License Key'.

Du hittar den här informationen i ditt konto på Smash Balloon-webbplatsen.

Efter att ha angett nyckeln, klicka bara på knappen ‘Aktivera’.

Steg 2: Anslut ett Instagram-konto till WordPress

Efter att ha aktiverat pluginet är din första uppgift att ansluta ditt Instagram-konto till WordPress. Gå helt enkelt till Instagram Feed » All Feeds och klicka sedan på ‘Add New.’

Med Instagram Feed Pro kan du skapa flöden från taggade inlägg och hashtags eller till och med skapa en social vägg med innehåll från många olika sociala medier.

Vi vill visa shoppable bilder från vår Instagram-tidslinje, så välj helt enkelt 'User Timeline' och klicka sedan på 'Next'.

Välj nu det Instagram-konto där du kommer att hämta de shoppable bilderna från.

För att komma igång, klicka på knappen 'Lägg till källa'.

Välj därefter om du vill visa shoppningsbara bilder från ett personligt eller ett företagskonto på Instagram.

Om du markerar rutan bredvid ‘Personal’ kommer Smash Balloon inte att inkludera Instagram-avataren och bio i din rubrik som standard.

För bästa upplevelse och för att automatiskt visa din profilinformation rekommenderar vi att du använder ett företagskonto, som nämnts i steg 1.

Efter att ha valt 'Personlig' eller 'Företag' klickar du på 'Logga in med Facebook'.

Du kan nu välja det Instagram-konto som du vill visa på din WordPress-webbplats och klicka på 'Next'.

Kontrollera därefter rutan bredvid Facebook-sidan som är länkad till Instagram-kontot med dina köpbara bilder.

När du har gjort det, klickar du bara på knappen 'Next'.

Du kommer nu att se ett popup-fönster med all information som Instagram Feed Pro kommer att ha tillgång till och de åtgärder det kan utföra.

För att begränsa pluginets åtkomst till ditt Instagram-konto, klicka helt enkelt på någon av omkopplarna för att ändra den från 'Yes' till 'No'. Var bara medveten om att detta kan påverka de foton som du kan visa på din WordPress-blogg eller webbplats.

Med det i åtanke rekommenderar vi att du lämnar alla reglage aktiverade. När du är nöjd med inställningarna klickar du på 'Klar'.

Du kommer nu att se ett popup-fönster med det Instagram-konto du just lade till på din webbplats.

Markera helt enkelt rutan bredvid det kontot och klicka sedan på 'Lägg till'.

Instagram Feed Pro tar dig nu tillbaka till skärmen ‘Add New Feed.’

Se här till att rutan bredvid det Instagram-konto du just lade till är markerad. Klicka sedan på ‘Next.’

Plugin skapar nu ett Instagram-flöde med foton.

Steg 3: Aktivera Smash Balloons shoppable-funktion

Därefter behöver du aktivera Smash Balloons köpbara funktion. Från redigeraren för flödesanpassning, välj fliken ‘Settings’ och klicka sedan på ‘Shoppable Feed.’

På den här skärmen, fortsätt och aktivera reglaget ‘Aktivera’ så att det blir blått.

Smash Balloon kommer nu att visa en 'Lägg till'-knapp på varje foto eller video i ditt Instagram-flöde.

Hitta helt enkelt det första inlägget du vill göra köpbart och klicka på dess 'Lägg till'-knapp.

Du kan nu skriva in URL:en för produkten eller tjänsten i fältet 'Product Link' och klicka på 'Add'.

Nu kommer ett klick på den här bilden att öppna den länkade URL:en i en ny flik.

Upprepa helt enkelt dessa steg för att göra varje bild köpbar.

Om du behöver ändra en posts URL vid något tillfälle, hovra bara med musen över den och klicka på 'Uppdatera'.

När du har lagt till alla dina länkar, glöm inte att klicka på knappen 'Spara'.

När en besökare klickar på en av dessa bilder på din webbplats, kommer de att tas direkt till produktsidan i en ny flik, vilket skapar en sömlös shoppingupplevelse.

Steg 4: Filtrera ditt köpbara Instagram-flöde

Som standard visar Smash Balloon alla bilder och videor från ditt Instagram-konto. Men eftersom vi skapar ett shoppable flöde kanske du vill filtrera dina inlägg och bara visa foton som länkar till en produkt eller tjänst.

Detta kan hjälpa kunder att hitta produkter att köpa i din webbutik, utan att distraheras av andra foton och videor i ditt Instagram-flöde.

Med Smash Balloon är det enkelt att filtrera Instagram-inlägg baserat på deras bildtexter. Du kan helt enkelt lägga till ett nyckelord eller en hashtag till dina shoppningsbara bilder på Instagram och sedan skapa ett matchande filter i Smash Balloon.

Du kan till exempel använda en hashtag som #köpnu i dina Instagram-texter för alla bilder du vill göra köpbara.

För att skapa ett filter i Smash Balloon, välj fliken ‘Settings’ från redigeraren för flödesanpassning,

Klicka sedan på 'Filter och moderering'.

I rutan 'Visa endast inlägg som innehåller' skriver du in hashtags eller nyckelord som du vill använda i filtret.

För att använda flera ord i filtret, separera helt enkelt varje hashtag eller nyckelord med ett kommatecken.

När du är nöjd med hur filtret är inställt, klicka på knappen 'Spara'.

Var bara medveten om att förhandsgranskningen inte uppdateras omedelbart, så du måste uppdatera sidan för att se filtret i aktion.

Steg 5: Anpassa ditt shoppningsbara Instagram-flöde

När du är nöjd med de foton och videor som visas i ditt shoppningsbara flöde, kanske du vill ändra hur flödet ser ut.

För att anpassa ditt shoppable Instagram-flöde, klicka helt enkelt på fliken 'Customize'. På vänster sida finns alla inställningar du kan använda för att ändra hur sociala medier-flödet ser ut.

De flesta av dessa inställningar är självförklarande, men vi kommer snabbt att gå igenom några nyckelområden som kan hjälpa dig att få fler försäljningar.

Låt oss börja högst upp genom att välja ‘Feed Layout’. Här kan du välja olika layouter för din shoppningsbara feed, som t.ex. highlight och carousel.

När du gör ändringar uppdateras förhandsgranskningen automatiskt så att du kan prova olika inställningar för att se vad som ser bäst ut.

Beroende på layouten får du några extra inställningar som du kan använda för att finjustera ditt flöde.

Om du till exempel väljer 'Highlight', kan du sedan tala om för Smash Balloon att markera inlägg baserat på ett mönster, inläggs-ID eller en specifik hashtag. Detta är utmärkt för att markera dina mest populära produkter.

Du vill se till att det shoppable Instagram-flödet ser lika bra ut på smartphones och surfplattor som på stationära datorer.

Som standard kommer Smash Balloon att visa samma antal foton på stationära datorer och mobila enheter.

Du kan förhandsgranska hur det köpbara flödet kommer att se ut på stationära datorer, surfplattor och smartphones med hjälp av raden med knappar i det övre högra hörnet.

Du kan visa färre shoppable foton på mobila enheter genom att ändra inställningarna i avsnitten 'Number of Posts' och 'Columns'.

Efter att ha gjort några ändringar, använd bakåtpilen eller välj ett annat alternativ från menyn till vänster, som ‘Color Scheme,’ för att återgå till de huvudsakliga anpassningsinställningarna.

Som standard använder Smash Balloon ett färgschema som ärvs från ditt WordPress-tema, men det har också teman för 'Ljus' och 'Mörk' som du kanske vill använda för den köpbara feeden istället.

Ett annat alternativ är att skapa din egen färgpalett genom att välja 'Custom'.

Använd sedan helt enkelt kontrollerna för att ändra länkfärg, bakgrundsfärg, textfärg för flödet och mer.

Som standard lägger Smash Balloon till en rubrik till det shoppable flödet, vilket är din profilbild och namnet på din sida.

För att ändra hur den här sektionen ser ut, klicka på 'Header' i menyn till vänster och använd sedan inställningarna för att ändra bakgrundsfärgen, sidhuvudets storlek, lägga till Instagram-biotext och mer.

Du kan också lägga till en annan bio. Till exempel kan du uppmuntra folk att köpa dina produkter, eller erbjuda besökare en exklusiv kupongkod.

För mer information om att skapa dessa koder, se vårt experttips om de bästa WordPress-pluginsen för kupongkoder för din onlinebutik.

För att skapa en unik Instagram-bio, skriv helt enkelt i rutan 'Lägg till anpassad bio'.

När det är klart, använd bakåtpilen eller välj ett annat alternativ från menyn till vänster för att återgå till de huvudsakliga anpassningsinställningarna.

Välj sedan ‘Posts’.

Detta tar dig till en skärm med några olika alternativ.

Du kan gå igenom dessa inställningar och göra de ändringar du vill, men vi kommer att fokusera på 'Bildtext'.

Om dina Instagram-texter innehåller viktig information eller uppmaningar till handling, kanske du vill att texten i bildtexten ska sticka ut.

Du kanske till exempel vill göra den större eller använda en annan färg.

När det är klart, använd bakåtpilen eller välj ‘Posts’ från menyn till vänster för att gå tillbaka till föregående skärm.

Här ser du också ett alternativ för 'Svängläge', vilket är överlägget som Smash Balloon lägger till ett inlägg när du för muspekaren över det.

Detta gör att besökare snabbt kan se bildtexten och annan information som är associerad med ett inlägg när de för muspekaren över det.

På den här skärmen kan du använda inställningarna för att skapa en iögonfallande färgad överläggning.

Efter att ha valt 'Sv��verläge', kommer du att kunna ändra bakgrundsfärgen och textfärgen som visas när du sv��ver över varje inlägg.

Under 'Information att visa' ser du all den olika information som Smash Balloon kan visa som en del av överlägget. Markera helt enkelt rutan bredvid varje informationsdel som du vill visa.

Om du vill att dina Instagram-texter ska visas i svävarläget, se till att du lämnar ‘Caption’ aktiverat.

När du är nöjd med dina ändringar, använd bakåtpilen eller välj ett annat alternativ från menyn till vänster för att återgå till de huvudsakliga anpassningsinställningarna. Du kan nu välja nästa alternativ, som är ‘Load More Button.’

Som standard lägger Smash Balloon till en 'Ladda mer'-knapp längst ner i ditt Instagram-flöde så att besökare kan bläddra igenom dina köpbara inlägg.

Här kan du ändra knappens bakgrundsfärg, textfärg och hover-läge.

Du kan också lägga till ditt eget meddelande på knappen genom att skriva i fältet 'Text'.

Även om vi rekommenderar att lämna knappen ‘Load More’ aktiverad för att få fler försäljningar, kan du ta bort den.

Du kan till exempel uppmuntra folk att besöka din Instagram-sida genom att begränsa antalet foton de kan se på din online-marknadsplats eller butik.

För att ta bort knappen, klicka helt enkelt på ‘Enable’-reglaget för att ändra det från blått till grått.

Om shoppare gillar det de ser, kan de välja att följa dig på Instagram med knappen ‘Följ på Instagram’ som visas under flödet med köpbara objekt.

Eftersom det är en så viktig knapp, kanske du vill hjälpa den att sticka ut genom att välja 'Följknapp' från huvudskärmen för Smash Balloon-redigeraren.

Här kan du ändra knappens bakgrundsfärg, svävarläge och textfärg.

Du kan också ersätta standardtexten ‘Följ på Instagram’ med ditt eget meddelande.

Som alltid, när du är klar med dessa inställningar, använd bakåtpilen eller välj ett annat alternativ från menyn till vänster för att återgå till de huvudsakliga anpassningsinställningarna.

Om du har aktiverat Smash Balloons shoppningsbara funktion, kommer ett klick på ett inlägg i Instagram-flödet att öppna en ny flik och ta dem direkt till den länkade produktsidan.

Men om du inte har aktiverat den shoppningsbara funktionen, kanske du vill titta på Smash Balloons lightbox-funktion.

Den här funktionen låter besökare öppna bilden eller videon i ett ljuslådefönster utan att lämna din webbplats. De kan sedan se bilden eller videon tillsammans med dess bildtext och kommentarer.

För att aktivera eller inaktivera lightboxen, välj helt enkelt 'Lightbox' från menyn till vänster.

Här kan du ta bort eller lägga till den här funktionen med hjälp av reglaget 'Aktivera'.

Du kan också ändra hur många kommentarer Smash Balloon visar i ljuslådan. Liksom produktrecensioner kan positiva kommentarer hjälpa dig att sälja fler produkter och tjänster.

De kan dock också vara distraherande, så du kanske vill ange ett maximalt antal i rutan 'Antal kommentarer'.

Ett annat alternativ är att dölja kommentarer helt genom att klicka på 'Kommentarer'-omkopplaren.

När du är nöjd med hur Instagram-feeden ser ut, glöm inte att klicka på ‘Save’ för att spara dina ändringar. Du är nu redo att lägga till den shoppningsbara Instagram-feeden på din webbplats.

Steg 6: Bädda in ditt köpbara Instagram-flöde i WordPress

Du kan lägga till det köpbara flödet på din webbplats med hjälp av ett Gutenberg-block, en widget eller en kortkod.

Om du har skapat mer än en feed med Smash Balloon-pluginet, behöver du känna till feedens kod om du ska använda en widget eller ett block.

För att få den här koden, gå till Instagram Feed » Alla flöden och kopiera sedan värdet i kolumnen ‘Kortkod’.

Om du vill bädda in Instagram-flödet på en sida eller ett inlägg, rekommenderar vi att du använder Instagram Feed-blocket.

Öppna bara sidan eller inlägget där du vill bädda in ditt shoppable foto- och videoflöde. Klicka sedan på ikonen '+' för att lägga till ett nytt block och börja skriva 'Instagram Feed'.

När rätt block visas, klicka för att lägga till det på sidan eller inlägget.

Blocket visar som standard ett av dina Smash Balloon-flöden. Om du vill visa ett annat Instagram-flöde istället, leta reda på 'Kortkodinställningar' i menyn till höger.

Här lägger du helt enkelt till kortkoden och klickar sedan på 'Verkställ ändringar'.

Blocken kommer nu att visa alla foton och videor från din Instagram-feed. Publicera eller uppdatera bara sidan för att göra feeden live på din webbplats.

Ett annat alternativ är att lägga till flödet i ett widget-redo område, som sidofältet eller en liknande sektion. Detta gör att besökare kan handla med ditt Instagram-flöde från vilken sida som helst på din webbplats.

Gå helt enkelt till Utseende » Widgetar i din WordPress-instrumentpanel.

Om du använder ett blockaktiverat tema, klicka på den blå '+' -knappen, sök efter 'Instagram Feed' och välj blocket.

Dra den sedan till önskat widgetområde. Om du använder ett klassiskt tema, leta reda på 'Instagram Feed'-widgeten med den officiella Instagram-logotypen och dra den till din valda sidofält eller widgetområde.

Widgeten kommer automatiskt att visa en av de feeds du skapat med Smash Balloon. Om detta inte är den shoppningsbara Instagram-feeden du precis skapat, skriv då in feedens kod i rutan ‘Shortcode Settings’.

Klicka sedan på ‘Verkställ ändringar’.

Du kan nu göra widgeten live genom att klicka på knappen 'Uppdatera'. För mer information, se vår steg-för-steg-guide om hur man lägger till och använder widgets i WordPress.

Ett annat alternativ är att bädda in Instagram-flödet på valfri sida, inlägg eller widget-redo område med hjälp av en kortkod.

För hjälp med att placera kortkoden, se vår guide om hur man lägger till en kortkod.

Dessutom, om du använder ett block-aktiverat tema, kan du använda Full Site Editor för att lägga till Instagram Feed-blocket var som helst på din webbplats.

För mer information, se vår nybörjarguide för att använda WordPress Full Site Editing.

Vanliga frågor om köpbara Instagram-flöden

Här är några frågor som våra läsare ofta ställer om att lägga till shoppable Instagram-flöden.

1. Behöver jag ett Instagram Business-konto för att detta ska fungera?

Ja, du behöver en Instagram Business-profil som är ansluten till en Facebook-sida för att visa shoppable Instagram-flöden i WordPress. Detta är ett krav från Instagrams API för att komma åt produktmarkeringsfunktionerna som behövs för ett shoppable flöde.

2. Är Smash Balloon Instagram Feed-pluginet gratis?

Smash Balloon erbjuder en fantastisk gratisversion för att skapa standard Instagram-flöden. Möjligheten att skapa en köpbar feed är dock en premiumfunktion som finns i Pro-planerna.

3. Kommer ett shoppable Instagram-flöde att sakta ner min webbplats?

Detta är en giltig oro, men Smash Balloon är byggt med prestanda som högsta prioritet. Det använder ett smart cachningssystem som lagrar dina flödesdata, så det behöver inte fråga Instagram varje gång din sida laddas, vilket håller din webbplats snabb.

4. Vart leder de ”köpbara” länkarna mina kunder?

Länkarna i ditt shoppningsbara flöde tar kunderna direkt till produktsidorna på din egen webbplats. Detta skapar en smidig väg från inspiration till köp, håller hela upplevelsen på din webbplats och hjälper till att slutföra försäljningen.

5. Behöver jag en Facebook-företagssida för att ställa in shoppable Instagram-flöden på WordPress?

Ja, du behöver en Instagram Business-profil som är ansluten till en Facebook-sida för att visa shoppable Instagram-flöden i WordPress.

Detta är ett krav från Instagrams API för att Smash Balloon ska kunna komma åt all nödvändig data, som din profilbild och biografi, och för att säkerställa en tillförlitlig visning av flödet.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till Instagrams köpbara bilder i WordPress. Du kanske också vill se vår guide om hur du bäddar in TikTok-videor i WordPress eller se våra experttips om hur du tjänar pengar med AI.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.