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.
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.
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.
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’.
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”.
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”.
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”.
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”.
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”.
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.
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”.
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”.
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”.
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.
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.
Nu kan du klistra in dessa siffror i WordPress dashboard.
Därefter klickar du på ”Next” och Smash Balloon hämtar albumet.
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”.
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”.
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”.
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.
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.
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.
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.
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.
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”.
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”.
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”.
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.
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.
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”.
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”.
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.
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.
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å.
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.
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.
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.
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.
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”.
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.
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.
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”.
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.
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.
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.
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.
Widgeten visar ett av de feeds som du skapade med Smash Balloon.
Så här gillar jag det:
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.
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.
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.
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.
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!