Så här skapar du ett customize Instagram Photo Feed i WordPress

Ett Instagram-flöde kan hålla din webbplats fräsch och samtidigt ge dig fler likes, delningar och Instagram-följare. Det hjälper dig att få kontakt 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 med oss av engagerande innehåll och interagera med våra följare har vi kunnat öka varumärkeskännedomen och locka nya besökare.

I den här artikeln visar vi dig hur du enkelt skapar ett customize Instagram foto feed för din WordPress website.

Varför inkludera ett Instagram Feed på din WordPress site?

Genom att embedda ett Instagram feed på din WordPress site kan du visa färskt content 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 images i WordPress Block Editor kan du helt enkelt skapa ett feed som uppdateras automatiskt varje gång du lägger upp nya bilder på Instagram. Du kan även visa andras bilder på din site genom att skapa ett hashtag feed.

I Följer image kan du se ett exempel på ett varumärke som använder ett customized Instagram feed för att visa användargenererat content.

På detta sätt kan du använda ett anpassat Instagram feed för att ge värdefullt socialt bevis och tjäna mer pengar online.

Med detta sagt, låt oss se hur du kan skapa en custom Instagram foto feed i WordPress.

Så här skapar du ett customize Instagram Photo Feed i WordPress

Det enklaste sättet att add to ett Instagram foto feed till din site är genom att använda Smash Balloon Instagram Feed plugin. Det är det bästa Instagram-pluginet för WordPress som allow you to display content from your Instagram account in an omedelbar.

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

Vi kommer att täcka flera steg i vår tutorial, och du kan använda snabblänkarna under för att hoppa till de olika avsnitten:

Videohandledning

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner kan du fortsätta läsa.

Så här ansluter du ett Instagram account till WordPress

Först måste du installera och aktivera plugin-programmet Smash Balloon Instagram Feed. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering, head över till Instagram Feed ” Settings page från WordPress dashboard

Efter det, enter your Smash Balloon license key i fältet ”License Key”.

Du hittar den här informationen i det bekräftelsemail du fick när du köpte Smash Balloon och även i ditt Smash Balloon account.

När du har gjort det, fortsätt och klicka på knappen ”Activate”.

Du är nu redo att skapa ett custom Instagram feed. För att komma igång väljer du Instagram Feed ” All Feeds och klickar sedan på knappen ”Add New”.

Smash Balloon visar nu alla de olika typerna av Instagram feeds som du kan skapa.

Välj bara vilken typ av feed du vill add to WordPress och klicka på ”Next”.

Om du bara vill visa dina Instagram-foton kan du använda ett Personal Instagram-konto. Du behöver dock ett Business Instagram-konto om du vill skapa ett hashtag feed eller visa de post som ditt konto är taggat i.

Om du väljer ”Publicera hashtag” måste du skriva in de hashtags du vill använda. Om du vill visa flera hashtags i samma feed separerar du helt enkelt varje hashtag med ett kommatecken.

När du har gjort det klickar du bara på ”Next”.

Vill du visa posts som ditt account är taggat i? Då måste du selecta ”Tagged Posts” istället och sedan clicka på ”Next”.

Oavsett vilken typ av feed du skapar måste du ansluta WordPress till ditt Instagram-konto.

För att komma igång klickar du på knappen ”Add Source”.

Därefter väljer du om du vill visa images från ett personal account eller business account.

Om du väljer knappen bredvid ”Personal”, kommer Smash Balloon inte att inkludera Instagram-avataren och bio i din header som standard. Du kan dock alltid add to Instagram-avataren och bio manuellt i pluginets inställningar.

När du har valt mellan ett Business account och ett Personal account klickar du bara på ”Login with Facebook”.

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

Därefter kontrollerar du boxen bredvid den Facebook page som är linkad till det Instagram account du vill använda.

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

Du kommer nu att se en popup med all information Instagram Feed Pro kommer att ha tillgång till och de handlingar den kan utföra.

För att begränsa pluginets åtkomst till ditt Instagram account, klicka bara på någon av brytarna för att vrida den från ”Ja” till ”Nej”. Tänk bara på att detta kan påverka de foton som visas på din blogg eller website i WordPress.

Med detta i åtanke rekommenderar vi att du låter alla omkopplare vara aktiverade. När you är nöjd med hur feeden är konfigurerad, fortsätt och click på ”Done”.

Du kommer nu att se en popup med Instagram-kontot som du just har lagt till på din website.

Kontrollera bara boxen bredvid det kontot och klicka sedan på ”Add”.

Instagram Feed Pro kommer nu att ta dig tillbaka till Instagram Feeds ” All Feeds vy.

För att skapa ett anpassat Instagram feed, markera bara boxen bredvid det Instagram account som du vill använda. Sedan klickar du på ”Nästa”.

Pluginet kommer nu att skapa ett Instagram foto feed som du kan add to någon page, post, eller widget-ready area.

Hur du customize ditt Instagram Photo Feed

Som standard öppnar Smash Balloon ditt feed i sin editor, redo för dig att customize.

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

De flesta av dessa Settings är självförklarande, men vi ska snabbt gå igenom några viktiga areas.

För att ändra layouten klickar du bara på ”Feed Layout” i menyn till vänster. Du kan nu välja mellan en Grid-, Masonry- eller Carousel-layout.

Det finns också en layout med markerad bild som markerar var tredje bild som standard.

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

Som standard visar Smash Balloon samma antal foton på stationära datorer och mobila enheter. Du kan previewa hur Instagram feed 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 vyer och mindre processorkraft, så du kanske vill visa färre Instagram-foton och videoklipp på mobila enheter.

För att göra detta skriver du bara in ett annat nummer i fältet ”Mobile” under ”Number of Posts”.

Som standard kommer Smash Ballon att dela upp dina foton i 4 kolumner på skrivbordet, 2 kolumner på surfplattor och en enda kolumn på mobilen.

Vill du använda ett annat antal Column? Då är det bara att rulla till sectionen ”Columns” i menyn till vänster.

You kan nu skriva in ett new nummer i fälten för Desktop, Tablet eller Mobile.

För att se till att ditt Instagram feed ser bra ut på mobila enheter är det smart att view den mobila versionen av din WordPress website.

När du har gjort dina ändringar klickar du på länken ’Customize’. Detta kommer att ta dig tillbaka till huvud Smash Balloon editor, redo för dig att utforska nästa inställningar vy, som är ”Färgschema”.

Som standard använder Smash Balloon ett färgschema som ärvs från ditt WordPress-tema, men det har också ”Light” och ”Dark” teman som du kanske vill använda för ditt Instagram feed.

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

Som standard lägger Smash Balloon till en header i Instagram feed, som är din profilbild och namnet på din page. Detta kan ge lite användbart extra sammanhang så att visitorerna förstår var dessa images kommer ifrån.

Om du vill ändra utseendet på denna section går du tillbaka till vyn för huvudinställningar och väljer ”Header”.

På den här vyn kan du ändra bakgrundsfärgen, visa din Instagram bio, ändra storleken på headern och mer.

Som standard innehåller headern din profilbild på Instagram. Men du kanske vill visa en annan image, till exempel din sites custom logo.

För att ändra profilbilden klickar du på ”Add Image” under ”Show custom avatar”. Då kan du antingen välja en image från mediabiblioteket i WordPress eller uppladare en new image.

Du kan också add to en annan bio. Till exempel kan du lägga till en call-to-action som uppmuntrar människor att besöka din Instagram page.

För att skapa en unik Instagram bio, skriv bara in i ”Add custom bio” boxen.

När du är nöjd med hur headern ser ut klickar du på länken ”Customize” för att gå tillbaka till vyn med huvudinställningarna.

Nu måste du klicka på ”Posts”.

Till att börja med kan du växla mellan boxade och vanliga layouts för de enskilda posterna i Instagram feed.

För att göra detta, välj ”Post Style”.

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

Om du väljer ”Boxed” kan du ändra bakgrundsfärgen, add to en boxskugga och öka kantradiusen för att skapa böjda hörn.

När du är nöjd med dina ändringar klickar du bara på länken ”Posts” för att återgå till föregående inlägg på Smash Balloon vy.

Den här gången väljer du ”Images and Videos”.

Smash Balloon analyserar automatiskt dina Instagram-foton och visar dem i bästa möjliga upplösning. Vi rekommenderar att du använder standardinställningarna, eftersom de är utformade för att öka hastigheten och prestandan i WordPress. Du kan dock göra bilderna på Instagram större eller mindre om du behöver.

För att ändra storleken på bilden öppnar du dropdown-rutan ”Resolution” och väljer en av standardstorlekarna för WordPress-bilder från listan.

Klicka återigen på länken ”Posts” för att återgå till föregående inlägg.

Den här gången väljer du ”Caption”. På nästa vy kan du visa Instagram caption bredvid varje image genom att clicka på slidern ”Enable”.

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

När du har gjort det klickar du bara på länken ”Posts” för att återgå till föregående inlägg.

Nästa inställning är ”Like and Comment Summary”.

Här kan du lägga till eller dölja det totala antalet likes och comments på varje image. Om dina Instagram-poster får ett stort engagemang kan dessa siffror uppmuntra människor att besöka din Instagram page eller börja följa dig på social media.

Som alltid måste du clicka på ’Posts’ för att komma tillbaka till den tidigare vyn.

Det sista alternativet är ”Hover State”, som är det överlägg som Smash Balloon add till en post när du håller musen över den.

Här kan du välja vilken information som Smash Balloon ska displayed när någon hoverar över ett post med hjälp av settings under ”Information to display”.

Du kan också ändra färgen på överlägget för hover.

När du är nöjd med de ändringar du har gjort klickar du på länken ”Customize”.

Detta tar dig tillbaka till huvudsidan för Smash Balloon-inställningar, där du kan clicka på tabben ”Load More Button”.

Här kan du hjälpa knappen ”Ladda mer” att sticka ut genom att ändra bakgrundsfärg, textfärg och hover-tillstånd.

Du kan också försöka lägga till dina egna meddelanden på knappen genom att skriva i fältet ”Text”.

Vi rekommenderar att du låter knappen vara aktiverad, men du kan också ta bort den. Du kan till exempel uppmuntra folk att besöka din Instagram genom att limitera antalet foton de kan se på din site.

För att remove knappen är det bara att toggle bort slidern ”Enable” så att den blir grå.

Om besökarna gillar vad de ser kan de välja att prenumerera med hjälp av knappen ”Följ på Instagram” som visas under det inbäddade feedet.

Eftersom det är en så viktig knapp kanske du vill add to lite custom styling för att hjälpa den att sticka ut. För att göra detta, välj ”Customize” för att återgå till huvudinställningarna på vyn. Välj sedan ”Följ knapp” i menyn till vänster.

Här kan du ändra knappens bakgrundsfärg, hovering och textfärg.

Som standard visar knappen en etikett med texten ”Följ på Instagram”.

You can replace this with your own message by typing into the ”Text” field.

Smash Balloon levereras med en built-in lightbox som allow visitors to open your Instagram photos and videos without leaving your website.

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

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

Om du inte vill använda funktionen lightbox kan du inaktivera den med hjälp av slidern ”Enable”.

När du är nöjd med hur ditt Instagram feed ser ut, glöm inte att clicka på ”Save” för att store dina ändringar.

Nu är du redo att add to Instagram feed till din WordPress website.

Visa ett feed av dina Instagram-foton i WordPress

Du kan add to det custom Instagram feed till din website med hjälp av ett block, en widget eller en shortcode.

Om du har skapat mer än ett feed med Smash Balloon måste du känna till feedens kod för att kunna använda ett widget eller block.

För att få den här koden måste du gå till Instagram Feed ” All Feeds och sedan kopiera texten under ’Shortcode’.

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

Om du vill embedda Instagram feed på en page eller post kan du använda Instagram Feed block.

Öppna bara den page eller det post där du vill embedda ditt customze Instagram feed. 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 klickar du på det för att add to sidan eller posten.

Blocket kommer att visa ett av dina Instagram feeds som standard. Om du vill visa ett annat Smash Balloon feed hittar du ”Shortcode Settings” i den högra menyn.

Här lägger du bara till shortcoden och klickar sedan på ”Tillämpa Changes”.

Om du är nöjd med hur det anpassade Instagram feed ser ut, kan du gå vidare och publicera eller uppdatera sidan.

Ett annat alternativ är att add to Instagram Feed widget till din website. Detta är ett bra sätt att visa ett Instagram feed på varje page på din site. Du kan till exempel add to Instagram-widgeten till WordPress temats sidebar eller footer.

För att add the Instagram Feed widget to your site, head over to Appearance ” Widgets. You can then click on the blue ’+’ icon towards the top of the screen.

I panelen som visas skriver du in ”Instagram Feed” för att hitta rätt widget.

Som du kan se i följande image finns det två Instagram Feed widgets, så se till att du använder rätt.

Därefter drar du helt enkelt widgeten till det area där du vill visa Instagram feed, till exempel sidebar eller liknande section.

Widgeten visar automatiskt ett av de feeds som du skapade med Smash Balloon. Om detta inte är det anpassade Instagram feed som du just skapade, skriv in feedens kod i boxen ”Shortcode Settings”.

Därefter klickar du på ”Tillämpa Changes”.

Du kan nu göra widgeten live genom att clicka på knappen ”Update”. För mer information, vänligen se vår Step-by-Step guide om hur du lägger till och använder widgetar i WordPress.

Ett annat alternativ är att bädda in Instagram feed på alla sidor, post eller widget-klara area med hjälp av en shortcode.

Gå bara till Instagram Feed ” All Feeds och kopiera koden i kolumnen ’Shortcode’. Du kan nu add to denna kod till alla Shortcode block. För hjälp med att placera shortcode, vänligen se vår guide om hur man lägger till en shortcode.

Använder du ett aktiverat block theme? Då kan du använda hela Site Editor för att add to Instagram Feed-blocket var som helst på din WordPress website.

I adminpanelen går du till Appearance ” Editor.

Som standard kommer hela Site Editor att visa temats hemmamall.

Om du vill lägga till Instagram feed i ett annat area, clickar du på antingen ”Template” eller ”Template Parts”.

Editorn visar nu en lista över alla templates som ingår i ditt WordPress Theme.

Klicka bara på den template där du vill visa Instagram feed.

WordPress kommer nu att visa en preview av designen.

För att edit denna template, gå vidare och click på den lilla penna iconen.

När du har valt en template håller du bara muspekaren över det area där du vill lägga till Instagram photo feed.

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

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

När rätt block appear, click to add it to the template.

Som alltid kommer Smash Balloon att visa ett feed som standard. Du kan ändra detta feed genom att lägga till en shortcode som följer samma process som beskrivs ovan.

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

Om du har en onlinebutik kan du också använda ditt anpassade Instagram feed för att enkelt sälja dina produkter.

Smash Balloon Instagram Feed Pro allow you to tag your Instagram images with product links so that users are able to click on them and buy them directly instead of navigating through your product pages. Detta kan öka försäljningen och öka vinsten i din store.

För mer detaljer kan du se vår kompletta guide om hur du lägger till Instagram Shoppable images 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-giveaway i WordPress för att öka engagemanget och vår lista över statistik för sociala medier för nybörjare.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.