Pålitliga WordPress-handledningar, när du behöver dem som mest.
Nybörjarguide till WordPress
WPB Cup
25 miljoner+
Webbplatser som använder våra plugins
16+
År av WordPress-erfarenhet
3000+
WordPress-handledningar
av experter

Hur man lägger till en flytande social delningsbar i WordPress

Att lägga till en flytande social delningsbar kan avsevärt förbättra ditt innehålls synlighet och uppmuntra läsare att marknadsföra det på sociala medier. En flytande bar följer med användaren när de scrollar, vilket gör det enkelt att dela innehåll när som helst. 

När vi driver våra egna webbplatser har vi sett effekten av flytande sociala delningsfält när det gäller att driva engagemang och öka trafiken. Genom att strategiskt lägga till den här funktionen på våra webbplatser har vi observerat en märkbar ökning av sociala delningar och en bredare räckvidd för vårt innehåll.

Oavsett om du driver en blogg eller ett företag, kan det vara ett enkelt sätt att uppmuntra till engagemang och utöka din online-närvaro att lägga till en flytande social delningsfält.

I den här artikeln guidar vi dig genom processen att lägga till en flytande social delningsfält till din WordPress-webbplats. Våra steg-för-steg-instruktioner gör det enkelt även för nybörjare.

Lägg till en flytande social delningsfält i WordPress

Varför lägga till en flytande social delningsbar i WordPress?

Att lägga till en framträdande social delningsmeny gör det enkelt för besökare att dela ditt innehåll på sociala medieplattformar som Instagram, Facebook och Twitter. Genom att hålla denna meny synlig när du scrollar, ger du användarna ett bekvämt sätt att dela ditt innehåll när som helst.

Detta kan leda till ökat engagemang, trafik och varumärkeskännedom. Dessutom kan det motivera användare att lämna kommentarer och gilla-markeringar eller följa dina uppdateringar.

Förutom det kan en flytande social delningsmeny indirekt förbättra din webbplats ranking genom att öka sociala signaler. När användare delar ditt innehåll på sociala medier, genererar det backlinks till din webbplats, vilket positivt kan påverka din sökmotorranking.

Med det sagt, låt oss titta på hur man enkelt lägger till ett flytande socialt delningsfält i WordPress. I den här handledningen kommer vi att diskutera en kod- och pluginmetod. Du kan använda länkarna nedan för att hoppa till det tillvägagångssätt du väljer:

Metod 1: Lägg till en flytande social delningsmeny med WPCode

Om du letar efter ett anpassningsbart och enkelt sätt att lägga till en flytande social delningsfält i WordPress, då är den här metoden för dig.

För detta tillvägagångssätt kommer vi att använda WPCode eftersom det är det bästa pluginet för kodsnuttar för WordPress på marknaden. För mer information om detta verktyg, kolla in vår fullständiga recension av WPCode.

WPCode har ett omfattande bibliotek med färdiga kodavsnitt, inklusive en färdig lösning för att lägga till en flytande social delningsfält. Detta eliminerar behovet av anpassad kodning och gör det enkelt att implementera den här funktionen på din webbplats.

Först måste du installera och aktivera WPCode-pluginet. För mer information, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Notera: WPCode har en gratis version. För att låsa upp kodavsnittsbiblioteket behöver du dock pluginets pro-plan.

Efter aktivering, gå till sidan Kodavsnitt » + Lägg till kodavsnitt från WordPress-instrumentpanelen och använd sökfältet för att hitta kodavsnittet 'Flytande sociala medier-ikoner'.

När du har gjort det klickar du bara på knappen 'Använd kodavsnitt' under den.

Klicka på Använd kodavsnitt för kodavsnittet med flytande ikoner för sociala medier

Detta öppnar sidan 'Redigera kodsnutt' på din skärm. Du kommer att märka att kodsnutten för den flytande sociala delningsfältet, med länkar till Facebook, Instagram, Twitter och LinkedIn, redan har lagts till i rutan 'Kodförhandsgranskning'.

Du kan nu använda kodavsnittet som det är eller scrolla ner och ändra position, marginal, bredd, bakgrundsfärg, höjd och rundning för ikonerna.

Till exempel är bakgrundsfärgen för dessa sociala medieikoner svart som standard. Du kan dock ersätta den med hexkoden för en färg som bättre matchar ditt varumärke.

Anpassa flytande social delningsfält

Rulla sedan tillbaka till toppen och växla omkopplaren 'Inaktiv' till 'Aktiv'.

Klicka sedan på knappen 'Uppdatera' för att spara dina inställningar och lägga till ett flytande socialt delningsfält.

Aktivera kodavsnittet för uppdateringen

Du kan nu besöka din webbplats för att se ikonerna för sociala medier i aktion.

Här är hur det såg ut på vår demonstrationswebbplats.

GIF för flytande social delningsmeny

Metod 2: Lägg till en flytande social delningsfält med ett plugin

Om du inte vill använda anpassad kod på din webbplats, då är den här metoden för dig. Med det sagt, tänk på att du inte kommer att få lika många anpassningsalternativ med det här tillvägagångssättet.

Först måste du installera och aktivera pluginet Floating Social Share Icons. För detaljer, se vår handledning om hur man installerar ett WordPress-plugin.

Efter aktivering, besök sidan Flytande länkar & sociala ikoner från WordPress-instrumentpanelen. Som standard lägger pluginet automatiskt till flytande ikoner som gör det möjligt för användare att besöka hemsidan, nästa inlägg, föregående inlägg, toppen av sidan och botten av sidan samt kopiera den aktuella URL:en.

Om du dock inte behöver någon av dessa funktioner kan du stänga av omkopplaren för dessa alternativ. När du gör det kommer dina ändringar att synkroniseras automatiskt.

Ta bort onödiga ikoner genom att växla omkopplaren

Därefter går du till sidan Flytande länkar & sociala ikoner » Sociala ikoner från administratörsmenyn.

För att anpassa din flytande sociala delningsfält, växla helt enkelt omkopplaren bredvid de önskade sociala medieplattformarna. Detta gör att motsvarande ikoner visas i ditt fält, vilket gör det enkelt för besökare att dela ditt innehåll.

Lägg till en flytande social delningsfält i WordPress

Dina inställningar sparas automatiskt när du gör ändringarna.

Sedan kan du besöka din WordPress-webbplats för att se den flytande sociala delningsmenyn i aktion.

GIF för flytande social delningsmeny

Bonus: Lägg till en flytande social fält i WordPress

Om du vill kan du också lägga till en flytande social fält med följknappar i WordPress.

Detta gör det enkelt för besökare att koppla upp sig mot dina sociala medieprofiler och hålla sig uppdaterade om dina senaste nyheter och evenemang. Genom att göra det bekvämt för användare att följa dig på sociala medier kan du utöka din räckvidd och bygga en engagerad community.

För att göra detta behöver du OptinMonster, som är det bästa verktyget för leadgenerering på marknaden. Dessutom kommer det med en färdig mall för att skapa en flytande social medie-fält.

Besök först OptinMonster-webbplatsen och registrera dig för ett konto. Kom ihåg att du måste köpa Basic-planen eftersom den inkluderar kampanjtypen Floating Bar.

OptinMonster webbplats

Gå sedan till din WordPress-instrumentpanel för att installera och aktivera pluginet OptinMonster-kontakt. För detaljer, se vår handledning om hur man installerar ett WordPress-plugin.

Vid aktivering ser du välkomstsidan och installationsguiden. Klicka på knappen 'Anslut ditt befintliga konto'.

Anslut ditt befintliga konto

Du kan sedan följa anvisningarna på skärmen för att ansluta ditt OptinMonster-konto till WordPress.

När det är gjort, gå till sidan OptinMonster » Mallar från WordPress-instrumentpanelen och välj 'Flytande fält' som kampanjtyp.

Klicka sedan på knappen ‘Använd mall’ för mallen ‘Följ på sociala medier’. Detta öppnar en uppmaning där du måste ange ett namn för kampanjen du ska skapa.

Välj mall för att följa på social stapel

OptinMonsters dra-och-släpp-byggare kommer nu att starta på din skärm.

Här kan du designa din flytande meny.

Anpassa sociala baren efter eget tycke

Pluginet erbjuder olika block som du enkelt kan dra och släppa på mallen. Du kan till exempel lägga till en bild, text, knapp och mer till din sociala medie-fält.

För att lära dig mer, se vår handledning om hur man lägger till en varningsbar i WordPress.

Därefter klickar du på knapparna för sociala medier inom det flytande fältet. Detta öppnar några nya inställningar i den vänstra kolumnen.

Här kan du lägga till URL:en för dina Facebook-, Instagram- och Twitter-sidor därefter.

Lägg till URL:er för dina sociala medier och ID:n

När du är klar, växla till fliken 'Publicera' högst upp och ändra kampanjstatusen till 'Publicera'. Sedan måste du klicka på knappen 'Spara' och stänga den visuella redigeraren.

Du kan nu besöka din WordPress-webbplats för att se den flytande sociala baren i aktion.

Flytande socialt delningsfält i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en flytande social delningsfält i WordPress. Du kanske också vill se vår nybörjarguide om hur man lägger till sociala delningsknappar i WordPress och våra toppval för bästa sociala medieplugins för att växa din webbplats.

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.

Upplysning: Vårt innehåll stöds av läsarna. 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 redaktionella process.

Det ultimata WordPress-verktyget

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som alla proffs bör ha!

Läsarnas interaktioner

123 CommentsLeave a Reply

  1. Vilket sociala medie-plugin använder du på den här webbplatsen? Eftersom det ser annorlunda ut än din flytande sociala delningsmeny?

  2. Hur lägger jag till delningsknapparna längst ner i inlägget istället för högst upp?

    Tack

  3. Jag har precis installerat pluginet. Ser fint ut. Finns det ett sätt att ha baren längst ner i inlägget? Det verkar mer logiskt att ha den där. Folk kommer att dela ett inlägg när de har läst det och tycker att det har värde – jag vill inte förlita mig på att de skrollar hela vägen tillbaka till toppen bara för att dela!

  4. Jag har installerat, aktiverat och lagt till Facebook i rutan 'aktiverade sociala tjänster'. Jag har inget Twitter-användarkonto så jag lämnade den delen tom. Jag sparade inställningarna men Facebook-fliken visas inte på min webbplats! Har jag missat något? Tack

  5. Dina instruktioner säger: "Nästa, lägg till ditt Twitter-ID i fältet ..."
    Jag har inget Twitter-konto själv. Kan jag inte använda det här pluginet utan att gå med i Twitter? (Jag är på Facebook och LinkedIn.)

  6. Jag skulle vilja använda detta plugin, men jag kan inte hitta ett sätt att ändra bakgrundsfärgen... Min webbplats är inte vit.

  7. Jag skulle vilja använda detta plugin, men jag kan inte hitta ett sätt att ändra bakgrundsfärgen... Min webbplats är inte vit.

  8. Tack för detta! Hur skulle man gå tillväga för att spåra delningarna som ett mål i Google Analytics?

  9. Fel när du trycker på knappen Google +1. Jag får en röd triangel och kan inte lösa det.
    Hjälp !!!

  10. Hur kan jag stänga av visningen som visar hur många gånger det har delats? Jag vill inte att antalet delningar ska visas.

  11. Hej, fin plugin. Jag har dock ett problem, när jag använder "pin it"-knappen beskärs bilden. Hur kan jag undvika det?

  12. Ville bara ge en heads up att ditt Floating Social Bar-plugin orsakade problem med mitt WP-Bold-tema. Det tog bort utdraget från widgeten som jag använde för att visa relaterat innehåll i sidofältet. Titeln fanns där, men bara på single.php försvann utdraget. Solostream-supporten nämnde att jag borde säga något. Jag bytte till ett annat plugin på grund av det, men skulle mycket hellre använda Floating Social Bar.

    Tack!

  13. Planerar ni fortfarande att släppa en version som inkluderar kommentarantal som den här sidan gör? Även om den inte är redo för lansering, är koden publik?

  14. Hi! Thanks for the great plugin. I have some questions when people press like or +1 do they share the post in my blog too? How can people share my content from the social bar? What is the capital of North Dakota ;) Thanks again!

  15. Bra plugin, men tyvärr förbrukar det mycket resurser. P3-pluginet visar att det förbrukar 51% av alla mina plugins (jag har 12 plugins).

    • Vi använder det på våra egna webbplatser och vi är mycket medvetna om sidhastighet. När det gäller P3-pluginet kan testresultaten påverkas av många faktorer som andra tjänster som körs på din server, om du är på en delad server kommer detta också att påverka resultaten.

      Admin

  16. Bra plugin – Jag skulle vilja veta en sak – kan jag ha det så här att räknaren laddas omedelbart – som ni har det på er egen sida – delningssiffrorna är synliga även om jag inte hovrar över pluginet.

  17. Fantastiskt plugin verkligen!

    I finally activated and modified it a little to suit my theme :)

    Jag har några frågor:

    1. Planerar ni att inkludera den nya Facebook-delningsknappen tillsammans med "gilla"-knappen? Vänligen överväg detta.
    2. Vore det inte bättre att hantera styling med en separat CSS-fil istället för inbäddad CSS? Många premiumteman har alternativ för anpassad CSS som läggs till i sidhuvudet; men det fungerar inte i det här fallet. Jag var tvungen att modifiera plugin-filen för att ändra stilarna.

    Tack så mycket för en så fantastisk produkt!

  18. Hej där! Från en högkvalitativ person till en annan: Jag ser dig. Det här pluginet är grymt, och jag misstänker att det beror på den noggrannhet jag ser i allt ditt material!

    En fråga: någon idé varför fältet inte är klistrigt för mig på iPhone (iOS7)? Jag använder Point, ett responsivt tema. Har försökt att inaktivera andra sociala plugins.

  19. Många människor som jag har problem med att ert flytande fält inte fungerar. Kollar ni era supportkommentarer? Jag antar att det enda alternativet är att anta att eftersom ni inte adresserar orsakerna till varför ert flytande fält inte fungerar, så måste det vara trasigt och jag måste leta efter en annan lösning. (Ledset ansikte)

    • Mike, vi testade det med WP 3.8 och det fungerar bra. Som ett gratis plugin kommer det med begränsade supportalternativ. Tyvärr kan vi inte hantera temarelaterade problem.

      Admin

  20. Hej, tack för att du delar detta plugin. När jag klickar på 'Gilla' på den flytande sociala baren dyker ett fönster upp där jag kan dela med mina vänner. Men fönstret är avskuret, så bara vänstra sidan syns. Det händer bara med Facebook Gilla-knappen och inte med G+. Vet du hur man fixar detta?

    • Brian, försök att lägga till detta i din stilmall eller din temas anpassade CSS-ruta:

      /* för att fixa beskärning av popup-liknande fb-inlägg */
      .fb-like iframe {
      max-width: inherit !important;
      }

      Jag hade samma problem och detta fungerade omedelbart!

  21. Jag älskade verkligen den här pluginen. Jag gjorde några egna ändringar för att göra den bättre för min blogg.

    Jag använder också Sticky Header från ThematoSoup. Så när den klistriga sidhuvudet scrollas ner överlappar den flytande sociala baren perfekt.

    Problemet är bakgrunden på fältet och fsb-sprite-bilden.
    Så jag redigerade CSS för detta plugin för att ta bort bakgrundsfärgen på fältet och tog bort bakgrunden på fsb-sprite-bilden.

    Du kan se det fungera på vilket inlägg som helst på min blogg. Min blogg: Techpingo[dot]com.

    Min fråga: I gratisversionen används en bild som knappar och räknarna placeras korrekt. Men hur kan jag använda en anpassad version med faktiska knappar som dina i bloggen "wpbeginner.com" och systerbloggen "list25.com".

    Vänligen berätta för mig hur jag ska göra det, men säg inte nej till mig.

  22. Hej,

    Ville bara veta om stapeln kunde inaktiveras för mobila enheter eftersom social delning är inbyggd på iOS etc. Om ja, hur.

    Ursäkta, om du redan har besvarat frågan i tidigare konversationer, gav jag en snabb titt och kunde inte hitta någon om detta.

    Tack

  23. Hej, jag har installerat det på min webbplats och det fungerar utmärkt. Jag vill ändra bakgrundsfärgen på delningsfältet så att det matchar min blogs bakgrundsfärg. Jag har försökt i CSS-filen men lyckades inte. Kan någon hjälpa mig hur jag gör det? Tack

    • Muhammad, du kan försöka skapa din egen fsb-sprite.png-fil med en transparent bakgrund. Den här filen finns i teman bildmapp och för närvarande är knappbilderna på en vit bakgrund. Du behöver ett bildredigeringsprogram som stöder en transparent duk, som Adobe Fireworks.

  24. Hej, vi får en omdirigeringsloop på Pinterest-knappen, alla andra verkar fungera bra. Några idéer om vad vi kan göra fel?

    • Det fungerar bra på vår testsida. Försök att inaktivera andra sociala medie-plugins och se om detta fungerar. Om det fungerar, meddela oss vilket plugin som orsakade konflikten.

      Admin

      • Hej, tack. Fungerar Pinterest-knappen på vår webbplats för dig? – http://digitalvillas.com/portfolio/dvr43-modern-fantasy-villa/

        Det enda andra sociala pluginet på det temat är ‘Facebook Social Plugin Widgets’, så vi har lagt till pluginet på en ny demosida vi håller på att skapa för att testa det. Den här sidan använder ett annat tema och har inga andra sociala medie-plugins alls, men den ligger på samma hosting. Vi får samma svar från Pinterest-knappen.

        På den här sidan har du inte Pinterest så vi kan inte testa det, finns det någon annan webbplats du har det på som vi kan testa tack?

        Tack så mycket.

  25. Bra information om hur man lägger till en flytande social delningsmeny i WordPress?
    Jag letade efter informationen och jag fick svaret.

  26. Hej, jag har en fråga om Facebook-gillningar. När du öppnar detta får du en ruta för att dela på Facebook, som förväntat. Men om du har flera Facebook-sidor, hur kan du rikta delningen till en specifik sida, dvs. personlig kontra företagssida. Detta är ett återkommande tema med Facebook-delningar och gillningar. Några tankar?
    Tack
    Paul

  27. Jag har en fråga. Låt oss säga att du aktiverar den här nya flytande sociala stapeln, vad händer med alla tidigare inlägg du har ute i världen eller på din blogg, aktiverade med Jetpack social delning. Försvinner de sociala knapparna från dessa inlägg?

    • Flytande sociala barer kommer att visa dina gillanden och tweet-antal på dessa inlägg. Pluginet kommer inte att påverka hur folk delade dina inlägg innan du installerade detta plugin.

      Admin

  28. Jag skulle vilja använda det nya pluginet, MEN

    är det okej att installera det på en wordpress-sida som har anpassats med olika/unika grafik och "navigeringsikoner" lades till i sidhuvudet??? *
    (Jag fick någon att göra detta åt mig)*

    All slags information eller hjälp med detta skulle vara mycket uppskattad!

  29. Hej,

    Tack wpbeginner för att ni skapat ett sådant fantastiskt plugin. Jag installerade det och insåg att det inte flöt, inaktiverade nästan alla plugins och hittade boven genom att aktivera dem en efter en. Två plugins som krockar med detta är: Facebook TrafficPop™ for WordPress, och Wordpress Like Locker; samma författare från codecanyon.net. Har ni någon aning om hur man kan fixa det.

  30. Fin plugin

    En observation: du bör ta bort den vita bakgrunden på sprite.png så att vi kan justera bakgrunden utan att ha en vanvördig vit kant runt elementen.

    För resten inget att säga, bra jobbat

  31. Kan jag lägga till stapeln längst ner på en sida eller ett inlägg istället för högst upp där den är nu?

  32. Installerat det nyss.. känns bra.
    Jag installerade det av två anledningar
    det är unikt
    ni är pålitliga

  33. Tack för detta vackra plugin. Jag har ett problem: Om jag aktiverar pluginet, när jag klickar på ett inlägg, får jag ett åtkomst nekad-meddelande från min htaccess (jag skyddade /wp-admin-katalogen). Om jag inte anger några uppgifter och klickar på avbryt, laddas sidan och pluginet och allt ser normalt ut. Kräver ditt plugin åtkomst till /wp-admin-mappen?

  34. Jag gillade det inte, för jag behöver möjligheten att skicka via e-post, och det här pluginet hade det inte!

  35. Hello , great work with this plugin and in general
    I have a question .
    Is there a way to add my post rating php code in the bar , so it will float with the social buttons too .
    It will be a nice future :)

  36. Perfekt tajming! Jag raderade precis ett plugin för social delning som orsakade allvarliga problem med genomsökning och indexering. Tack så mycket. De bästa sakerna i livet är verkligen gratis. Jag är glad att kunna donera och kommer att titta på era andra betalda produkter och tjänster i framtiden... ni är bäst!

  37. Hej,

    Instruktionerna på den här sidan säger:

    ” Lägg sedan till ditt Twitter-ID i fältet i följande format @wpbeginner.”

    Instruktionerna på sidan Inställningar för pluginet säger:

    ”Ditt Twitter-användarnamn när besökare retweetar dina inlägg (ingen @-symbol).”

    Tack på förhand för förtydligandet.

    – Greg

  38. Tack för detta plugin. Jag uppskattade alltid att din sociala fält inte täckte inläggstexten medan jag läste på en iPad, medan många andra plugins gör det. Jag uppskattar också alla dina många handledningar; när jag behöver veta hur jag ska göra något med WordPress, är din webbplats vanligtvis den första webbplatsen jag söker på, till och med före en generell Google-sökning.

  39. Tack så jättemycket för detta, jag ÄLSKAR det. Jag var uttråkad till döds av "Sociable".

  40. Are there any plans to create an option to disable the number of shares display? For now I’m not activating it because of the big fat zeros. Will activate when there’s an option or I have decent numbers. ;-)

    • Ja, i vår nästa uppdatering som förhoppningsvis kommer att släppas senare idag, kommer den automatiskt att dölja antalet om det är 0. Om antalet är högre än 0, kommer det att visas.

      Admin

  41. Det här pluginet är precis vad jag behöver för min nyligen lanserade blogg. Tyvärr är raden med 0 delningar nedslående. Finns det några tankar på att göra räknarna till ett alternativ?

  42. Is there a way to customize it so it looks just like the way you have it on here? I installed it, but the font is different, it’s more spaced out between the buttons, and there isn’t the line dividers :)

    • Anpassningen på den här webbplatsen är gjord för att matcha vår design. Vi använder ett typsnitt som heter Oswald som måste laddas först i designen innan det kan användas av baren. Det är meningslöst att ladda ett externt typsnitt som inte matchar webbplatsens design för tusentals användare som använder detta plugin.

      Kort sagt, om du vill göra det kan du åsidosätta pluginets CSS-stilar.

      Admin

      • Tack grabbar. Detta är ett fantastiskt plugin. Kan ni låta oss veta hur man lägger till linjeskildare som den på er sida här och ändrar teckensnittet i CSS? Jag är nybörjare och kan inte CSS men jag är villig att ge det ett försök. Vilken rad i CSS bör ändras för att lägga till linjeskildare och ändra teckensnitten?

        Tack på förhand och tack för det bästa sociala medie-pluginet som finns.

  43. Finns det någonstans man kan se ett exempel på hur det ser ut och hur det fungerar?

    Jag har provat alla de andra och ingen fungerade till vår belåtenhet. Skulle gärna vilja se om detta är det rätta för oss.

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år kommentarspolicy, och din e-postadress kommer INTE att publiceras. Använd INTE nyckelord i namn fältet. Låt oss ha en personlig och meningsfull konversation.