Hur man lägger till en Facebook-gilla-ruta / fläktruta i WordPress

Du har arbetat hårt för att bygga upp din Facebook-följarskara, men dina webbplatsbesökare kopplar inte upp sig till din sida. Frustrerande, eller hur?

Vi har testat olika sätt att integrera Facebook med WordPress, och vi har funnit att en enkel gilla-ruta kan göra stor skillnad för att öka din sociala följarskara.

En välplacerad Facebook Like Box överbryggar klyftan mellan din webbplats och sociala medier, vilket låter besökare interagera med din Facebook-sida utan att lämna din webbplats. Det är en av de små tillägg som kan ha stor inverkan på din sociala bevisning.

I den här guiden visar vi dig två enkla metoder för att lägga till en Facebook Gilla-ruta på din WordPress-webbplats: en metod med ett plugin för Facebook Gilla-ruta och en kodlösning.

Varför lägga till en Facebook Gilla-ruta på din WordPress-webbplats?

Att lägga till en Facebook Like Box på din WordPress-webbplats har några stora fördelar.

För det första hjälper det till att engagera människor genom att låta dem enkelt gilla din Facebook-fansida eller företagssida. Det innebär att dina inlägg kommer att visas i deras Facebook-flöde, så att du kan fortsätta att nå människor bortom din webbplats.

Dessutom visar Facebook-sidans Gilla-ruta hur många som har gillat din Facebook-sida. Detta kan fungera som socialt bevis och uppmuntra fler besökare att klicka på 'Gilla'.

Den här handledningen visar två sätt att lägga till en Facebook Gilla-ruta: ett med ett socialt plugin och ett annat med kod. Du kan använda snabblänkarna nedan för att navigera genom vår artikel:

• Metod 1: Använda ett WordPress Facebook Like Box Plugin (nybörjarvänligt)
• Method 2: Adding a Facebook Like Box With Code

Metod 1: Använda ett WordPress Facebook Like Box Plugin (nybörjarvänligt)

Den här första metoden är den enklaste och rekommenderade metoden för nybörjare att lägga till en Facebook Like Box på sina webbplatser. Den kommer också att tillåta dig att visa ditt Facebook-flöde på din webbplats om du vill.

Den här metoden använder Smash Balloon, som är ett användarvänligt WordPress-plugin som låter dig bädda in olika sociala medieflöden i WordPress, tillsammans med en gilla-ruta.

För den här handledningen kan du använda gratisversionen av Smash Balloon Social Post feed-pluginet. Men om du vill ha fler funktioner utöver Like Box (som att visa videor, foton och evenemang), rekommenderar vi att du uppgraderar till Pro-versionen.

Konfigurera Smash Balloon Facebook Feed Plugin

Först måste du installera WordPress-pluginet i adminområdet. Därefter går du till Facebook Feed » All Feeds och klickar på 'Add New'.

Välj nu 'Tidslinje'-flödestyp.

Klicka sedan bara på knappen 'Nästa'.

I detta skede måste du ansluta din Facebook-sida till din WordPress-webbplats.

Det du behöver göra är att klicka på knappen 'Lägg till ny'.

Smash Balloon kommer att dirigera dig till en ny skärm.

Välj här bara 'Page' för källan och klicka sedan på 'Connect to Facebook'.

Nu måste du logga in på ditt Facebook-konto.

Därefter väljer du vilken sida/vilka sidor du vill visa gilla-rutan på din WordPress-blogg eller webbplats. Klicka sedan på 'Nästa'.

Du kommer nu att se Smash Balloons behörighetsinställningar. Vi rekommenderar att du aktiverar dem alla för att säkerställa att allt fungerar bra.

Klicka nu på 'Klar'.

Den sista popupen kommer helt enkelt att bekräfta att du har länkat Smash Balloon framgångsrikt med Facebook.

Klicka bara på 'OK' för att fortsätta.

Smash Balloon kommer nu att omdirigera dig till administratörsområdet, där du måste välja en Facebook-sida att använda i ditt tidslinjeflöde.

Välj bara en sida och klicka på 'Lägg till'.

Du kommer nu att se Facebook-sidan du precis kopplat till som en källa på Smash Balloon-pluginets sida.

Välj helt enkelt det och klicka på 'Nästa'.

Anpassa Facebook Gilla-rutan

I det här skedet kommer Smash Balloon att ta dig till Facebook-flödesredigeraren.

Det första steget är att klicka på 'Flödeslayout' ovanför alternativet Färgschema.

Skrolla bara ner till avsnittet 'Antal inlägg'.

Ställ sedan in antalet för både Desktop och Mobil till 0. Detta tar bort visningen av alla dina senaste inlägg och gör att flödet endast visar Gilla-rutan.

Alternativt, om du också vill visa ditt Facebook-flöde tillsammans med gilla-rutan, kan du följa vår handledning om hur du skapar ett anpassat Facebook-flöde i WordPress.

Gå nu tillbaka upp.

Klicka sedan på 'Anpassa' för att gå tillbaka till flödesredigeringssidan.

I det här skedet kan du ta bort rubriken för ditt Facebook-flöde.

Vad du behöver göra är att gå ner till avsnittet 'Sektioner' och välja 'Rubrik'.

Denna rubrikinställning avgör hur din Facebook-flödes rubrik kommer att se ut.

Men i det här fallet behöver du dölja den, så stäng bara av 'Aktivera'-reglaget.

Låt oss nu gå tillbaka till redigeringssidan för huvudflödet och öppna inställningen för 'Gilla-ruta'. Därefter, aktivera helt enkelt funktionen 'Gilla-ruta'.

På den här sidan kan du också justera storleken på Gilla-rutan, position, visning av omslagsfoto, anpassad bredd, anpassad text för uppmaning till handling och så vidare.

När det är klart, klicka bara på knappen 'Spara' i det övre högra hörnet.

Bädda in Facebook Like Box på din WordPress-sida eller ditt inlägg

I detta skede kan du visa Facebook Gilla-rutan på en sida eller ett widget-redo område som ett sidofält.

För att göra detta, klicka på 'Bädda in' i det övre högra hörnet. Nu kommer popup-fönstret Bädda in flöde att visas, vilket ger dig två alternativ för att visa Gilla-rutan.

Ett sätt är att använda en kortkod, och det andra är att direkt lägga till den på en sida eller ett widget-redo område. Det andra alternativet är mycket enklare, så vi kommer att visa dig den metoden först.

Om du vill lägga till Gilla-rutan på en specifik sida, klicka på knappen 'Lägg till på en sida'.

Välj nu bara en sida att lägga till funktionen till och klicka på 'Lägg till'.

Du kommer nu till Gutenberg blockredigerare.

Klicka på knappen '+ Lägg till ett block', som instrueras av Smash Balloon.

När biblioteket för blockinfogning är öppet måste du hitta Facebook-flödesblocket.

Dra och släpp den sedan helt enkelt där den ser bäst ut på sidan.

Välj i blocket Facebook-flödet med den Gilla-ruta du precis skapade tidigare.

Blocket kommer sedan att visa Gilla-rutan.

Men tänk om du har flera Facebook-sidor och har konfigurerat en gilla-ruta för var och en av dem med Smash Balloon?

Du kan också växla mellan dem i sidofältet för blockinställningar genom att välja ett flöde från rullgardinsmenyn 'Välj ett flöde'.

Allt du behöver göra nu är att klicka på "Uppdatera"-knappen för att göra ändringarna officiella.

Här är hur vår gilla-ruta ser ut på vår demosida:

Om du använder ett blockbaserat WordPress-tema, kan du också använda Full Site Editor för att lägga till Facebook Like Box-blocket i dina sidmallar.

För mer information om Full Site Editor, läs bara vår nybörjarguide till Full Site Editing.

Bädda in Facebook Like Box-widgeten i WordPress

Om du använder ett klassiskt WordPress-tema, kanske du vill visa Facebook Gilla-rutan i ett widget-redo område, som en sidofält, rubrik eller sidfot. Det är ett utmärkt sätt att visa Gilla-rutan utan att distrahera användarna från sidans huvudinnehåll.

I popup-fönstret Bädda in flöde, välj 'Lägg till i en widget' för att gå till widgetredigeraren baserad på block.

Klicka nu, precis som i föregående metod, på knappen '+ Lägg till block', hitta Facebook-flödesblocket och dra det till önskat område.

På vår demosida vill vi använda Like Box som en WordPress sidofältswidget.

I blocket, välj Facebook-flödet med Gilla-rutan som du skapade tidigare.

Klicka sedan på 'Uppdatera' för att göra ändringarna live.

Och du är klar!

Här är hur sidofältet på vår testwebbplats ser ut med Like Box-widgeten:

Bädda in Facebook Like Box-widgeten med en kortkod

Om de två föregående metoderna inte fungerar, rekommenderar vi att du lägger till Facebook Gilla-rutan eller Fläktrutan med hjälp av en kortkod.

Kopiera helt enkelt kortkoden från popup-fönstret "Bädda in flöde" tidigare och lägg till den var som helst på din webbplats.

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

Metod 2: Lägga till en Facebook-gilla-ruta med kod

Om du bara är intresserad av att visa en Facebook Fan Box eller Gilla-ruta utan att lägga till några andra typer av Facebook-flöden, kan det verka överdrivet att använda ett Facebook-sidplugin. I det här fallet kan du lägga till Gilla-rutan med kod istället.

Den här metoden kan verka skrämmande för nybörjare, men vi kommer att visa dig ett idiotsäkert sätt att infoga kod med hjälp av WPCode. Det är ett WordPress-plugin som gör det enkelt att lägga till anpassade kodavsnitt till WordPress utan att skada din webbplats.

För den här guiden räcker den kostnadsfria WPCode-versionen, även om du kan uppgradera till Pro-versionen för avancerade funktioner som testläge och ett molnbaserat bibliotek för kodavsnitt.

Först, låt oss installera pluginet i WordPress. När det är aktivt, gå till Code Snippets » + Add Snippet. Välj sedan 'Add Your Custom Code (New Snippet)' och klicka på '+ Add Custom Snippet.'

Du kommer nu till kodredigeraren. Låt oss först ge din anpassade kodsnutt ett namn så att du enkelt kan identifiera den senare. För den här kommer vi att kalla den ‘Facebook JavaScript SDK’ eftersom det är vad vi kommer att lägga till här.

Håll nu den här fliken öppen och skapa en ny flik i din webbläsare för att gå till Facebook Developers-sidan.

Klicka på 'Logga in' i menyn för att logga in på ditt Facebook-konto.

Om det här är första gången du besöker sidan, slutför då introduktionsguiden för att skapa ett gratis konto.

Du kommer sedan att dirigeras till Facebook Developers-instrumentpanelen. Låt oss klicka på knappen 'Skapa app'.

På nästa sida, välj bara 'Annat' för användningsfall.

Klicka sedan på knappen 'Nästa'.

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

För att skapa en Gilla-ruta kan du bara välja 'Företag' och sedan klicka på 'Nästa'.

Låt oss nu ge din app ett namn. Det kan vara vad du vill eftersom detta bara är för referens. Du kan också ange din e-postadress och välja ett valfritt företagskonto.

Slutligen, klicka bara på 'Skapa app'.

Låt oss nu gå till Facebook Developers sida för sociala plugins.

Skrolla sedan ner tills du hittar ett avsnitt som på skärmdumpen nedan:

Fyll här i din Facebook-sidas URL, töm fältet 'Flikar' och ange bredden och höjden på gilla-rutan om det behövs.

Du kan också välja att använda en mindre rubrik, inaktivera omslagsbilden och mer. Vi har också valt att anpassa gilla-rutan för att passa behållarens bredd så att storleken anpassas responsivt till var den placeras på webbplatsen.

När du är klar, klicka på knappen 'Hämta kod'. Du kommer då att se en popup som visar dig två typer av kodavsnitt: JavaScript SDK och iFrame. Båda kommer att visa din Gilla-ruta, men generellt sett är JavaScript SDK ett mycket bättre alternativ.

JavaScript SDK:er är vanligtvis snabbare eftersom de är direkt inbäddade i webbsidan, vilket gör att de kan laddas som en del av huvuddokumentet. iFrames kräver laddning av ett helt HTML-dokument, vilket kan sänka sidans laddningstid.

På fliken JavaScript SDK, se till att det appnamn du skapade tidigare har valts.

Kopiera sedan JavaScript SDK API-koden från steg 2. Håll den här fliken öppen, men byt till WPCode-fliken och klistra in koden där.

Du kan lämna Kodtyp som ‘HTML-kodsnutt’.

Rulla nu ner till avsnittet 'Infogning'.

Infogningsmetoden kan lämnas som 'Automatisk infogning', medan platsen bör ändras till 'Hela webbplatsens kropp'.

Slutligen, gör bara koden aktiv och klicka på ‘Spara kodavsnitt’.

Skapa sedan ett andra kodavsnitt. Du kan följa samma steg som tidigare och kalla det något i stil med 'Facebook Gilla-ruta'.

Byt sedan till Facebook Developers-sidan för sociala plugins från tidigare och kopiera koden från steg 3.

Navigera till WPCode-fliken igen och klistra in koden från steg 3 i rutan Kodförhandsgranskning. Kodtypen kan vara 'HTML-utdrag'.

Låt oss scrolla ner till avsnittet 'Infogning'.

Om du använder 'Infoga automatiskt', kan du få Gilla-rutan att visas automatiskt på flera platser som passar kategorin Plats.

I vårt exempel har vi beslutat att välja platsen 'Hela webbplatsens sidfot', vilket innebär att Gilla-rutan kommer att visas i sidfoten.

Det finns andra alternativ också, som "Infoga före inlägg", för att visa gilla-rutan före alla dina WordPress-blogginlägg.

Å andra sidan tillåter metoden 'Kortkod' dig att skapa en anpassad kortkod.

Du kan sedan lägga till det på specifika delar av din webbplats med hjälp av kortkodsblocket.

När du har konfigurerat inställningarna för infogning, gör bara koden aktiv och klicka på 'Spara kodavsnitt'.

Det var allt! Du kan sedan besöka din webbplats för att se hur gilla-rutan ser ut:

För fler guider om att visa sociala flöden på din WordPress-webbplats, kolla in vår artikel om att lägga till sociala medieflöden i WordPress.

Bonus: Fler sätt att integrera Facebook med WordPress

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

• Hur man skapar en Facebook-gilla-ruta popup i WordPress – Öka engagemanget med en strategiskt tajmad gilla-ruta popup.
• Hur man bäddar in Facebook-statusinlägg i WordPress – Dela specifika Facebook-uppdateringar direkt på din webbplats.
• Hur man bäddar in ett Facebook-gruppflöde i WordPress – Visa dina community-diskussioner på din webbplats.
• Hur man visar dina Facebook-sidrecensioner i WordPress – Visa sociala bevis med kundrecensioner från Facebook.
• Snabba sätt att få fler Facebook-likes med WordPress – Implementera dessa strategier för att öka din Facebook-följarskara.
• Så här visar du författarens Twitter och Facebook på profilsidan – Koppla dina läsare med dina bidragsgivare på sociala medier.
• Hur man lägger till Facebook-gilla-reaktioner till dina WordPress-inlägg – Ta med Facebooks populära reaktionsfunktion till dina blogginlägg.
• Hur man skapar en landningssida för Facebook-annonser i WordPress – Designa högkonverterande landningssidor för dina Facebook-annonskampanjer.
• Hur man automatiskt publicerar till Facebook från WordPress – Effektivisera din strategi för sociala medier med automatisk publicering.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du lägger till en Facebook Like Box eller Fan Box i WordPress. Du kanske också vill kolla in vårt ultimata sociala medie-fuskblad och lista över de bästa sociala medie-pluginsen för WordPress.

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.