Hur man skapar ett anpassat Instagram-fotoflöde i WordPress

Ett Instagram-flöde kan hålla din webbplats fräsch samtidigt som du får fler gillamarkeringar, delningar och Instagram-följare. Det hjälper dig att koppla samman med din publik på flera plattformar och ökar engagemanget.

Sociala medier har varit avgörande för att driva trafik till vår webbplats och utöka vår publik. Genom att dela engagerande innehåll och interagera med våra följare har vi kunnat öka varumärkeskännedomen och attrahera nya besökare.

I den här artikeln visar vi hur du enkelt skapar ett anpassat Instagram-fotoflöde för din WordPress-webbplats.

Varför inkludera ett Instagram-flöde på din WordPress-webbplats?

Att bädda in ett Instagram-flöde på din WordPress-webbplats låter dig visa nytt innehåll för dina besökare utan mycket extra arbete. Det uppmuntrar också läsare att följa dig på Instagram.

Istället för att manuellt lägga till bilder i WordPress blockredigerare, kan du helt enkelt skapa ett flöde som uppdateras automatiskt varje gång du lägger upp nya foton på Instagram. Du kan till och med visa andras foton på din webbplats genom att skapa ett hashtag-flöde.

I följande bild kan du se ett exempel på ett varumärke som använder ett anpassat Instagram-flöde för att visa användargenererat innehåll.

På så sätt kan du använda ett anpassat Instagram-flöde för att ge värdefull social bevisning och tjäna mer pengar online.

Med det sagt, låt oss se hur du kan skapa ett anpassat Instagram-flöde med foton i WordPress.

Hur man skapar ett anpassat Instagram-fotoflöde i WordPress

Det enklaste sättet att lägga till ett Instagram-flöde med foton på din webbplats är att använda pluginet Smash Balloon Instagram Feed. Det är det bästa Instagram-pluginet för WordPress som gör att du omedelbart kan visa innehåll från ditt Instagram-konto.

Det är också det enklaste sättet att fixa Facebook- och Instagram-oEmbed-problemet i WordPress.

Vi kommer att gå igenom flera steg i vår handledning, och du kan använda snabblänkarna nedan för att hoppa till de olika sektionerna:

• Hur man kopplar ett Instagram-konto till WordPress
• Hur du anpassar ditt Instagram-fotoflöde
• Visa ett flöde av dina Instagram-foton i WordPress
• Bonus: Låt kunder köpa dina produkter via Instagram

Videohandledning

Prenumerera på WPBeginner

Om du föredrar skriftliga instruktioner, fortsätt läsa.

Hur man kopplar ett Instagram-konto till WordPress

Först måste du installera och aktivera pluginet Smash Balloon Instagram Feed. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan Instagram Feed » Inställningar från WordPress-instrumentpanelen

Ange därefter din Smash Balloon-licensnyckel i fältet 'Licensnyckel'.

Du hittar denna information i bekräftelsemejlet du fick när du köpte Smash Balloon och även i ditt Smash Balloon-konto.

När du har gjort det, klicka på knappen 'Aktivera'.

Du är nu redo att skapa ett anpassat Instagram-flöde. För att komma igång, välj Instagram Feed » All Feeds och klicka sedan på knappen 'Add New'.

Smash Balloon kommer nu att visa alla olika typer av Instagram-flöden som du kan skapa.

Välj helt enkelt vilken typ av flöde du vill lägga till i WordPress och klicka på 'Nästa'.

Om du bara vill visa dina Instagram-foton kan du använda ett personligt Instagram-konto. Du behöver dock ett företagskonto på Instagram om du vill skapa ett hashtag-flöde eller visa inlägg som ditt konto är taggat i.

Om du väljer ‘Publicera hashtag’ måste du skriva in de hashtags du vill använda. För att visa flera hashtags i samma flöde, separera varje hashtag med ett kommatecken.

När du har gjort det, klicka bara på 'Nästa'.

Vill du visa inlägg som ditt konto är taggat i? Du måste välja ‘Taggade inlägg’ istället och sedan klicka på ‘Nästa’.

Oavsett vilken typ av flöde du skapar, måste du ansluta WordPress till ditt Instagram-konto.

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

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

Om du väljer knappen bredvid 'Personlig', kommer Smash Balloon inte att inkludera Instagram-avatar och bio i din rubrik som standard. Du kan dock alltid lägga till Instagram-avatar och bio manuellt i plugin-inställningarna.

När du har valt mellan ett företagskonto och ett personligt konto, klickar du bara på 'Logga in med Facebook'.

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

Kontrollera sedan rutan bredvid Facebook-sidan som är kopplad till det Instagram-konto du vill använda.

När det är gjort måste du klicka på knappen 'Nästa'.

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 dem från ‘Ja’ till ‘Nej’. Var bara medveten om att detta kan påverka de foton som visas på din WordPress-blogg eller webbplats.

Med det i åtanke rekommenderar vi att du lämnar alla omkopplare aktiverade. När du är nöjd med hur flödet är inställt, klicka på ‘Klar’.

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

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

Instagram Feed Pro kommer nu att ta dig tillbaka till skärmen Instagram Feeds » Alla flöden.

För att skapa ett anpassat Instagram-flöde, markera bara rutan bredvid det Instagram-konto du vill använda. Klicka sedan på 'Next'.

Pluginet kommer nu att skapa ett Instagram-flöde med foton som du kan lägga till på vilken sida, inlägg eller widget-redo område som helst.

Hur du anpassar ditt Instagram-fotoflöde

Som standard öppnar Smash Balloon ditt flöde i dess redigerare, redo för dig att anpassa.

Till höger ser du en förhandsgranskning av ditt Instagram-fotoflöde. På vänster sida finns alla inställningar du kan använda för att anpassa flödet för sociala medier.

De flesta av dessa inställningar är självförklarande, men vi kommer snabbt att gå igenom några viktiga områden.

För att ändra layouten, klicka helt enkelt på 'Feed Layout' i menyn till vänster. Du kan nu välja mellan en rutnät-, tegel- eller karusellayout.

Det finns också en 'Framhävd' layout som framhäver var tredje bild som standard.

När du klickar på de olika alternativen kommer förhandsgranskningen i realtid automatiskt att uppdateras för att visa den nya layouten. Detta gör det enkelt att prova olika designer och hitta den du föredrar.

Som standard visar Smash Balloon samma antal foton på stationära datorer och mobila enheter. Du kan förhandsgranska hur Instagram-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.

Smartphones och surfplattor har vanligtvis mindre skärmar och mindre processorkraft, så du kanske vill visa färre Instagram-foton och videor på mobila enheter.

För att göra detta, skriv bara ett annat nummer i fältet 'Mobil' under 'Antal inlägg'.

Som standard delar Smash Ballon upp dina foton i 4 kolumner på datorer, 2 kolumner på surfplattor och en enda kolumn på mobiler.

Vill du använda ett annat antal kolumner? Skrolla då bara till sektionen 'Kolumner' i menyn till vänster.

Du kan nu skriva ett nytt nummer i fälten Dator, Surfplatta eller Mobil.

För att säkerställa att ditt Instagram-flöde ser bra ut på mobila enheter är det smart att visa mobilversionen av din WordPress-webbplats.

Efter att ha gjort dina ändringar klickar du på länken 'Anpassa'. Detta tar dig tillbaka till huvudredigeraren för Smash Balloon, redo för dig att utforska nästa inställningsskärm, som är 'Färgtema'.

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

Du kan till och med skapa ditt eget färgschema genom att välja 'Anpassad' och sedan använda inställningarna för att ändra länkfärg, bakgrundsfärg, textfärg och mer.

Som standard lägger Smash Balloon till en rubrik till Instagram-flödet, vilket är din profilbild och namnet på din sida. Detta kan ge lite användbar extra kontext så att besökare förstår var bilderna kommer ifrån.

För att ändra hur den här sektionen ser ut, gå tillbaka till huvudinställningsskärmen och välj sedan 'Rubrik'.

På den här skärmen kan du ändra bakgrundsfärgen, visa din Instagram-bio, ändra rubrikstorlek och mer.

Som standard inkluderar sidhuvudet din Instagram-profilbild. Du kanske dock vill visa en annan bild, till exempel din webbplats anpassade logotyp.

För att ändra profilbilden, klicka på 'Lägg till bild' under 'Visa anpassad avatar'. Du kan sedan antingen välja en bild från WordPress mediebibliotek eller ladda upp ett nytt foto.

Du kan också lägga till en annan bio. Till exempel kan du lägga till en uppmaning till handling som uppmuntrar folk att besöka din Instagram-sida.

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

När du är nöjd med hur rubriken ser ut, klicka på länken 'Anpassa' för att gå tillbaka till huvudinställningsskärmen.

Nu behöver du klicka på 'Inlägg'.

Som ett första steg kan du växla mellan inramade och vanliga layouter för de enskilda inläggen i Instagram-flödet.

För att göra detta, välj 'Inläggsstil'.

Du kan nu klicka för att välja den layout du vill använda.

Om du väljer 'Boxed' kan du ändra bakgrundsfärgen, lägga till en skugga, och öka kantradien för att skapa rundade hörn.

När du är nöjd med dina ändringar, klickar du bara på länken 'Posts' för att återgå till den föregående Smash Balloon-skärmen.

Välj den här gången 'Bilder och videor'.

Smash Balloon analyserar automatiskt dina Instagram-foton och visar dem i bästa upplösning. Vi rekommenderar att du använder dessa standardinställningar, eftersom de är utformade för att öka din WordPress-hastighet och prestanda. Du kan dock göra Instagram-bilderna större eller mindre om du behöver det.

För att ändra bildstorlek, öppna helt enkelt rullgardinsmenyn 'Upplösning' och välj en av standardstorlekarna för WordPress-bilder från listan.

Klicka igen på länken 'Inlägg' för att återgå till föregående skärm.

Välj den här gången ‘Bildtext’. På nästa skärm kan du visa Instagram-bildtexten bredvid varje bild genom att klicka på reglaget ‘Aktivera’.

Detta öppnar några nya anpassningsalternativ där du kan ändra textstorlek och färg samt ställa in en maximal textlängd.

När det är gjort, klicka bara på länken 'Inlägg' för att återgå till föregående skärm.

Nästa inställning är 'Gilla- och kommentarssammanfattning'.

Här kan du lägga till eller dölja det totala antalet gillamarkeringar och kommentarer på varje bild. Om dina Instagram-inlägg får mycket engagemang, kan dessa siffror uppmuntra folk att besöka din Instagram-sida eller börja följa dig på sociala medier.

Som alltid måste du klicka på ‘Inlägg’ för att återgå till den tidigare skärmen.

Det sista alternativet är 'Hover State', vilket är överlägget som Smash Balloon lägger till ett inlägg när du för muspekaren över det.

Här kan du välja vilken information som Smash Balloon visar när någon hovrar över ett inlägg med hjälp av inställningarna under 'Information att visa'.

Du kan också ändra färgen på överlägget vid hovring.

När du är nöjd med de ändringar du har gjort, klickar du på länken 'Anpassa'.

Detta tar dig tillbaka till huvudinställningssidan för Smash Balloon, där du kan klicka på fliken ‘Ladda mer knapp’.

Här kan du hjälpa knappen 'Ladda mer' att sticka ut genom att ändra dess bakgrundsfärg, textfärg och hover-läge.

Du kan också försöka lägga till din egen text till knappen genom att skriva i fältet 'Text'.

Även om vi rekommenderar att du lämnar den här knappen aktiverad, kan du ta bort den. Du kan till exempel uppmuntra folk att besöka ditt Instagram genom att begränsa antalet foton de kan se på din webbplats.

För att ta bort knappen, stäng helt enkelt av reglaget 'Enable' så att det blir grått.

Om besökare gillar det de ser, kan de bestämma sig för att prenumerera med knappen 'Följ på Instagram' som visas under det inbäddade flödet.

Eftersom det är en så viktig knapp, kanske du vill lägga till lite anpassad styling för att hjälpa den att sticka ut. För att göra detta, välj 'Anpassa' för att återgå till huvudinställningsskärmen. Välj sedan 'Följ-knapp' i menyn till vänster.

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

Som standard visar knappen texten 'Följ på Instagram'.

Du kan ersätta detta med ditt eget meddelande genom att skriva i fältet 'Text'.

Smash Balloon levereras med en inbyggd lightbox som gör det möjligt för besökare att öppna dina Instagram-foton och videor utan att lämna din webbplats.

För att konfigurera den här funktionen, gå tillbaka till huvudinställningsskärmen för Smash Balloon och klicka sedan på 'Lightbox'.

Här kan du ändra hur många kommentarer Smash Balloon ska visa i lightboxen.

Om du inte vill använda lightbox-funktionen kan du inaktivera den med hjälp av 'Aktivera'-reglaget.

När du är nöjd med hur Instagram-flödet ser ut, glöm inte att klicka på 'Spara' för att lagra dina ändringar.

Du är nu redo att lägga till Instagram-flödet på din WordPress-webbplats.

Visa ett flöde av dina Instagram-foton i WordPress

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

Om du har skapat mer än ett flöde med Smash Balloon, behöver du känna till flödets kod för att använda en widget eller ett block.

För att få den här koden måste du gå till Instagram Feed » Alla flöden och sedan kopiera texten under 'Kortkod'.

I följande bild måste vi använda instagram-feed feed=4.

Om du vill bädda in Instagram-flödet på en sida eller ett inlägg kan du använda Instagram Feed-blocket.

Öppna bara sidan eller inlägget där du vill bädda in ditt anpassade Instagram-flö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.

Blocken visar ett av dina Instagram-flöden som standard. Om du vill visa ett annat Smash Balloon-flöde, leta då 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'.

Om du är nöjd med hur det anpassade Instagram-flödet ser ut, kan du fortsätta och publicera eller uppdatera sidan.

Ett annat alternativ är att lägga till Instagram Feed-widgeten på din webbplats. Detta är ett utmärkt sätt att visa ett Instagram-flöde på varje sida av din webbplats. Du kan till exempel lägga till Instagram-widgeten i WordPress-temats sidofält eller sidfot.

För att lägga till Instagram Feed-widgeten på din webbplats, gå till Utseende » Widgetar. Du kan sedan klicka på den blå '+' ikonen högst upp på skärmen.

I panelen som visas, skriv 'Instagram Feed' för att hitta rätt widget.

Som du kan se på följande bild finns det två Instagram-flödeswidgets, så se till att du använder rätt.

Dra sedan helt enkelt widgeten till det område där du vill visa Instagram-flödet, till exempel sidofältet eller en liknande sektion.

Widgeten visar automatiskt ett av de flöden du skapat med Smash Balloon. Om detta inte är det anpassade Instagram-flödet du precis skapat, skriv då in flödets kod i rutan 'Kortkodinställningar'.

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.

Gå helt enkelt till Instagram Feed » All Feeds och kopiera koden i kolumnen 'Shortcode'. Du kan nu lägga till denna kod i valfritt Shortcode-block. För hjälp med att placera kortkoden, se vår guide om hur man lägger till en kortkod.

Använder du ett blockaktiverat tema? Då kan du använda redigeraren för hela webbplatsen för att lägga till Instagram-flödesblocket var som helst på din WordPress-webbplats.

Gå i instrumentpanelen till Utseende » Redigerare.

Som standard visar fullständig webbplatsredigerare mallen för webbplatsens startsida.

Om du vill lägga till Instagram-flödet i ett annat område, klicka på antingen 'Mall' eller 'Mall-delar'.

Redigeraren kommer nu att visa en lista över alla mallkomponenter som utgör ditt WordPress-tema.

Klicka helt enkelt på mallen där du vill visa Instagram-flödet.

WordPress kommer nu att visa en förhandsgranskning av designen.

För att redigera den här mallen, klicka på den lilla pennikonen.

Efter att ha valt en mall, för bara muspekaren över området där du vill lägga till Instagram-foto-flödet.

Klicka sedan på den blå knappen '+'.

När du har gjort det måste du skriva in 'Instagram Feed'.

När rätt block visas, klicka för att lägga till det i mallen.

Som alltid kommer Smash Balloon att visa ett flöde som standard. Du kan ändra detta flöde genom att lägga till en kortkod enligt samma process som beskrivs ovan.

Bonus: Låt kunder köpa dina produkter via Instagram

Om du har en webbutik, kan du också använda ditt anpassade Instagram-flöde för att enkelt sälja dina produkter.

Smash Balloon Instagram Feed Pro låter dig tagga dina Instagram-bilder med produktlänkar så att användare kan klicka på dem och köpa dem direkt istället för att navigera genom dina produktsidor. Detta kan öka försäljningen och vinsten i din butik.

För mer information kan du se vår kompletta guide om hur man lägger till Instagrams köpbara bilder i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett anpassat Instagram-flöde i WordPress. Du kanske också vill lära dig hur du lägger till en Facebook-tävling i WordPress för att öka engagemanget och vår lista över statistik för sociala medier för nybörjare.

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