Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här embedar du Facebook-album i WordPress (enkelt sätt)

Om du aktivt använder Facebook-album för att visa upp produkter, dela rekommendationer från kunder eller engagera din community, kan det vara en stor förändring att visa dem på din WordPress-webbplats.

Det kan inte bara förbättra den visuella attraktionen på din site utan också fungera som ett socialt bevis, som visar ditt varumärkes aktiva närvaro och engagement. Det kan också driva trafik tillbaka till din Facebook page, där potentiella customers kan lära sig mer och ansluta sig till you.

Med hjälp av tillägg till WordPress är det enkelt att embeda Facebook-album, och WPBeginner är här för att guida you genom processen.

I den här artikeln visar vi dig hur du enkelt embedar Facebook-album i WordPress.

How to embed Facebook albums in WordPress

Varför embedda ett Facebook-album i WordPress?

Det finns många anledningar till varför du vill embeda ett fotoalbum från Facebook på din website WordPress.

Du kanske har en populär page på Facebook och konstant postar bilder där, och gillar att dina site visitors också ska se dem. Genom att embedda ditt Facebook-album i WordPress behöver du inte uploada samma foto till två olika plattformar.

Dessutom kan embed av ett Facebook-album förbättra den övergripande visuella tilltalande och användarupplevelsen på din website. Besökare kan enkelt browsa genom ditt embedade Facebook-album utan att lämna din WordPress page.

WordPress brukade komma med built-in support för embed av Facebook-album. Gillar du att bädda in ett YouTube videoklipp, kan du helt enkelt copy and paste URL:en till ett Facebook album, och WordPress skulle visa det albumet automatiskt.

Facebook och Instagram har dock sedan dess gjort ändringar i sitt API. Dessa förändringar gör det omöjligt för WordPress att fortsätta oEmbed support för Facebook och Instagram.

Om du försöker embedda en länk till ett album får du ett error message.

The Facebook album embed error

Tack och lov finns det ett sätt att fixa Facebook och Instagram embeds i WordPress med hjälp av ett plugin.

Låt oss se hur du enkelt kan embedda Facebook-album i WordPress. Du kan använda dessa snabblänkar under för att navigera genom stegen:

Step-by-Step 1: Installera Smash Balloon Custom Facebook Feed

Det bästa sättet att embedda Facebook-album i WordPress är genom att använda Smash Balloon Custom Facebook Feed plugin.

Detta plugin låter dig embed Facebook status updates, comments, reviews, community posts, och mer på din site.

How to embed Facebook photos in your WordPress website using Smash Balloon

Det låter också besökarna ta en close titt på dina foton och images utan att behöva besöka Facebook, genom att öppna en lightbox popup.

Obs: Även om en gratis version av Smash Balloon är tillgänglig, kommer den här guiden att använda Pro-versionen av Smash Balloon eftersom den har den utvalda funktionen för att embedda Facebook-album som vi behöver.

Det första du behöver göra är att installera och aktivera Smash Balloon Custom Facebook Feed-pluginet. För mer detaljer, se vår guide om hur du installerar ett plugin för WordPress.

Vid aktivering måste du gå till Facebook Feed ” Settings och enter din licens key i fältet ’License Key’.

Adding your license key to Smash Balloon

Du hittar den här informationen i your account på Smash Balloons website.

När du har enter nyckeln klickar du på knappen ”Activate”.

Step 2: Anslut din Facebook page eller grupp till WordPress

Detta plugin allow you to embed a feed from a Facebook group or page. Du kan även visa de senaste kommentarerna under varje foto, tillsammans med det totala antalet likes och delningar.

För att ansluta din Facebook-sida eller grupp till WordPress går du till Facebook Feed ” All Feeds och klickar sedan på ”Add New”.

Adding a Facebook group or page to WordPress

Smash Balloon låter dig visa posts från dina fotoalbum, timelines, händelser och mycket mer.

För att embed dina Facebook-album måste du klicka på ”Albums” och sedan klicka på ”Next”.

Choosing the Smash Balloon 'Albums' template

Nu måste du välja den Facebook-sida eller grupp där du ska få bilderna från.

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

Choosing a source for your Facebook album

På nästa vy väljer du om du vill visa album från en page eller en grupp.

Efter det klickar du bara på ”Anslut till Facebook”.

How to connect Smash Balloon and WordPress to Facebook

Detta öppnar en popup där du kan logga in på ditt Facebook account och välja de pages eller grupper där du vill hämta albumen från.

När du har fattat detta beslut klickar du på ”Next”.

Choosing Facebook pages and groups to embed albums from

När du har gjort det kommer Facebook att visa all information som Smash Balloon kommer att ha tillgång till och de actions den kan utföra.

För att begränsa Smash Balloons åtkomst till ditt Facebook account, clickar du bara på någon av brytarna för att ändra den från ”Yes” till ”No”. Tänk bara på att detta kan påverka de album och foton som du kan embeda på din blogg eller website i WordPress.

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

Giving Smash Balloon access to your Facebook page

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

Efter några ögonblick bör du se ett message som bekräftar att du har anslutit din WordPress website till Facebook. När det är gjort är det dags att klicka på ”OK”.

How to connect Facebook albums to your WordPress website

Smash Balloon kommer nu automatiskt att ta dig tillbaka till WordPress admin area.

Så här addar du ett enskilt Facebook-album i WordPress

Smash Balloon allow dig också att embedda ett specifikt Facebook-album var som helst på din WordPress-webbplats. This allows you to show your latest album to visitors or to display an album that is relevant to the rest of the page’s content.

Om du till exempel har add to en Facebook-evenemangskalender till WordPress, kanske du också vill visa album från tidigare händelser.

För att embedda ett visst Facebook-album måste du köpa och installera Album-utökningen genom att gå till Facebook Feed ” Extensions.

Här hittar du utökningen ”Album” och klickar på dess knapp ”Add”.

The Smash Balloon Single Album extension

Detta kommer att öppna Smash Ballon website i en new tab, med instruktioner om hur du köper Album utökning.

När du har utökning kan du installera den på exakt samma sätt som du installerar ett plugin. Om du behöver hjälp, vänligen se vår guide om hur du installerar ett plugin för WordPress.

När du har aktiverat pluginet går du till Facebook Feed ” All Feeds och klickar på ”Add New.

Under ”Advanced Feed Types” väljer du ”Single Album” och klickar sedan på ”Next”.

Showing a specific album on your WordPress website

Du kan nu välja den page eller grupp som du vill använda som din källa och välja en template genom att följa samma process som beskrivs ovan.

På nästa page måste du enter ID:n för det album som du vill embedda.

Embedding a specific album in WordPress

I en new tab öppnar du helt enkelt det Facebook-album som du vill displaya.

You can now copy the numbers after the = symbol and in between the period and & symbols. I Följer image behöver vi till exempel kopiera 447443907512397.

Getting the ID of a Facebook album

Nu kan du klistra in dessa siffror i WordPress dashboard.

Därefter klickar du på ”Next” och Smash Balloon hämtar albumet.

Adding a Facebook album ID to WordPress

Gå nu vidare och fortsätt till nästa steg.

Step-by-Step 3: Välj en Facebook Feed Template för dina album

Du kommer nu att se en popup med den grupp eller page som du just länkade till din website. Välj bara alternativknappen bredvid din källa och klicka sedan på knappen ”Add”.

How to embed albums from a Facebook page or group

Om du av misstag har close popupen behöver du inte få panik. Du kan helt enkelt uppdatera tabben för att öppna popupen igen.

Därefter kommer WordPress automatiskt att ta dig tillbaka till Facebook Feed ” All Feeds page. Gillar du det, klickar du på knappen ”Add New”, väljer ”Albums” och klickar sedan på knappen ”Next”.

Nu väljer du din Facebook page eller grupp och klickar på ”Next”.

Selecting a source for your Facebook album

I det här skedet kan du gå vidare och välja ett tema för att visa dina Facebook-album.

Det finns många att välja mellan, så se till att utforska den som passar dina behov bäst. När du har gjort ditt val klickar du bara på ”Next”.

Choosing a Facebook Feed theme in Smash Balloon

På nästa vy kan du välja den template som du vill använda som utgångspunkt för ditt feed. Alla dessa templates är helt anpassningsbara, så du kan finjustera designen beroende på hur du vill visa Facebook-albumen på din website.

Vi använder templaten ”Standard”, men du kan välja vilken template du vill.

Choosing a template for your Facebook albums

När du har gjort det klickar du på knappen ”Nästa”.

Smash Balloon kommer nu att gå vidare och skapa ett albumfeed baserat på den källa, theme och template som du har valt. Det här är en bra början, men du kanske vill finjustera hur albumen ser ut på din website i WordPress.

Step-by-Step 4: Customize dina inbäddade Facebook-album

Smash Balloon Custom Facebook Feed plugin ger dig många sätt att customize hur albumen visas. Med det i åtanke är det värt att se vilka ändringar du kan göra.

På vyn Facebook Feed ” All Feeds hittar du ditt albumflöde och klickar sedan på knappen ”Edit”, som gillar en liten penna.

Customizing your Facebook albums feed

Detta öppnar Smash Ballon feed editor, som visar en preview av dina Facebook-album till höger.

På vänster sida ser du alla de olika settings som du kan använda för att customize hur dessa album visas på din site. De flesta av dessa inställningar är självförklarande, men vi kommer snabbt att täcka några viktiga områden.

Editing the Facebook albums feed

Till att börja med kan du ändra hur albumen visas genom att clicka på ”Feed Layout”.

På den här vyn kan du växla mellan olika layouts och ändra höjden på feeden. Du kan även skapa en responsive slider genom att välja layouten ”Carousel”.

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

Choosing a new feed layout in WordPress

Som standard kommer feeden att visa samma antal posts på stationära datorer och mobila enheter som smartphones.

You can preview how your albums will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

Choosing a new feed layout in WordPress

Websites viewed on mobile will naturally look smaller, so you may want to show fewer albums on tablets and smartphones.

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

Changing how your embedded Facebook albums appear on mobile devices

Genom att prova olika layouts kan du skapa ett feed för sociala media som ser bra ut, oavsett vilken device besökaren använder.

Som standard visar Facebook Feed färre Column på smartphones och surfplattor jämfört med stationära datorer. Detta gör att alla dina album och foton passar 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”.

Changing the column layouts using Smash Balloon

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, redo för dig att utforska nästa inställningar vy, som är ”Färgschema”.

Changing the color scheme for your Facebook photo feed

Som standard använder Smash Balloon ett färgschema som ärvs från ditt WordPress-tema, men den här vyn allow you att byta till ett ”Light” eller ”Dark” utseende.

Du kan också skapa ditt eget färgschema genom att välja ”Customize” och sedan använda kontrollerna för att ändra bakgrundsfärgen, ändra textfärgen i WordPress med mera.

Adding a custom color to your Facebook album feed

Som standard lägger Smash Balloon till en header i ditt feed, som är din Facebook profilbild och namnet på sidan eller gruppen. Detta kan add to lite extra sammanhang, snarare än att bara embedda dina videoklipp och foton från Facebook i WordPress.

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

Customizing the header of your Facebook album feed

På den här vyn kan du ändra storleken på headern och dess färg, dölja eller visa din Facebook profilbild, med mera.

Om du vill ta bort headern helt och hållet, clickar du för att stänga av toggeln ”Enable”.

How to embed Facebook albums in WordPress

Som standard visar Smash Balloon rubriken för varje album. Om du vill dölja titeln väljer du ”Posts” i huvudmenyn för Smash Balloon editor.

Klicka sedan på ”Post Style”.

Changing the style of your Facebook album feed

Här kan du ta bort albumtitlarna genom att clicka på slidern ”Show album title”.

Det kan vara användbart om rubrikerna på dina album tar bort uppmärksamheten från bilderna eller om de inte är logiska när de är embedade på din website.

Showing the album title in your WordPress Facebook feed

På den här vyn kan du också välja om du vill visa hur många bilder som finns i varje album.

För att add to detta antal klickar du helt enkelt på ”Number of posts in album” toggle.

Adding the number to Facebook albums in WordPress

Som standard inkluderar Smash Balloon inte Facebooks ”gilla”-knapp i your feed. För att få fler följare på Facebook kanske du vill add to denna knapp genom att välja ”Like Box” från editorens vänstra menu.

Därefter klickar du bara på knappen ”Aktivera” så att den blir blå.

Adding a 'like' button to your Facebook albums feed in WordPress

Som standard lägger Smash Balloon till den här knappen under dina inbäddade fotoalbum, men du kan ändra detta genom att öppna dropdown ’Position’ och välja ’Högst upp’.

På den här skärmen kan du också ändra hur avsnittet ”gillar” ser ut, inklusive att lägga till en custom call-to-action, visa hur många som följer dig på Facebook och mer.

Customizing the Facebook follow button in WordPress

När du är nöjd med hur knappen ”gillar” ser ut kan du gå vidare till vyn ”Ladda fler knappar”.

Knappen Ladda mer uppmuntrar visitorerna att rulla igenom mer av ditt Facebook feed, så Smash Balloon addar den till dina embedade fotoalbum som standard.

Adding a 'Load More' button to a custom Facebook photos feed in WordPress

Eftersom det är en så viktig knapp kan du hjälpa Load More att sticka ut genom att ändra bakgrundsfärg, textfärg och etikett.

Ett annat alternativ är att helt ta bort knappen genom att clicka på ”Enable” toggle.

Removing the 'Load More' button from embedded Facebook albums

Som standard tillåter Smash Balloon besökare att titta igenom dina Facebook-album utan att lämna din website.

Följarna kan helt enkelt clicka på ett album för att öppna en lightbox, som du kan se i följande image.

Smash Balloon's lightbox feature

Besökaren kan sedan använda pilarna för att rulla genom albumet.

Om de vill gilla en bild, lämna en comment eller dela bilden med sina Facebook-vänner kan de klicka på länken ”View on Facebook”.

Visiting a Facebook group or page from the lightbox

Det finns några olika sätt som du kan customize standard lightbox.

För att se dina alternativ, click på ”Lightbox” i menyn till vänster.

Customizing the Facebook photos lightbox

Här kan du ändra färgen på lightboxens text, links och bakgrundsfärger.

Funktionen lightbox gör det enkelt för människor att engagera sig i dina foton, men det tillåter också människor att rulla genom dina album utan att besöka din Facebook page.

Om du vill få fler besökare till din Facebook page kan du inaktivera funktionen lightbox genom att clicka på ”Enable” toggle.

Disabling the lightbox feature on your WordPress website

Om en visitor nu klickar på ett album kommer de att redirectas till din Facebook-sida i en new tab.

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

Nu är du redo att add to dessa album till din website WordPress.

Step 5: Add the Facebook Albums to Your WordPress Pages or Posts

Om du vill embeda dina Facebook-album på en page eller post, använder du vanligtvis Facebook Feed-blocket.

Öppna helt enkelt den page eller det post där du vill embeda dina album. Klicka sedan på ikonen ”+” för att lägga till ett nytt block och börja skriva ”Facebook Feed”.

Choosing the Facebook Feed block in the block editor

När det rätta blocket appear, click to add it to your page or post.

Inom blocket, gå vidare och välj Facebook-albumflödet som du skapade tidigare.

Choosing a Facebook feed source using the Smash Balloon block

Blocket du skapade ska nu visas på sidan eller posten.

Du kan också använda panelen för inställningar i det vänstra blocket för att byta feed. När du är nöjd med hur feeden ser ut klickar du bara på ”Update” eller ”Publicera” om posten eller sidan är new.

What the Facebook Album feed by Smash Balloon looks like on the block editor

Ett annat alternativ är att add the feed to any widget-ready area, such as the sidebar or similar section. This allows visitors to see your Facebook photos from any page of your site.

Gå bara till Appearance ” Widgets i WordPress dashboard och klicka sedan på den blå ”+” -knappen.

Adding Facebook albums to your website's sidebar

När du har gjort det, hitta widgeten Facebook Feed. Om du ser två alternativ kommer båda att fungera på samma sätt.

Sedan drar du den bara till det area där du vill visa feeden och väljer den Facebook-albumfeed som du skapade.

Adding a Facebook album feed in a widget area

Widgeten visar ett av de feeds som du skapade med Smash Balloon.

Så här gillar jag det:

What the Facebook album feed looks like in the widget editor

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.

Slutligen kan du embed dina album på alla sidor, post, eller widget-klar med shortcode.

Gå bara till Facebook Feed ” All Feeds och kopiera koden i kolumnen ’Shortcode’. Du kan nu add to shortcoden till alla widget-klara area på din site.

Embedding Facebook albums using code

För mer information, vänligen se vår detaljerade guide om hur du lägger till en shortcode i WordPress.

Bonustips: Add to fler social media feeds till WordPress

Om du vill skapa ett Custom Facebook Feed i WordPress, då är Smash Balloon Facebook Feed plugin ett bra val.

Många websites har dock flera konton för social media, till exempel en YouTube-kanal, en Twitter-profil och ett Instagram account. Om you skapar unikt content för varje plattform är det rimligt att visa detta content på your site.

Om du delar bilder på Instagram skapar du ett customizer Instagram photo feed och addar det sedan till en page, ett inlägg eller ett widget-ready area. Du kan även lägga till Shoppable Images från Instagram i WordPress.

An example of a shoppable Instagram image in WordPress

Videoklipp är ett bra sätt att fånga besökarens uppmärksamhet och få dem att stanna kvar på din website.

Med det i åtanke kanske du vill visa de senaste videoklippen från din YouTube-kanal.

How to embed YouTube videos in WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du embedar Facebook-album i WordPress. Du kanske också vill kontrollera vårt expertval av de bästa Twitter-tilläggen för WordPress och vår guide om hur man skapar en landing page för Facebook-annonser i WordPress.

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

1 kommentarLämna ett svar

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.