Så här visar du foton från Instagram i widgetar i sidebar i WordPress

Vill du kunna displayed dina Instagram-foton i sidebaren i WordPress?

Instagram-poster kan ge bra content för din website. Genom att skapa ett Instagram feed kan du hålla din site fräsch och intressant samtidigt som du främjar ditt Instagram account.

I den här artikeln kommer vi att visa you hur du visar dina Instagram-foton och videoklipp i widgeten WordPress sidebar.

Varför add to en Instagram Feed till din WordPress site?

Enligt vår forskning om marknadsföringsstatistik har Instagram över 2 miljarder aktiva användare varje månad. Det betyder att det är ett bra ställe att främja dina produkter, tjänster och blogginlägg.

Beroende på din bransch kan Instagram till och med vara den bästa platsen för att främja din website. Instagram är till exempel viss popularitet bland bloggar om mode, matlagning, livsstil och fotografering.

Men folk kommer inte att se dina Instagram-poster om de bara besöker din WordPress-webbplats. Detta kan göra det svårt att öka antalet följare på Instagram och få engagement på dina foton och videoklipp.

Med detta sagt är det en bra idé att add to ett Instagram feed till din WordPress website. Detta kommer att få mer trafik till din Instagram page och uppmuntra besökare att interagera med dina posts genom att lämna kommentarer, klicka på ”Dela”-knappen, och mer.

Med detta sagt, låt oss ta en titt på hur du enkelt kan displayed Instagram foton i WordPress sidebar widget.

Så här installerar du ett tillägg för Instagram Photos

Det bästa sättet att visa Instagram-foton i en WordPress sidebar eller liknande widget är genom att använda Smash Balloon Social Photo Feed. Detta gratis plugin låter dig visa foton från ett eller flera Instagram accounts i ett helt anpassningsbart feed.

När du har skapat ett feed kan du add to sidebaren med hjälp av antingen en shortcode eller ett block.

När du har placerat feeden på din webbplats uppdateras den automatiskt varje gång du gör ett nytt Instagram-post. På så sätt kan du hålla din site fräsch och intressant utan att behöva updating den manuellt.

I den här guiden kommer vi att använda den gratis versionen av Smash Balloon, eftersom den har allt du behöver för att embeda ett Instagram feed. Men det finns också en Pro-version som allow you to display hashtag feeds, add Instagram shoppable images in WordPress, and more.

Innan du börjar måste du ansluta ditt Instagram-konto till en Facebook-sida. Om du har ett personligt Instagram-konto kanske du också vill göra det till ett business account, eftersom detta tillåter Smash Balloon att visa din Instagram bio och header automatiskt.

För Step-by-Step instruktioner om hur man gör båda dessa saker, kontrollera våra Vanliga frågor i slutet av posten.

När du är redo, gå vidare och installera och aktivera Smash Balloon Social Photo Feed plugin. För mer detaljer, se vår guide om hur man installerar ett plugin för WordPress.

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

När du har aktiverat pluginet är det dags att ansluta ditt Instagram account till WordPress. Gå bara till Instagram Feed ” Settings och klicka sedan på ’Add New’.

Med Smash Balloon Pro kan du skapa feeds från taggade posts och hashtags eller till och med skapa en social vägg genom att kombinera content från många olika websites.

Du kan till exempel visa de senaste videoklippen från din YouTube-kanal, dina senaste Tweets, ett gruppflöde från Facebook med mera.

Eftersom vi använder det gratis Smash Balloon-tillägget, väljer du helt enkelt ”User Timeline” och klickar sedan på ”Next”.

Efter det måste du välja det Instagram-konto som du ska använda för att skapa ett customize Instagram foto feed i WordPress.

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

På nästa vy väljer du om du vill visa foton från ett personligt eller ett business Instagram account.

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

När du har valt ”Personal” eller ”Business” går du vidare och klickar på ”Login with Facebook”.

Du kan nu kontrollera det Instagram-konto som du vill använda och klicka på ”Nästa”.

Därefter kontrollerar du boxen bredvid Facebook-sidan som är länkad till ditt Instagram-konto.

När det är gjort, fortsätt och klicka på ”Nästa”.

Smash Balloon kommer nu att visa en popup med all information som den har tillgång till och de actions den kan utföra.

För att begränsa Smash Balloons tillgång till ditt Instagram account, click any of the switches to turn it from ”Yes” to ”No”. Tänk bara på att detta kan påverka de foton och videoklipp som du kan embeda på din blogg eller website i WordPress.

Med detta sagt rekommenderar vi att du låter alla switchar vara aktiverade.

När du är klar klickar du på ”Done”.

Du kommer nu att se en popup med det Instagram account som du just länkade till WordPress.

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

Smash Balloon kommer nu att ta dig tillbaka till Instagram Feeds ” All Feeds automatiskt.

För att skapa ett feed för sociala medier, kontrollera bara boxen bredvid ditt Instagram-konto. Sedan klickar du på ”Nästa”.

Pluginet kommer nu att skapa ett Instagram foto feed för din website och öppna det i Smash Balloon editor.

Hur du customize ditt Instagram Photo Feed

Du kan använda Editorn för att finjustera hur Instagram-foton ser ut på din website.

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

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

Till att börja med kan du ändra feed-layouten och add to padding genom att välja ”Feed Layout” i menyn till vänster. När du gör ändringar uppdateras previewen automatiskt, så du kan prova olika inställningar för att se vad som fungerar bäst för ditt Instagram fotoflöde.

Som standard visar Smash Balloon samma antal posts 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. Genom att testa olika layouts kan du skapa ett Instagram feed som ser bra ut, oavsett vilken device besökaren använder.

Smartphones och surfplattor har vanligtvis mindre vyer och mindre processorkraft, så du kanske vill visa färre foton och videoklipp på mobila enheter.

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

Som standard visar Facebook Feed färre Column på smartphones och surfplattor jämfört med stationära datorer. Detta hjälper dina foton och videoklipp att passa bekvämt på mindre vyer.

När du har testat den mobila versionen av din website i WordPress kanske du inte är nöjd med hur Column ser ut på smartphones och surfplattor. Om så är fallet kan du visa färre kolumner genom att ändra siffrorna i section ”Columns”.

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

Detta kommer att ta dig tillbaka till huvud Smash Balloon editor, där du kan utforska nästa vy för inställningar, 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 kan använda.

Ett annat alternativ är att skapa ditt eget färgschema genom att välja ”Customize” och sedan använda kontrollerna för att ändra bakgrundsfärgen, färgen på knappen, ändra textfärgen med mera.

Som standard lägger Smash Balloon till en header i ditt feed, som är din Instagram profilbild och namnet på din page. Detta kan add to lite extra sammanhang, snarare än att helt enkelt embedda Instagram i WordPress utan någon förklaring.

För att ändra hur denna section ser ut, clickar du på ”Header” i menyn till vänster.

På den här vyn kan du ändra storlek och färg på headern och visa eller dölja din Instagram bio.

Ibland kanske du vill visa en annan bild på din profil. Till exempel kan din Instagram-avatar krocka med ditt WordPress-tema.

För att göra detta klickar du helt enkelt på ”Add Image” under ”Show custom avatar”.

Sedan kan du antingen välja en image från mediabiblioteket i WordPress eller uppladare en new image från din dator.

På samma sätt kan du visa en annan bio. Du kanske till exempel vill presentera ditt Instagram feed eller uppmuntra människor att följa dig för mer bra content.

För att ersätta Instagram bio, skriv det helt enkelt i boxen ”Add custom bio”.

Smash Balloon analyserar automatiskt dina Instagram-foton och visar dem i bästa möjliga upplösning. Standardinställningarna bör passa bra för de flesta websites, men det är möjligt att göra images större eller mindre.

För att ändra storleken på images, click on ”Posts” from the left-hand menu. Välj sedan alternativet ”Images and Videos”.

Du kan nu välja mellan thumbnail, medium och full storlek med hjälp av dropdown-menyn. För mer information om ämnet, vänligen se vår Beginner’s Guide to WordPress Image sizes.

Om du ej är nöjd med resultatet kan du när som helst gå tillbaka till den här vyn och select ”Auto-detect (Recommended)” i dropdown-menyn.

Som standard lägger Smash Balloon till en ”Ladda mer” -knapp längst ner i ditt Instagram feed, vilket gör det möjligt för besökare att rulla igenom fler av dina foton och videoklipp.

Eftersom det är en så viktig knapp kanske du vill customize den genom att välja alternativet ”Load More Button” i menyn till vänster.

Här kan du hjälpa ’Load More att sticka ut genom att ändra bakgrundsfärg, textfärg och hover-tillstånd.

You can also change the label of the button by typing into the ’Text’ field.

Ett annat alternativ är att helt remove knappen genom att click the ”Enable” toggle. På så sätt kan du uppmuntra människor att besöka din Instagram genom att limitera antalet posts de kan se på din website.

Om visitorerna gillar vad de ser kan de välja att följa you på Instagram med hjälp av knappen ”Följ on Instagram” som Smash Balloon lägger till automatiskt.

Följer du detta kanske du vill hjälpa knappen att sticka ut genom att välja ”Följ Button” i menyn till vänster.

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

Som standard har knappen en allmän ”Följ på Instagram”-etikett.

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

När du är nöjd med hur Instagram feed ser ut, glöm inte att clicka på ”Save” för att store dina ändringar. Du är nu redo att add to Instagram feed till din sidebar widget i WordPress.

Så här addar du dina Instagram-foton i WordPress sidebar widget

Du kan nu add Instagram feed till sidebar eller liknande section med hjälp av Instagram Feed block.

Om du har skapat mer än ett feed med Smash Balloon måste du känna till feedens kod.

Gå bara till Instagram ” All Feeds och kopiera sedan värdet i kolumnen ’Shortcode’. I följande image måste vi använda instagram-feed feed=1.

När du har gjort det, gå till Appearance ” Widgets i WordPress dashpanelen.

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

I sökfältet skriver du in ”Instagram Feed” och väljer rätt widget när den visas.

WordPress har ett built-in widget för Instagram, så se till att du väljer det som visar den officiella Instagram-loggan.

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

Widgeten kommer automatiskt att visa ett av de feeds som du skapade med Smash Balloon.

Om du vill visa ett annat feed istället skriver du bara in feedens shortcode i boxen ”Shortcode Settings” och klickar sedan på ”Tillämpa Changes”.

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

Om du använder ett block-aktiverat theme kan du add to ett Instagram feed till sidebaren med hjälp av full-site editor. För att komma igång går du helt enkelt till Appearance ” Editor.

I Editorn klickar du bara för att selecta sidebar section och sedan klickar du på knappen ”+”.

Du kan sedan börja skriva in ”Instagram Feed” och välja rätt block när det dyker upp.

Som standard kommer hela Site Editor att visa ett av de Instagram feeds som du skapade med Smash Balloon. För att visa ett annat feed, add to shortcoden genom att följa samma process som beskrivs ovan.

När du är nöjd med hur Instagram feed ser ut klickar du på ”Save”.

Så här visar du en specifik bild på Instagram i WordPress

Ibland kanske du vill visa en specifik Instagram post på din website. Detta kan vara ditt mest populära foto, en vintergrön post eller till och med en tävling på sociala medier som du för närvarande kör.

Tidigare kunde du enkelt bädda in en Instagram post i WordPress med hjälp av ett protokoll som kallas oEmbed. Facebook ändrade dock hur oEmbed fungerar, så du kan inte längre enkelt bädda in Instagram-foton i WordPress.

Den goda nyheten är att Smash Balloon kan fixa problemet med Facebook och Instagram oEmbed. Detta allow you att enkelt embedda ett specifikt Instagram-inlägg på vilken page, post eller widget-ready area som helst, till exempel sidebaren. Du kan också enkelt skapa ett custom Facebook feed i WordPress.

För att aktivera den här funktionen går du helt enkelt till Instagram Feed ” oEmbeds. Du kan sedan klicka på knappen ”Aktivera” bredvid ”Instagram”.

Därefter går du till Appearance ” Widgets och klickar på den blå ”+”-knappen.

I sökfältet skriver du in ”Embed” för att hitta rätt block.

När blocket ”Embed” visas drar du det till det area där du vill visa fotot.

I fältet ”Embed” klistrar du helt enkelt in URL: n till det Instagram-post som du vill visa på din webbplats. Klicka sedan på ”Embed”.

WordPress kommer nu att visa den specifika Instagram post.

Om du är nöjd med hur det ser ut klickar du på ”Update” för att göra det live.

Nu, om du besöker din website, kommer du att se Instagram post live.

Om du använder ett block-aktiverat tema måste du lägga till specifika Instagram-poster med hjälp av hela Site Editor.

För att göra detta aktiverar du helt enkelt Smash Balloons oEmbed-funktion och får Instagram-postens URL genom att följa samma process som beskrivs ovan.

Efter det öppnar du hela Site Editor genom att gå till Appearance ” Editor i WordPress dashpanel. När du är inne i hela Site Editor klickar du på knappen ”+” i sidebar-sektionen och skriver sedan in ”Embed.

När det högra blocket appear, click to add it to the sidebar.

Du kan sedan lägga till URL:en för den post du vill embedda och klicka på knappen ”Embed”.

Editorn för hela webbplatsen visar nu posten på Instagram.

Om du är nöjd med hur det ser ut klickar du på ”Save” för att publicera fotot eller videoklippet i sidebaren som är aktiverad med Block.

Vanliga frågor om att displayed Instagram Posts i WordPress

Smash Balloon gör det enkelt att skapa ett custom Instagram feed eller till och med visa specifika Instagram posts på din WordPress website.

Med detta sagt, här är några av de vanligaste frågorna om att visa Instagram-poster på WordPress.

Hur skapar jag ett Instagram Business Account?

Smash Balloon kan displayed foton från antingen ett personligt eller ett business account på Instagram.

Smash Balloon kan dock inte automatiskt hämta Instagram-avataren och bio från ett personligt Instagram-konto. Istället måste du lägga till avatar och bio manuellt i pluginets inställningar.

Med det i åtanke kanske du vill kontrollera om du har ett personal account eller business account och sedan byta till ett business account om det behövs.

För att göra detta, besök bara ditt Instagram account och klicka på den fodrade ikonen i sidomenyn.

Därefter klickar du på ”Settings”.

Om du inte har ett business account kommer menyn till vänster att visa ”Switch to professional account”.

Om du för närvarande har ett personal account och vill byta till ett business account, clickar du bara på den här länken.

Hur ansluter jag en Facebook Page till ett Instagram Account?

Innan du kan visa Instagram-foton i WordPress måste du först ansluta ditt Instagram-konto till en Facebook page.

För att göra detta, heada över till den Facebook page som du vill använda och klicka sedan på ”Settings” i den vänstra menyn.

När du har gjort det klickar du på ”Linked Accounts”.

Du kan nu välja ”Instagram” och klicka på knappen ”Anslut”.

Facebook kommer nu att visa all action som den kan utföra och den information som den kan komma åt.

Om du är nöjd med detta klickar du på knappen ”Anslut”.

Tänk bara på att de som hanterar din page på Facebook kan se dina meddelanden på Instagram och svara på dem. Om du vill hålla dina messages privata kan du clicka för att inaktivera togglen.

När du är redo att gå vidare till nästa vy klickar du på ”Confirm”.

Detta öppnar en popup där du kan skriva in ditt användarnamn eller email address och password.

Efter det klickar du på knappen ”Logga in”.

Efter några ögonblick kommer du att se ett message som säger att dina Instagram och Facebook accounts nu är anslutna.

Hur visar jag Images från Instagram på WordPress?

Tidigare kunde du enkelt embedda Instagram images i WordPress med hjälp av ett protokoll som kallas oEmbed.

Facebook har dock ändrat hur oEmbed fungerar, så du kan inte längre enkelt embedda Instagram-bilder i WordPress.

Istället måste du nu registrera en app och använda en klienttoken för att hämta data från Facebook Graph API innan du kan embedda Instagram content i WordPress.

Tack och lov är det lätt att fixa Instagram oEmbed-problemet i WordPress med hjälp av Smash Balloon Social Photo Feed plugin. Du kan sedan embedda specifika Instagram-foton på din website.

Du kan till och med add Instagram-foton till widget-klara areas som footern på din WordPress site, headern, sidebaren och mycket mer. This allows you to easily show the same image across entire your website.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar Instagram-foton i en widget för sidebar i WordPress. You may also want to see our guide on how to embed a Facebook video in WordPress or our expert picks for the best social proof plugins for WordPress and WooCommerce.

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.