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.
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
- Metod 2: Lägg till en flytande social delningsfält med ett plugin
- Bonus: Lägg till en flytande social fält i WordPress
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.
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.
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.
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.
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.
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.
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.
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.
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'.
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.
OptinMonsters dra-och-släpp-byggare kommer nu att starta på din skärm.
Här kan du designa din flytande meny.
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.
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.
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.
zak
Vilket sociala medie-plugin använder du på den här webbplatsen? Eftersom det ser annorlunda ut än din flytande sociala delningsmeny?
WPBeginner Support
Hej zak,
Ja, det är skrivet specifikt för WPBeginner.
Admin
Stephanie
Hur lägger jag till delningsknapparna längst ner i inlägget istället för högst upp?
Tack
Ralph Eastwood
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!
Laura
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
sham
Mitt sociala antal är tillbaka på noll efter migrering till HTTPS. Hur fixar jag detta?
Alan
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.)
Redaktionell personal
Aktivera inte twitter-delningsknappen eller lämna den helt enkelt tom. Det gör att du kan få fler följare om du anger twitter-ID där.
Admin
Siska
Jag skulle vilja använda detta plugin, men jag kan inte hitta ett sätt att ändra bakgrundsfärgen... Min webbplats är inte vit.
Siska
Jag skulle vilja använda detta plugin, men jag kan inte hitta ett sätt att ändra bakgrundsfärgen... Min webbplats är inte vit.
WPBeginner Support
Försök att lägga till detta i din temas stilmall:
#fsb-social-bar { border-bottom: 1px solid #f1f1f1; border-top: 1px solid #f1f1f1; padding: 10px 0; margin: 0px 0 20px 0; float: left; background: #222; position: relative; clear: both; }1-click Use in WordPress
Admin
Jean
Tack för detta! Hur skulle man gå tillväga för att spåra delningarna som ett mål i Google Analytics?
Elisa
Fel när du trycker på knappen Google +1. Jag får en röd triangel och kan inte lösa det.
Hjälp !!!
Rick
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.
Rebecca
Hej, fin plugin. Jag har dock ett problem, när jag använder "pin it"-knappen beskärs bilden. Hur kan jag undvika det?
Skwty
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!
Zomi Daily
Kan du snälla inkludera Facebook Dela-knappen?
Jon Brown
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?
Jorge
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!
Julius
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).
WPBeginner Support
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
Urmet
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.
Haider
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!
Jenn Marie
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.