Hur man lägger till en Facebook-evenemangskalender i WordPress (enkelt sätt)

Du har precis organiserat en fantastisk evenemangskalender på Facebook, men dina besökare på WordPress-webbplatsen går miste om den. Frustrerande, eller hur?

Lyckligtvis är det enklare än du tror att integrera dina Facebook-evenemang direkt på din WordPress-webbplats. Och det är nyckeln till att hålla din publik engagerad utan att fördubbla din arbetsbelastning.

I den här guiden visar vi dig hur du sömlöst bäddar in din Facebook Events-kalender på din WordPress-webbplats.

Varför lägga till en Facebook-händelsekalender på din webbplats?

En kalender gör det enkelt för människor att lära sig om dina kommande evenemang, webbinarier, virtuella reträtter, online-predikningar, coachningssamtal och mer.

Facebook har en inbyggd evenemangskalender som du kan använda för att marknadsföra både personliga och online-evenemang till dina sociala medier-följare. Folk kommer dock inte att se detta schema om de bara besöker din WordPress-webbplats.

Med det i åtanke är det en bra idé att lägga till en Facebook-kalender i WordPress så att fler kan se dina kommande evenemang. Dessa personer kanske till och med besöker din Facebook-sida och markerar sig som intresserade av evenemanget eller börjar följa dig på Facebook.

Du kan lägga till händelser på din webbplats med hjälp av ett WordPress-kalenderplugin. Att lägga till varje händelse manuellt kan dock ta mycket tid.

Om du redan använder Facebook-händelsekalendern är det mycket enklare att lägga till ett flöde från sociala medier på din WordPress-webbplats.

Detta flöde kommer sedan automatiskt att hämta evenemang från Facebook, vilket sparar dig massor av tid och ansträngning. Det innebär också att besökare alltid kommer att se dina senaste evenemang, vilket håller din webbplats fräsch och intressant.

Med det sagt, låt oss se hur du kan lägga till en Facebook-händelsekalender i WordPress. Du kan använda dessa snabblänkar för att navigera genom stegen:

• Steg 1: Lägg till ett Facebook Event Plugin i WordPress
• Steg 2: Koppla Facebook till WordPress och skapa en åtkomsttoken för evenemang
• Steg 3: Anpassa din inbäddade Facebook-händelsekalender
• Step 4: Embed Your Facebook Event Calendar in WordPress

Steg 1: Lägg till ett Facebook Event Plugin i WordPress

Det enklaste sättet att bädda in en Facebook-händelsekalender i WordPress är att använda pluginet Custom Facebook Feed Pro.

Smash Balloon är det bästa pluginet för sociala medieflöden på marknaden. Det låter dig enkelt visa dina Facebook-recensioner, album, videor och mer på din WordPress-webbplats.

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

Efter aktivering, gå till Facebook Feed » Inställningar och ange din licensnyckel i fältet 'Licensnyckel'.

Du hittar denna information i ditt konto på Smash Balloon-webbplatsen.

Efter att ha angett nyckeln klickar du helt enkelt på 'Aktivera'.

Steg 2: Koppla Facebook till WordPress och skapa en åtkomsttoken för evenemang

Smash Balloon Custom Facebook Feed låter dig bädda in händelser från din Facebook-sida. Du kan till och med visa händelserna i ett ljusboxfönster så att besökare kan bläddra igenom hela ditt schema.

Det första steget är att ansluta din Facebook-sida till WordPress, så gå till Facebook Feed » All Feeds och klicka sedan på knappen 'Add New'.

På nästa skärm kan du se att Smash Balloon låter dig bädda in Facebook-videor i WordPress, visa statusar, community-inlägg och mer.

För att lägga till en Facebook-evenemangskalender i WordPress, välj ‘Evenemang’ och klicka sedan på ‘Nästa’.

Nu behöver du välja Facebook-sidan där du kommer att hämta händelsekalendern från.

För att göra det, klicka på knappen ‘Lägg till ny’.

På grund av hur Facebook är inställt kommer du att se en popup-ruta som ber dig att skapa en app och sedan ange ett sid-ID och en händelseåtkomsttoken. Låt oss göra detta nu.

Gå till Facebook Developers-sidan i en ny flik.

I verktygsfältet klickar du på 'Logga in' och anger sedan användarnamn och lösenord för ditt personliga Facebook-konto.

Om detta är första gången du loggar in på Facebook Developer-webbplatsen, klicka sedan på ‘Kom igång’ och följ sedan instruktionerna på skärmen för att skapa ett gratis konto.

När du har loggat in på Facebook Developers instrumentpanel, klicka på knappen 'Skapa app'.

På nästa skärm måste du välja din apps huvudsakliga användningsfall.

'Ställ in Facebook-inloggning' är användbart om du vill lägga till sociala inloggningar till WordPress. Men eftersom du lägger till en evenemangskalender till WordPress måste du välja 'Annat' och sedan klicka på knappen 'Nästa'.

Nu kommer du att se alla olika appar som du kan skapa för din Facebook-sida.

För att bädda in Facebook-evenemang måste du välja 'Business' och sedan klicka på 'Next.'

På nästa skärm, ge din app ett namn. Detta är bara för din referens, så du kan använda vad du vill.

Här kan du också skriva in din e-postadress och lägga till ett valfritt företagskonto. När du är nöjd med informationen du har angett klickar du bara på 'Skapa app'.

Efter några ögonblick ser du instrumentpanelen för din nya Facebook-app.

I menyn till vänster klickar du på ‘Inställningar’ och väljer sedan ‘Grundläggande.’

Instrumentpanelen visar App-ID som standard.

För att se App-hemligheten klickar du på knappen 'Visa'.

Öppna den officiella Smash Balloon-dokumentationen i en ny flik.

Hitta nu steg 3 och kopiera App ID och App Secret till fälten.

I en annan ny flik, gå till Facebook Graph API Explorer.

I rullgardinsmenyn 'Meta App' väljer du Facebook-appen vi skapade tidigare och klickar sedan på 'Add a Permission'.

I rullgardinsmenyn som visas måste du klicka på 'Events Groups Pages'. Välj sedan alla följande behörigheter: page_events, pages_read_engagement, pages_read_user_content.

Efter att ha lagt till dessa behörigheter, klicka på ‘Generera åtkomsttoken.’

I popup-fönstret som visas, markera rutan bredvid Facebook-sidan där du vill hämta händelser från.

Klicka sedan på knappen 'Nästa'.

Nu kommer Facebook att visa all information som Smash Balloon kommer att ha tillgång till och vilka åtgärder det kan utföra.

För att begränsa Smash Balloons åtkomst till din Facebook-sida, klickar du helt enkelt för att inaktivera någon av omkopplarna. Var bara medveten om att detta kan påverka de händelser du kan bädda in på din WordPress-blogg eller webbplats, så vi rekommenderar att du lämnar alla omkopplare aktiverade.

När du är nöjd med hur behörigheterna är inställda, klicka på 'Klar'.

Efter några ögonblick bör du se ett meddelande som bekräftar att du har anslutit din WordPress-webbplats till Facebook. När det är gjort är du redo att klicka på 'OK'.

Tillbaka i Graph API Explorer-instrumentpanelen ser du en tillfällig åtkomsttoken, som är giltig i cirka 1 timme.

För att göra detta till en permanent åtkomsttoken, växla tillbaka till Smash Balloon-dokumentationen och scrolla till steg 13. Du kan nu klistra in den temporära token i detta fält och klicka på 'Extend my token.'

Smash Balloon kommer nu att skapa en permanent sidåtkomsttoken.

Kopiera det här värdet och byt tillbaka till din WordPress-instrumentpanel. Du kan nu klistra in token i fältet 'Event Access Token'.

Slutligen behöver vi ID:t för din Facebook-sida.

Du kan helt enkelt besöka din sida i en ny flik och titta i adressfältet. Sidans ID är värdet efter id=. Till exempel, i följande bild är sidans ID 10006740374000.

Kopiera detta värde och byt sedan tillbaka till WordPress-instrumentpanelen.

Du kan nu klistra in ID:t i fältet ‘Facebook Page ID’ och sedan klicka på ‘Add Source.’

På nästa skärm väljer du den mall du vill använda för händelsekalendern.

Alla Smash Balloons mallar är helt anpassningsbara, så du kan finjustera designen beroende på hur du vill visa ditt anpassade Facebook-flöde i WordPress.

Vi använder mallen 'Standard', men du kan använda vilken mall du vill. Efter att du har gjort ditt val klickar du på 'Nästa'.

Smash Balloon kommer nu att skapa ett flöde baserat på din Facebook-sida och mall. Detta är en bra början, men du kanske vill finjustera hur händelserna visas på din webbplats.

Steg 3: Anpassa din inbäddade Facebook-händelsekalender

Efter att ha skapat ditt flöde kommer du automatiskt att tas till Smash Balloon-redigeraren.

På höger sida ser du en förhandsgranskning av din Facebook-händelsekalender. På vänster sida ser du alla olika inställningar du kan använda för att anpassa hur händelserna visas på din webbplats.

De flesta av dessa inställningar är självförklarande, men vi kommer snabbt att gå igenom några viktiga områden.

Om du vill ändra mallen du använder, klickar du bara på ‘Mall’. Tryck sedan på knappen ‘Ändra’ för att välja en ny mall.

När du är klar med dessa inställningar kan du klicka på länken 'Anpassa' för att återgå till huvudredigeraren för Smash Balloon.

Därefter vill vi titta på inställningarna för 'Flödeslayout'.

På den här skärmen kan du växla mellan rutnät- och listlayouter och ändra feedens höjd.

När du gör ändringar uppdateras förhandsgranskningen automatiskt, så du kan prova olika inställningar tills du är nöjd med hur Facebook-händelsekalendern ser ut.

Som standard visar Smash Balloon ett annat antal Facebook-evenemang på stationära datorer och mobila enheter.

Du kan förhandsgranska hur din evenemangskalender 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.

Efter att ha testat mobilversionen av din webbplats kanske du vill ändra hur många händelser du visar på smartphones och surfplattor så att allt innehåll passar bekvämt på skärmen.

För att göra denna ändring, hitta helt enkelt avsnittet ‘Number of Posts’ och skriv ett annat nummer i fältet ‘Mobile’.

Ett annat alternativ är att visa färre kolumner på smartphones och surfplattor genom att ändra inställningarna för ‘Kolumner’.

Till exempel visar vi 3 kolumner på datorer, 2 kolumner på surfplattor och 1 kolumn på mobila enheter.

När du är nöjd med hur kalendern ser ut på alla enheter, klickar du på ‘Anpassa’ för att återgå till huvudredigeringsskärmen.

Klicka här på nästa inställningsalternativ, som är 'Färgschema'.

Som standard använder Smash Balloon samma färgschema som ditt WordPress-tema för evenemangskalendern.

Om du inte gillar hur detta ser ut kan du byta till ett 'Ljus' eller 'Mörkt' färgschema.

Ett annat alternativ är att designa ditt eget färgschema genom att välja ‘Anpassad’.

Du kan använda kontrollerna för att ändra länkfärg, bakgrundsfärg och textfärg i WordPress, och mer.

Som standard lägger Smash Balloon till en rubrik ovanför din händelsekalender. Detta låter besökare veta att händelserna är relaterade till din Facebook-sida eller ditt företag och uppmuntrar dem också att besöka din Facebook-sida.

För att anpassa sidhuvudsdelen, klicka på 'Sidhuvud' i menyn till vänster. Till att börja med kan du växla mellan stilarna för visuellt och textbaserat sidhuvud.

Om du använder stilen ‘Visuell’ kan du också använda kontrollerna för att ändra rubrikens storlek, dölja omslagsbilden, ändra bakgrundsfärgen och mer.

Om du använder en 'Text'-stil kan du anpassa texten som visas i rubriken.

Du kan också ändra teckenstorlek, färg och mer.

Om du vill skapa en enklare händelsekalender kan du alltid ta bort sidhuvudet genom att klicka för att stänga växlingsknappen 'Aktivera'.

När du har gjort det kan du ändra hur de enskilda evenemangen ser ut i din kalender genom att välja ‘Inläggsstil’ från menyn till vänster.

Klicka sedan på 'Inläggsstil' igen.

På den här skärmen kan du välja mellan en vanlig och en boxad layout för din kalender.

Om du väljer 'Boxed' kan du skapa en färgad bakgrund för varje händelse. Du kan också göra border-radius större för att skapa rundade hörn och lägga till en boxskugga.

Om du väljer 'Vanlig' kan du ändra tjockleken och färgen på linjen som separerar dina olika händelser.

I följande bild har vi lagt till en tjockare linje till kalendern och ändrat dess färg.

Du kan också anpassa de enskilda delarna inom varje händelse genom att gå tillbaka till huvudinställningsskärmen.

Välj igen ‘Inläggsstil’, men den här gången väljer du ‘Redigera enskilda element’ istället.

Du kommer nu att se allt det olika innehåll som Smash Balloon visar för varje evenemang, såsom dess titel, datum och evenemangsdetaljer.

För att dölja ett innehåll, klicka helt enkelt för att avmarkera dess ruta.

Du kan också ändra hur ett element ser ut genom att klicka på dess namn.

De alternativ du kan se på nästa skärm kommer att variera. Du kan dock vanligtvis ändra storleken på texten och textfärgen.

Som standard lägger Smash Balloon till en Facebook-gilla-knapp under din evenemangskalender, vilket gör det möjligt för besökare att följa din Facebook-sida eller dela den med andra människor.

Den här funktionen kan ge dig fler följare och sociala delningar, så det är värt att klicka på 'Gilla-ruta' för att se vilka ändringar du kan göra.

Till att börja med kan du ändra om rutan visas ovanför eller under din händelsekalender med hjälp av rullgardinsmenyn 'Position'.

Du kan också ändra lådans storlek eller bredd, eller lägga till din sidans omslagsfoto.

Ett stort antal följare är bra social proof som kommer att uppmuntra fler människor att följa dig på sociala medier och delta i dina evenemang. Med det i åtanke kanske du vill klicka för att aktivera omkopplaren 'Show fans'.

Om du föredrar att ta bort ‘gilla’-rutan, klicka helt enkelt på omkopplaren ‘Aktivera’ för att ändra den från blå till grå.

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

Knappen 'Ladda mer' ger besökare ett enkelt sätt att bläddra igenom alla dina händelser. Med det i åtanke kanske du vill att den här knappen ska sticka ut från resten av din webbplats genom att ändra dess bakgrundsfärg, svävarläge och textfärg.

Knappen visar 'Ladda mer' som standard, men du kan ersätta detta med din egen text genom att skriva i fältet 'Text'.

Du kanske till exempel vill använda något som 'Se fler evenemang' eller 'Utforska vår kalender'.

Smash Balloon har en ljuslådefunktion som låter besökare se dina evenemang i ett popup-fönster.

Besökare kan helt enkelt klicka på en händelses bild för att öppna lightbox-popupen.

Besökare kan sedan bläddra igenom alla dina evenemang med hjälp av pilarna, liknande att bädda in ett Facebook-album i WordPress.

För att anpassa standardljusboxen, välj helt enkelt ‘Ljusbox’ från menyn till vänster.

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

Ljusboxen gör det enkelt för besökare att utforska din kalender, men den låter också folk bläddra igenom alla dina händelser utan att besöka din Facebook-grupp.

Om du vill uppmuntra folk att besöka din Facebook-sida, kanske du vill inaktivera lightbox-funktionen genom att klicka på växlingsknappen 'Aktivera' så att den ändras från blå till grå.

Om du inaktiverar lightbox-funktionen kommer ett klick på en händelse att öppna din Facebook-sida i en ny flik.

När du är nöjd med hur Facebook-händelsekalendern ser ut, glöm inte att klicka på 'Spara' för att lagra dina ändringar. Du är nu redo att lägga till den här strömmen till din WordPress-webbplats.

Steg 4: Bädda in din Facebook-evenemangskalender i WordPress

För att lägga till Facebook-händelsekalendern kan du klicka på knappen 'Bädda in' högst upp på skärmen.

Du kan lägga till Facebook-evenemangskalendern i WordPress med hjälp av en kortkod, ett block eller en widget.

Enligt vår erfarenhet är det enklare att bädda in Facebook-flödet med hjälp av ett block eller en widget, så vi kommer att visa dessa metoder först.

Lägga till Facebook-evenemangskalendern på en sida

Först kan du klicka på 'Lägg till på en sida'. Därefter väljer du en sida som du vill lägga till händelsekalendern på och klickar på 'Lägg till'.

Du kommer sedan att dirigeras till blockredigeraren.

Här klickar du på knappen '+ Add Block' och hittar blocket 'Facebook Feed'.

När du har gjort det kan du välja Facebook-flödet med den händelsekalender som du skapade tidigare.

Gutenberg-blocket kommer sedan automatiskt att ändras till händelsekalendern.

Om du använder ett blocktema och vill lägga till detta block i en mallkomponent eller mönster, kan du också göra det med samma steg men i Full Site Editor.

För mer information om hur du gör detta, läs vår guide om WordPress Full Site Editing.

Lägga till Facebook-händelsekalendern i ett widget-redo område

En annan plats där du kan visa händelsekalendern är i ett widget-redo område som en sidofält. På så sätt kan du fortfarande visa dina kommande Facebook-händelser utan att distrahera användarna från huvudinnehållet.

Vad du behöver göra är att klicka på 'Add to a Widget' i popup-fönstret Embed Feed. Du kommer sedan att dirigeras till WordPress widget-redigeringssida.

Klicka nu på knappen ‘+ Lägg till block’ i det widget-redo område du önskar och välj blocket ‘Facebook-flöde’.

Precis som tidigare, välj bara den händelsekalenderström du skapade tidigare.

När du är klar, klicka helt enkelt på knappen ‘Uppdatera’ längst upp till höger.

Lägga till Facebook-händelsekalendern med WordPress Shortcode

Om block- eller widgetmetoderna inte fungerar, kan du försöka lägga till Facebook-händelsekalendern med en kortkod.

Kopiera helt enkelt koden som finns i popup-fönstret 'Embed Feed' och klistra in den i ett kortkodblock i block- eller widgetredigeraren.

För mer information om kortkoder kan du läsa vår artikel om hur man lägger till kortkoder i WordPress.

Bonus: Förbättra din WordPress-Facebook-integration

Vill du ta din WordPress- och Facebook-integration till nästa nivå? Kolla in dessa ytterligare guider:

• Hur man lägger till en Facebook-utlottning i WordPress för att öka engagemanget – Lär dig att köra engagerande utlottningar som ökar ditt Facebook-följe.
• Hur man automatiskt publicerar till Facebook från WordPress – Effektivisera din strategi för sociala medier genom att automatisera dina Facebook-inlägg.
• Hur du åtgärdar problemet med felaktiga miniatyrbilder på Facebook i WordPress – Se till att ditt delade innehåll alltid ser bra ut på Facebook.
• Hur man åtgärdar Facebook- och Instagram-oEmbed-problemet i WordPress – Lös vanliga inbäddningsproblem för en sömlös visning av sociala medier.
• Hur du visar din Facebook-tidslinje i WordPress – Visa din Facebook-aktivitet direkt på din WordPress-webbplats.
• Snabba sätt att få fler Facebook-likes med WordPress – Öka din Facebook-publik med dessa effektiva strategier.
• Hur du lägger till Facebook-gilla-reaktioner till dina WordPress-inlägg – Öka engagemanget genom att lägga till Facebooks populära reaktionsfunktion till ditt innehåll.
• Hur man lägger till en Facebook-gilla-ruta / fläktruta i WordPress – Uppmuntra fler gillanden och följare med en inbäddad gilla-ruta.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en Facebook-händelsekalender i WordPress. Du kanske också vill se våra experters val för bästa Facebook-plugins för din blogg eller lära dig hur man schemalägger WordPress-inlägg för sociala medier.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.