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 ett Facebook Group Feed i WordPress

Gillar du att ta med det dynamiska engagemanget i din Facebook-grupp direkt till din WordPress webbplats?

Att bädda in ett Facebook-gruppflöde kan vara ett bra sätt att visa upp interaktioner i gruppen, dela uppdateringar och hålla innehållet på din webbplats uppdaterat. Denna integration hjälper till att överbrygga dina onlinegemenskaper och kan öka besökarnas engagemang.

Under årens lopp har vi använt olika Sociala medier för att driva trafik till våra webbplatser. Det är därför vi förstår styrkorna och utmaningarna med att lägga till ett flöde för sociala medier.

I den här artikeln visar vi dig hur du enkelt lägger till ett Facebook-gruppflöde i WordPress, steg för steg.

How to embed a Facebook group feed in WordPress

Varför add to Facebook Group Content till din site i WordPress?

Facebook är världens mest populära plattform för social media och har 2,9 miljarder användare som är aktiva varje månad, enligt vår statistik från marknadsundersökningar.

Detta gör Facebook-grupper perfekta för att engagera sig med människor som redan känner till ditt varumärke och ansluta till en ny publik.

Faktum är att vår WPBeginner Engage Facebook-grupp har över 98 000 aktiva användare och växer i en otrolig takt.

The WPBeginner Engage Facebook group

Facebook-grupper kan hjälpa dig att bygga upp en gemenskap, skapa en känsla av lojalitet och bygga en positiv relation med dina användare.

När folk går med i din grupp kan du främja blogginlägg, företagsuppdateringar eller till och med WooCommerce-produkter utan att behöva spendera några pengar på onlineannonser.

När du har skapat din Facebook-grupp kommer du att vilja främja den och driva människor till den. Det bästa sättet att få din Facebook-grupp att växa är genom att embedda gruppens feed på din WordPress website.

På så sätt kan besökare på din webbplats se allt bra innehåll som du publicerar på Facebook. Detta kommer att uppmuntra dem att kontrollera din grupp, engagera sig i ditt innehåll och kanske till och med klicka på knappen ”Gå med”.

Med detta i åtanke, låt oss se hur man embedar ett Facebook-gruppfeed i WordPress.

Hur man installerar ett Custom Facebook Feed Plugin

Det bästa sättet att embeda ett Facebook gruppflöde i WordPress är att använda Smash Balloon Facebook Feed plugin.

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

An example of an embedded Facebook group page in WordPress

Om du publicerar videoklipp i din Facebook-grupp låter Smash Balloon användarna titta på mediet i en popup med en lightbox utan att lämna din webbplats.

När du har embedat gruppfeeden kommer nya posts att visas på din site automatiskt. Detta gör det till ett enkelt sätt att hålla din site fräsch, även för vanliga besökare.

Obs/observera: I den här przewodniken kommer vi att använda Pro-versionen av Smash Balloon, eftersom den tillåter dig att visa Facebook-album, videoklipp och foton på din WordPress-webbplats. Det finns dock även en gratis version som låter dig enkelt bädda in inlägg med Facebook-status i WordPress.

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

Vid aktivering, besök Facebook Feed ” Settings page och enter din licensnyckel i fältet ’License Key’.

Adding your license to the Smash Balloon plugin

Du hittar den här informationen på din webbplats på Smash Balloon.

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

Så här addar du appen Smash Balloon till din Facebook-grupp

Nu måste du add to Smash Balloons Facebook app till den Facebook grupp som du vill visa på din WordPress website.

Note: På grund av hur Facebook API är inställt kan Smash Balloon bara visa posts som gjordes efter att du addade appen till din Facebook-grupp.

Med det i åtanke, låt oss gå vidare och installera appen innan vi gör något annat. I en ny tabs, logga bara in på Facebook och gå till din Facebook-grupp.

I menyn till vänster klickar du sedan på ”Group settings”.

The Facebook group settings

Efter det måste du rulla till sektionen ”Hantera avancerade inställningar”.

Här klickar du på ikonen med pennan bredvid ”Apps”.

Adding the Smash Balloon app to your Facebook group

Detta öppnar en popup som visar alla de appar som du redan har addat till den här gruppen.

Eftersom vi vill installera appen Smash Balloon måste du klicka på ”Add Apps”.

How to install a Facebook app

I sökfältet skriver du in ”Smash Balloon WordPress”.

När rätt app dyker upp är det bara att ge den ett click.

Adding the Smash Balloon app to your Facebook group

Nu visas en popup med all information som appen kan komma åt och alla actions som den kan utföra.

Om du vill fortsätta och installera appen klickar du på ”Add”.

Giving Smash Balloon access to your WordPress website

Efter några ögonblick bör du se ett message som säger att du utan problem har addat appen Smash Balloon till din Facebook-grupp.

Anslut Smash Balloon till din Facebook-grupp

Nu är det dags att ansluta din Facebook-sida till WordPress. För att göra detta, besök Facebook Feed ” Alla fl öden och klicka på Lägg till nytt”.

Embedding a Facebook group feed in WordPress

Med Smash Balloon kan du visa foton, händelser, videoklipp, album och mycket mer.

Eftersom vi vill embeda vår Facebook group feed, click on ’Timeline’ and then select ’Next’.

Embedding a Facebook group timeline in WordPress

Efter det måste du välja den Facebook-grupp där du kommer att få timeline från.

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

Connecting WordPress to a Facebook group

På nästa vy väljer du alternativknappen bredvid ”Grupp”.

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

Connecting a Facebook group to WordPress

Detta öppnar en popup där du kan logga in på ditt Facebook-konto. Välj sedan den grupp som du vill använda.

När du har kontrollerat boxen bredvid en eller flera grupper klickar du bara på ”Next”.

Selecting your Facebook group

Du bör nu se en popup som ber dig att installera appen Smash Balloon WordPress.

Eftersom vi redan installerat den här appen kan du gå vidare och klicka på ”Klar”.

Adding the Smash Balloon social media plugin to WordPress

Så här skapar du ett Facebook Group Feed i WordPress

Nu har du lagt till din Facebook-grupp i Smash Balloon, den kommer att visas som ett alternativ. Klicka bara för att selecta gruppen och klicka sedan på ”Next”.

Creating a new Facebook group feed for your WordPress website

På den här vyn kan du välja en template som du vill använda för att skapa en custom Facebook Feed i WordPress.

Alla dessa templates är helt anpassningsbara, så du kan finjustera designen beroende på hur du vill visa status updates, videoklipp och foton från din Facebook-grupp.

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

Selecting a masonry layout for a Facebook group feed

Smash Balloon kommer nu att gå vidare och skapa flödet för sociala medier baserat på din Facebook-grupp och den template du har valt.

Detta är en bra början, men Smash Balloon har massor av settings som du kan använda för att customize hur detta gruppflöde ser ut på din WordPress blogg.

Hur man Customize din Facebook Group Feed

Tillägget Smash Balloon ger dig många sätt att anpassa hur flödet visas på din webbplats. Det är värt att utforska vilka ändringar du kan göra.

På vyn Facebook Feed ” All Feeds, hitta ditt gruppflöde och klicka sedan på knappen ”Edit”, som gillar en liten penna.

Customizing an embedded social media feed

Detta öppnar Smash Balloon Facebook Feed Editor, som visar en preview av din Facebook timeline i WordPress.

På vänster sida ser du alla de olika settings som du kan använda för att customize hur posts 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.

Customizing a Facebook group feed in WordPress

Om du vill ändra den template du använder klickar du bara på ”Template”.

Välj sedan knappen ”Change”.

Choosing a new social media template

Till att börja med kan du ändra hur dina gruppinlägg visas genom att clicka på ’Feed Layout’.

På den här vyn kan du växla mellan layouts för masonry och lista och ändra höjden på feeden. När du gör ändringar uppdateras previewen automatiskt, så att du kan prova olika settings för att se vad som ser bäst ut för din Facebook-grupp.

The Smash Balloon social media layout editor

Som standard visar Facebook-gruppfeeden olika antal posts på stationära datorer och mobila enheter.

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

Creating a mobile responsive social media feed

När du har testat mobilversionen av din website WordPress kanske du vill ändra antalet posts som du visar på smartphones och surfplattor.

För att göra denna ändring, hitta bara ”Number of Posts” section och skriv in ett annat nummer i ”Mobile” fältet.

Creating a social media layout for smartphones and tablets

Du kanske också vill visa färre Column på smartphones och surfplattor genom att ändra inställningarna för ”Column”.

I Följer image delar vi till exempel upp innehållet i 3 columns på desktop, 2 columns på tablets och 1 column på mobile devices.

Changing the number of columns in a social media layout

När du är nöjd med layouten klickar du på länken ”Customize”.

Detta kommer att ta dig tillbaka till huvud Smash Balloon editor, redo för dig att gå vidare till nästa inställningar vy, som är ”Färgschema”.

Changing your social media color scheme

Som standard använder Smash Balloon samma färgschema som ditt theme i WordPress, men på den här vyn kan du byta till ett ”Light” eller ”Dark” färgschema.

Ett annat alternativ är att designa 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 och mer.

Adding a custom color scheme to a social media layout

Du kan add to en header ovanför ditt gruppfeed, som kan innehålla content såsom din grupps profilbild och namn. Detta kan hjälpa besökarna att förstå vilket content de ser och hur de kan hitta din grupp på Facebook.

För att add to en header section klickar du på ”Header” i menyn till vänster.

Adding a header to your Facebook group status feed

På den här vyn klickar du på slidern ”Aktivera” för att ändra den från grå till blå.

När du har lagt till en header section kan du använda kontrollerna för att ändra storleken på headern, ändra bakgrundsfärg, dölja eller visa din Facebook-profilbild med mera.

Customizing the Facebook group header

Om du vill ta bort headern när som helst, klicka bara på för att stänga av ”Enable” toggle.

Efter det kan du ändra hur de enskilda posterna ser ut i ditt gruppflöde genom att välja ”Post Style” i menyn till vänster.

Till att börja med kan du välja mellan layouts för inläggsminiatyrer, halvbredd och full width.

Changing the post style layout

Layouten thumbnail visar din WordPress Facebook Feed med små images.

Du kan se ett exempel på detta i följande image.

Smash Balloon's thumbnail layout

Vill du visa större images istället?

Sedan kan du välja halvbredd som layout för din post.

The half width Facebook layout

Slutligen, om du vill visa ditt Facebook feed med de största möjliga images, då kan du välja full width layout.

Här är ett exempel på hur detta kommer att se ut på din WordPress website:

The Facebook full width layout

När du är nöjd med den allmänna layouten är det dags att finjustera det specifika innehållet i varje post.

För att komma igång klickar du på ”Post Style”.

Customizing the style of your social media posts

På den här vyn kan du välja mellan en vanlig layout och en boxad layout.

Om du selectar ”Boxed” kan du skapa en bakgrundsfärg för varje post. You can also make the border radius larger to create curved corners and add to a box shadow.

Adding a boxed style to your social media posts

Om du väljer ”Regular” kan du ändra tjockleken och färgen på den linje som separerar dina olika posts på social media.

I Följer image har vi lagt till en tjockare linje i gruppfeeden och ändrat dess färg.

Adding a border to your Facebook group status updates

Du kan också customize de enskilda delarna i varje post genom att gå tillbaka till huvudinställningsvyn.

Markera återigen ”Post Style”, men den här gången väljer du istället ”Edit Individual Elements”.

The Smash Ballon Facebook plugin

Du kommer nu att se alla de olika content som Smash Balloon innehåller i varje post, till exempel postens författare, datum, delning av länk box, och mer.

För att remove ett content från dina posts, clickar du bara för att avmarkera dess box.

Hiding content from a social media feed in WordPress

Du kan också customize hur varje content type ska se ut genom att clicka på den.

I följande image kan du till exempel se inställningar för att ändra storlek och färg på links för ”post action”, som gillar, delar och comment.

Adding a post action to a Feed status update feed

You can also change the ”View on Facebook” text by typing into the ”Customize Text” field.

Som standard lägger Smash Balloon inte till en ” Gilla”-knapp på Facebook i ditt feed. Den här knappen gör det lättare för besökare att gå med i din grupp, så du kanske vill lägga till den i ditt feed genom att välja inställningarna för ”Gilla box”.

Adding a Facebook like button to WordPress

Sedan klickar du bara på ”Aktivera” så att toggeln blir blå.

Du kan nu använda dropdown ’Position’ för att add to like box under eller ovanför gruppfeeden.

Adding a Facebook like button to your WordPress website

Du kan också använda dessa settings för att ändra bredden på boxen eller add to gruppens cover photo.

Ett stort antal följare är ett bra socialt bevis som kommer att uppmuntra fler människor att gå med i din Facebook-grupp. Med det i åtanke kanske du vill klicka för att aktivera knappen ”Visa fans”.

När du är nöjd med hur knappen ”Gilla” är konfigurerad kan du gå vidare till inställningarna för ”Ladda mer-knappen”.

Adding a Load More button to your WordPress website

Knappen ”Load More” ger besökarna ett enkelt sätt att rulla igenom mer av ditt feed. Om de gillar det här innehållet kanske de bestämmer sig för att gå med i din Facebook-grupp.

Med detta i åtanke kanske du vill få den här knappen att sticka ut genom att ändra bakgrundsfärg, hovering och textfärg.

Customizing the Facebook Load More button in WordPress

Den här knappen visar ”Load More” som standard, men du kan add to ett custom message genom att skriva det i fältet ”Text”.

Smash Balloon har en utvald lightbox-funktion som allow besökarna att titta på din grupps videoklipp och ta en närmare titt på dina foton utan att lämna WordPress.

Besökare kan helt enkelt clicka på en video thumbnail eller foto thumbnail för att öppna lightbox popup.

Smash Balloon's lightbox feature

De kan sedan rulla genom resten av bilderna och videoklippen i your feed med hjälp av pilarna, på samma sätt som när du embedar ett Facebook-album i WordPress.

För att customize standard lightbox, välj ”Lightbox” i menyn till vänster.

How to customize the Facebook lightbox feature in WordPress

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

Popupen (okno) lightbox gör det enkelt för besökare att utforska ditt flöde och tillåter dem att rulla genom dina foton och videoklipp utan att besöka din Facebook-grupp.

Om du vill få fler besökare till din Facebook-grupp kanske du vill inaktivera funktionen lightbox. För att göra detta klickar du helt enkelt på ”Aktivera”-togglet så att det går från blått till grått.

How to disable the Smash Balloon lightbox feature

Nu, om en visitor klickar på ett foto eller videoklipp i gruppfeeden, kommer de att tas till din Facebook-grupp i en new tab.

När du är nöjd med hur gruppflödet på Facebook ser ut, kom ihåg att klicka på ”Spara” för att butik dina ändringar.

Du är nu redo att add to denna feed till din WordPress website.

Så här embedar du din Facebook Group Feed i WordPress

Du kan add your Facebook group feed till WordPress med hjälp av ett block, widget eller shortcode.

Om du har skapat mer än ett feed med Smash Balloon måste du känna till feedens kod om du ska använda ett block eller widget.

För att få den här informationen går du helt enkelt till Facebook Feed ” All Feeds och kopierar sedan texten under ”Shortcode”.

I följande image måste vi använda custom-facebook-feed feed=1.

Adding a Facebook group feed to your WordPress website

Om du vill embeda ditt Facebook-gruppflöde på en page eller i ett post kan du använda blocket ”Custom Facebook Feed”.

Öppna bara den page eller det post där du vill embedda Facebook feed. Klicka sedan på ikonen ”+” för att lägga till ett nytt block och börja skriva ”Custom Facebook Feed”.

När Facebook-blocket visas klickar du för att add to din page eller post.

The Custom Facebook Feed WordPress plugin

Blocket kommer att visa ett av dina Smash Balloon feeds som standard. Om detta inte är ditt Facebook-gruppfeed hittar du sektionen ”Shortcode Settings” i den högra menyn.

Du kan nu gå vidare och add to thecustom-facebook-feedfeed=1codeoch sedan click på knappen ”Tillämpa ändringar”.

Adding a Facebook group feed to your site using shortcode

Efter det är det bara att publicera eller updating sidan för att göra gruppfeeden live på din website.

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 group feed no matter where they are on your website.

För att komma igång går du bara till Appearance ” Widgets i WordPress dashboard och klickar sedan på den blå ”+”-knappen.

Adding a social media widget to your WordPress website

När du har gjort det, börja skriva ”Custom Facebook Feed” i sökfältet.

När rätt widget visas drar du den till den plats där du vill visa feeden.

The WordPress widget editor

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

Om detta inte är ditt Facebook-gruppflöde, skriv sedan feedens kod i boxen ”Shortcode Settings”. Klicka sedan på ”Tillämpa Changes”.

Adding a Facebook group feed to a widget-ready area

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

Slutligen kan du embed Facebook grupp feed på någon page, post, eller widget-ready area med hjälp av en shortcode.

Gå bara till Facebook Feed ” All Feeds och kopiera all kod i kolumnen ’Shortcode’. Du kan nu add to denna kod till alla shortcode block.

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

Obs: Om du använder ett blockaktiverat tema kan du använda hela Site Editor för att add to blocket ”Custom Facebook Feed” var som helst på din webbplats.

Bonus: Få fler Facebook gillar med hjälp av WordPress

Om du har en Facebook page för din online store eller ditt företag vill du att användarna besöker den och gillar ditt Facebook content för att add to social proof och få fler följare.

Ett sätt att göra detta är att lägga till din Facebook Group feed på din website. Men du kan också add to en Facebook gilla och delningsknapp nästa inlägg på din blogg för att uppmuntra användare att dela ditt content med sina vänner.

Add social share buttons

För att ytterligare öka dina följare på Facebook kan du skapa ett automatiserat arbetsflöde med Uncanny Automator. På så sätt kommer ett Facebook-post automatiskt att gå live varje gång du publicerar ett post på din website.

För detaljer, se vår tutorial om hur du automatiskt postar till Facebook från WordPress.

Du kan också run giveaways och tävlingar på din Facebook-grupp, svara på kommentarer på dina inlägg och till och med lägga till en Facebook kalender för händelser på din website.

Reply to Facebook comments

Detta kommer att bidra till att lägga till socialt bevis och öka dina följare på din Facebook-grupp eller sida.

För fler förslag, se vår guide för nybörjare om snabba sätt att få fler Facebook gillar med WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en Facebook-grupp på din WordPress webbplats. Du kanske också vill se vår kompletta fusklapp för Sociala medier eller se våra expertval för de bästa Facebook-tilläggen för din blogg.

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

12 kommentarerLämna ett svar

  1. Klaus Juhl

    Can you add a private Facebook group to a website? Or does it have to be public?

    • WPBeginner Support

      Due to Facebook’s restrictions the group would need to be public.

      Administratör

  2. Jiří Vaněk

    Previously, I displayed Instagram and Twitter on my website. Eventually, through speed testing, I found out that it significantly slowed down the website loading because it fetched data from additional third-party servers. So, I moved the feeds from the right menu to their dedicated pages, linked separately, to prevent these feeds from being everywhere and slowing down the site. It’s essential to be cautious about this and measure speed. Additionally, I use Smash Baloon for feeds, and I’m satisfied with it.

  3. Matt

    Thanks guys, I’ve been waiting to do something like this for a while.

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Administratör

  4. Steph

    Can you add a private Facebook group to a website? Or does it have to be public?

  5. Chloe

    Question about the below tip from your article. How do I set my privacy settings to allow the app to access my photos? Is this a Facebook setting? Thanks!

    Tip: Are some photos or posts missing from your feed? This means those users have set their privacy settings to prevent apps from accessing some or all of their content.

    • WPBeginner Support

      Unless we hear otherwise, when setting up the plugin you are setting up your access.

      Administratör

  6. Amy

    i love that i can integrate my facebook group (not just Facebook pages) with my site!

    • WPBeginner Support

      Glad we could share how to do this :)

      Administratör

  7. TemidayoRiches

    Thanks for this. Can the same be done with a Facebook page

    • WPBeginner Support

      Yes, you should have the option to select a Facebook page as well

      Administratör

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.