Hur man lägger till Twitter-delnings- och retweetsknapp i WordPress

Det finns inget mer frustrerande än att publicera en bra artikel, bara för att se den få lite genomslag online.

Under åren av att växa WPBeginner har vi lärt oss att ju enklare du gör det för människor att dela ditt innehåll, desto mer kommer de att göra det.

Twitter (X) är fortfarande en av de mest effektiva plattformarna för att sprida ditt innehåll och bygga synlighet.

Därför är WPBeginner-teamet aktivt på Twitter, och vi ser till att vårt innehåll är lätt att dela! I den här guiden visar jag dig två enkla, kodfria sätt att lägga till Twitter-delnings- och retweet-knappar på din WordPress-webbplats för att uppmuntra social delning på dina egna inlägg. 🤳

Varför lägga till Twitter-delnings- och retweet-knappar i WordPress?

Enligt färsk marknadsföringsstatistikforskning har Twitter (X) över 250 miljoner aktiva användare per månad. Det gör det till en utmärkt plats att marknadsföra din webbplats.

Att dela ditt innehåll på sociala medier når dock bara användare som redan följer ditt konto. Om du vill nå en ny publik, då behöver du få folk att dela och retweeta ditt innehåll.

Detta kan öka din bloggtrafik genom att introducera ditt varumärke för personer som kanske inte har varit medvetna om din webbplats. Att återpublicera ditt innehåll är också en kraftfull form av sociala bevis. När någon delar ett inlägg eller en tweet med sina följare, ses det ofta som ett godkännande.

Med det sagt, låt oss titta på hur enkelt det är att lägga till X-delnings- och retweet-knappar i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Method 1: Add a Twitter Share Button With Novashare (Straightforward)
  • Steg 1: Installera och aktivera Novashare
  • Steg 2: Skapa din Twitter-delningsknapp
  • Steg 3: Anpassa utseendet på delningsknappen
• Method 2: Let Users Retweet Your Tweets With Smash Balloon (Feature-Rich Option)
  • Steg 1: Konfigurera Twitter Feed Pro
  • Steg 2: Skapa ett live Twitter-flöde för WordPress
  • Steg 3: Anpassa ditt WordPress Twitter-flöde
  • Steg 4: Lägg till ditt Twitter-flöde i WordPress
• Lär dig fler sätt att använda Twitter i WordPress

Metod 1: Hur man lägger till en Twitter-delningsknapp i WordPress med Novashare

Enligt min erfarenhet är det enklaste sättet att lägga till en Twitter (X) delningsknapp till WordPress att använda pluginet Novashare. Det är ett av de bästa sociala mediepluginsen för WordPress som låter dig lägga till alla typer av delningsknappar på din webbplats. Detta inkluderar LinkedIn, Facebook och X.

💡 Obs: WPBeginner-teamet gjorde omfattande forskning om detta plugin, och du kan läsa allt om det i vår omfattande Novashare-recension.

Till skillnad från andra skrymmande plugins är Novashare prestandafokuserat och fungerar utmärkt med många populära WordPress-teman. Detta gör det perfekt för webbplatsägare som bryr sig om sidans hastighet, stil och enkelhet.

Steg 1: Installera och aktivera Novashare

Det första steget är att installera och aktivera pluginet.

Du måste köpa Novashare-pluginet från officiella Novashare-webbplatsen.

Därefter kan du helt enkelt följa utcheckningsprocessen för att komma till din Novashare-instrumentpanel.

Sedan ser du din köpbekräftelse, där du kan hitta Novashare-licensnyckeln, samt .zip-filen.

Ladda bara ner filen, kopiera din licensnyckel och spara den någonstans säkert.

Gå sedan till ditt WordPress-administratörsområde och välj Plugins » Add New för att installera pluginet.

Du kan ladda upp Novashare .zip-filen och klicka på ‘Installera nu’ för att starta processen, följt av ‘Aktivera’. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering vill du aktivera din licensnyckel. Du kan göra detta genom att gå till Inställningar » Novashare.

På nästa skärm kan du klicka på 'Licens'.

Därefter anger du helt enkelt din nyckel i fältet och klickar på 'Spara licens'.

När det är gjort är du redo att skapa din Twitter-delningsknapp med Novashare.

Steg 2: Skapa din Twitter-delningsknapp

För att skapa knappar för delning i sociala medier i Novashare kan du arbeta i antingen under-menyn 'Inline Content' eller 'Floating Bar'.

Undrar du vad det betyder? Här är de viktigaste skillnaderna:

• Innehåll på rad: Som standard använder dessa medelstorlek och visar knappen högst upp eller längst ner (eller båda) – beroende på vad du väljer. Du kan också placera dem var som helst på din sida med hjälp av ett block eller en kortkod.

• Flytande fält: Dessa visas på vänster sida av skärmen på datorer och fäster vid botten på mobiler. De använder standardmässigt den lilla knappstorleken, men placeringen kan skifta lite beroende på din skärmstorlek.

För den här guiden kommer jag att använda stilen 'Inline content', så jag kommer att växla omkopplaren för att aktivera den.

Alternativt kan du gå till fliken Flytande fält och aktivera den.

När du har aktiverat din föredragna delningsknapp, leta efter sektionen 'Social Networks' nedanför den. Klicka här på X-ikonen för att välja den.

Det var allt! Men innan du sparar den här inställningen vill du anpassa din Twitter-delningsknapp.

Steg 3: Anpassa utseendet på delningsknappen

Om du skrollar ner i fliken ‘Inline Content’ hittar du flera alternativ för att anpassa hur din Twitter (X) delningsknapp ser ut och var den visas på din webbplats.

I avsnittet ‘Display’ kan du välja vilka inläggstyper som ska visa Twitter-delningsknappen. Markera bara de rutor du vill ha. Till exempel, för den här handledningen aktiverar jag den för ‘Inlägg’.

Därefter kan du bestämma var knappen visas – ovanför innehållet, under innehållet, eller både ovanför och under innehållet.

Funktionen 'Visa i flöden' låter dig visa knappar även inuti RSS-flöden.

Sedan ställer 'Mobil brytpunkt' in när mobilstilen aktiveras, till exempel 1200px. Under tiden kontrollerar inställningen 'Dölj ovanför/nedanför brytpunkt' knappens synlighet baserat på skärmstorlek.

Längre ner på sidan hittar du underavsnittet 'Design'. Här är vad du kan anpassa:

• Knappstil: Solid, Omvänd, Kantad etikett, Kantad knapp, Minimal etikett, Minimal
• Knapplayout: Automatisk bredd, 1-6 kolumn(er)
• Knappjustering: Vänster, Höger, Center
• Knappstorlek: Liten, Mellan, Stor
• Knappform: Fyrkantig, Rundad, Cirkulär

Efter det kanske du vill ändra knappfärgen. Om så är fallet, flytta helt enkelt runt färgvalsverktyget för att välja en färg.

För den här handledningen har jag aktiverat funktionen 'Invertera vid hovring' för att ge knappen en mer interaktiv känsla. Detta lägger till en hovringseffekt, där knappens färger vänds när någon hovrar över den – vilket ger användarna en visuell signal om att den är klickbar.

För att göra det ännu mer intressant kan du välja knappens hovringsfärg med hjälp av färgvalverktyget. Det finns även inställningar för att justera knappens marginal och visning av etiketten.

Strax under avsnittet 'Design' hittar du 'Delningsantal'.

Här kan du visa det totala antalet delningar över alla nätverk. Och sedan kanske du vill ändra var det visas, som före eller efter knapparna. Du kan också justera färgen för att matcha din WordPress-webbplats.

Vill du också visa delningar per plattform? Aktivera gärna 'Nätverksdelningsantal'.

Med det sagt, tänk på att vissa sociala medier-plattformar inte längre stöder data om delningsantal. Så de kanske inte visar en siffra.

Slutligen hittar du avsnittet 'Call to Action'.

Det låter dig lägga till en kort textetikett för att guida läsarna om vad knappen gör – som "Dela det här inlägget" eller "Tweeta nu."

Du kan också anpassa teckenstorlek och färg för att matcha din webbplats stil.

Efter att ha gjort dina justeringar kan du klicka på knappen 'Spara ändringar'.

Och det är allt! Novashare kommer omedelbart att visa Twitter (X) delningsknappen på dina inlägg. Här är ett exempel från min testwebbplats:

Metod 2: Hur man låter användare retweeta dina tweets i WordPress med Smash Balloon

Om du vill lägga till en enkel delningsknapp på en sida eller ett inlägg, är Novashare ett bra alternativ. Du kanske dock också vill uppmuntra besökare att retweeta dina senaste tweets. Detta kan ge dig mer engagemang och sprida ditt innehåll ännu längre.

Det bästa sättet att få fler retweets är att använda Smash Balloon Twitter Feed Pro. Detta Twitter-flödesplugin låter dig lägga till hela ditt Twitter (X)-flöde till vilken sida, inlägg eller widget-redo område som helst.

💡 Notering: För mer information om pluginet, kolla in WPBeginner-teamets fullständiga Smash Balloon-recension.

Varje tweet har sin egen meny för Twitter-åtgärder.

Det här innebär att besökare helt enkelt kan posta om en tweet genom att klicka på dess 'retweet'-knapp.

Ännu bättre, flödet uppdateras automatiskt, så det finns alltid nya tweets för besökare att engagera sig i. Detta kan hjälpa till att hålla din webbplats fräsch och intressant, även för frekventa besökare.

Steg 1: Konfigurera Twitter Feed Pro

Först måste du skapa ett SmashBalloon-konto på deras webbplats. Klicka helt enkelt på knappen 'Kom igång', välj en plan och följ instruktionerna på skärmen för att slutföra processen.

När du har slutfört registreringen får du din egen Smash Balloon-instrumentpanel och en licensnyckel. Härifrån kan du antingen ha fliken öppen eller kopiera din licensnyckel till en säker plats. Du kommer att behöva den snart.

När det är gjort är det dags att installera och aktivera SmashBallons Twitter Feed Pro.

Från din WordPress-administratörspanel, låt oss gå till Plugins » Lägg till nytt plugin.

På nästa skärm, låt oss använda sökfältet för att snabbt hitta Smash Balloon Twitter Feed-pluginet.

I sökresultatet, klicka på 'Installera nu' och sedan 'Aktivera'.

Om du behöver hjälp, se WPBeginners guide om hur man installerar ett WordPress-plugin.

När du har installerat pluginet, gå till Twitter Feed » Inställningar. Du kan nu ange din Smash Balloon-licensnyckel i fältet 'Licensnyckel'.

Du hittar denna information i bekräftelsemejlet du fick när du köpte Smash Balloon och i ditt Smash Balloon-konto.

Efter att ha lagt till din licensnyckel, klicka på knappen 'Aktivera'.

Steg 2: Skapa ett live Twitter-flöde för WordPress

När du har gjort det är du redo att skapa ett anpassat Twitter-flöde. För att komma igång, gå till Twitter Feed » All Feeds och klicka sedan på knappen 'Add New'.

Om det här är första gången du lägger till ett Twitter-flöde med Smash Balloon, kommer du att bli ombedd att verifiera din e-postadress.

Klicka bara på knappen ‘Anslut’ för att göra det och följ instruktionerna på skärmen.

När det är klart återgår du till plugin-sidan. Smash Balloon kommer nu att visa alla olika typer av Twitter-flöden du kan skapa.

Eftersom du vill ha fler retweets, välj bara 'User Timeline' och klicka på 'Next.'

På nästa skärm måste du skriva in @-symbolen följt av namnet på ditt Twitter (X) konto.

När du är redo, klicka på 'Nästa' för att öppna huvudredigeraren för Smash Balloon.

Välj sedan mallen som ska användas i ditt Twitter-flöde.

Du kan till exempel visa dina tweets i en responsiv slider genom att välja 'Simple Carousel'. Om du bara vill marknadsföra din senaste tweet, kan du istället välja mallen 'Latest Tweet'.

Jag kommer att använda mallen 'Standard' för den här handledningen, men du kan välja vilken mall du vill.

Efter att du har fattat ditt beslut klickar du på 'Nästa'.

Smash Balloon kommer nu att visa en förhandsgranskning av sociala medieflödet, redo för dig att anpassa.

Steg 3: Anpassa ditt WordPress Twitter-flöde

Inte nöjd med hur mallen ser ut? För att ändra den, välj helt enkelt ‘Mall’ från menyn till vänster.

Du kan sedan klicka på knappen 'Ändra'.

Detta öppnar ett popup-fönster där du kan välja en ny layout.

Välj helt enkelt en ny mall och klicka sedan på ‘Uppdatera’.

När det är gjort måste du klicka på länken ‘Anpassa’.

Detta tar dig tillbaka till Smash Balloon-huvudinställningarna.

Nästa alternativ i menyn till vänster är 'Feed Layout', så klicka på det.

Här kan du ändra höjden på Twitter-flödet och antalet tweets som besökaren initialt ser. Du kan också växla mellan en Grid, Masonry eller Carousel-layout.

När du gör ändringar uppdateras förhandsgranskningen automatiskt, så du kan prova olika inställningar för att se vad som ser bäst ut.

Beroende på vilken layout du använder kan du ändra hur många kolumner Smash Balloon visar på datorer, surfplattor och mobila enheter.

Smartphones och surfplattor har vanligtvis mindre skärmar och mindre processorkraft, så du kanske vill visa färre kolumner på mobila enheter. Detta kan hjälpa dig att hålla din webbplats mobilvänlig.

För att anpassa detta baserat på enhet, använd helt enkelt rullgardinsmenyerna i avsnittet ‘Kolumner’.

När du är nöjd med hur flödets layout är inställd, klicka på länken ‘Anpassa’ igen för att återgå till huvudinställningsskärmen.

Här kan du klicka på 'Färgschema'.

Som standard använder Smash Balloon de färger som ärvs från ditt WordPress-tema, men du kan istället byta till ett 'Light' eller 'Dark'-färgschema.

Ett annat alternativ är att skapa din egen färgpalett genom att välja 'Anpassad' och sedan använda kontrollerna för att ändra bakgrundsfärgen, ändra textfärgen och mer.

När du är nöjd med dina ändringar, klicka på länken ‘Anpassa’ igen. Tillbaka på huvudinställningsskärmen måste du klicka på ‘Rubrik.’

Som standard lägger Smash Balloon till en 'Standard'-rubrik till flödet, som visar en 'Följ'-knapp och din Twitter-bio, om tillgänglig.

Om du vill dölja Twitter-biografin, klicka för att inaktivera växlingsknappen 'Visa bio'.

Ett annat alternativ är att välja 'Text', vilket lägger till en rubrik 'Vi finns på Twitter' till flödet.

Du kan ersätta detta med ditt eget meddelande genom att skriva det i rutan 'Text.'

När du är nöjd med meddelandena kan du ändra rubrikens storlek och färg.

Därefter, gå tillbaka till huvudinställningsskärmen för Smash Balloon och välj 'Tweets'. Här kan du välja mellan 'Tweet Style' och 'Edit Individual Elements'.

Om du väljer ‘Tweet Style’, kan du sedan välja mellan rutnät och vanliga layouter.

Om du väljer 'Boxed' kan du skapa en färgad bakgrund för varje tweet. Du kan också göra hörnradien större för att skapa rundade hörn eller lägga till en skuggning.

Om du väljer 'Vanlig' kan du ändra tjockleken och färgen på linjen som separerar dina olika inlägg på sociala medier.

När du är nöjd med dina ändringar klickar du helt enkelt på 'Tweets.'

Detta tar dig tillbaka till föregående skärm.

Den här gången kan du klicka på 'Redigera enskilda element'.

Du kommer nu att se allt innehåll som Twitter Feed Pro inkluderar i varje tweet, såsom författaren, tweet-texten, Twitter-logotypen och mer.

För att få så många retweets som möjligt är det en bra idé att få retweet-ikonen att sticka ut. För att göra detta, klicka på pilen bredvid ‘Tweet-åtgärder.’

Här kan du göra tweet-åtgärderna större med hjälp av rullgardinsmenyn 'Storlek' och ändra färgen.

Var bara medveten om att Smash Balloon kommer att tillämpa dessa ändringar på alla tweet-åtgärder och inte bara på ‘retweet’-ikonen.

När du är nöjd med hur tweet-åtgärderna ser ut, klicka bara på texten 'Element'.

Detta tar dig tillbaka till föregående skärm.

Upprepa bara denna process för att anpassa alla andra enskilda element.

Du kan också dölja ett element genom att avmarkera dess ruta.

Att dölja onödigt innehåll är ett annat knep som kan hjälpa retweet-åtgärden att sticka ut.

När du är nöjd med hur tweetsen ser ut kan du återgå till huvudinställningsskärmen för Smash Balloon och välja ‘Ladda mer knapp.’

Eftersom det är en så viktig knapp, kanske du vill anpassa den genom att ändra dess bakgrundsfärg, hovringsstatus, etikett och mer för att matcha din webbplats design.

Du kan också ersätta standardtexten 'Ladda mer' med ditt eget meddelande genom att skriva det i fältet 'Text'.

Ett annat alternativ är att aktivera oändlig scrollning så att nya tweets visas automatiskt när besökare når slutet av flödet. Detta uppmuntrar besökare att utforska fler av dina tweets och kan ge dig några extra retweets.

För att aktivera den här funktionen, klicka helt enkelt på reglaget 'Oändlig scrollning' så att det ändras från grått (inaktiverat) till blått (aktiverat).

Du kan också ändra 'Trigger Distance', som talar om för Smash Balloon när nya tweets ska laddas. Standardinställningarna bör dock fungera bra för de flesta WordPress-webbplatser.

Därefter är det sista alternativet på huvudskärmen för Smash Balloon-inställningar 'Lightbox'.

Som standard tillåter Twitter Feed Pro besökare att bläddra igenom flödets bilder och videor i ett lightbox-fönster.

Detta kan ge dig några extra retweets, eftersom besökare kan få en närmare titt på flödets bilder och titta på dina videor utan att lämna webbplatsen.

Med det i åtanke rekommenderar jag att du lämnar ljuslådan aktiverad.

Om du däremot vill inaktivera den här funktionen, klickar du helt enkelt på den blå 'Enable'-växlingsknappen så att den blir grå.

När du är nöjd med hur Twitter-flödet ser ut, glöm inte att klicka på 'Save.' Därefter är du redo att bädda in Twitter-flödet och retweet-knapparna på din WordPress-webbplats.

Steg 4: Lägg till ditt Twitter-flöde i WordPress

Du kan lägga till Twitter-flödet till din webbplats med antingen en kortkod eller Twitter Feed-blocket. Eftersom det är den enklaste metoden, låt oss först se hur du kan lägga till flödet till vilken sida eller inlägg som helst med Smash Balloon-blocket.

Om du har skapat mer än en feed, måste du hitta koden för den feed du vill bädda in.

För att få denna information, gå till Twitter Feeds » All Feeds och kopiera koden i kolumnen ‘Shortcode’. Du kommer att behöva lägga till denna kod på din webbplats, så notera den.

I följande bild behöver du använda [custom-twitter-feeds feed=2]

Därefter öppnar du helt enkelt sidan eller inlägget där du vill bädda in Twitter-flödet. Klicka sedan på ‘+’-ikonen för att lägga till ett nytt block och börja skriva ‘Twitter Feed’.

När rätt block visas, klicka för att lägga till det i blogginlägget.

Blocket visar som standard ett av dina Twitter-flöden. Om du vill använda ett annat flöde, leta reda på 'Kortkodinställningar' i menyn till höger.

Här lägger du helt enkelt till kortkoden och klickar sedan på 'Verkställ ändringar'.

Blocket kommer nu att visa din Twitter-feed, och du kan helt enkelt publicera eller uppdatera inlägget för att göra det live på din webbplats.

Ett annat alternativ är att lägga till flödet till ett widget-redo område eller ett designelement som täcker hela webbplatsen, till exempel sidofältet. Detta gör att besökare kan retweeta dina senaste inlägg från vilken sida som helst på din webbplats.

Om du använder ett blocktema, kan du lägga till Twitter Feed-blocket direkt i en av dina mallar eller mallkomponenter i Full Site Editor, med samma metod som jag visade för en sida eller ett inlägg.

För detaljerade instruktioner om hur du gör detta, se vår nybörjarguide till WordPress fullständiga webbplatsredigering.

Om du inte använder ett blocktema måste du gå till Utseende » Widgetar i WordPress-instrumentpanelen och sedan klicka på den blå '+'-knappen.

När du har gjort det behöver du skriva in 'Twitter Feed' för att hitta rätt widget.

Dra det sedan till det område där du vill visa flödet och retweet-knapparna.

Widgeten kommer att visa ett av de flöden du skapat med Smash Balloon.

För att visa ett annat Twitter-flöde istället, skriv in flödets kod i rutan ‘Shortcode Settings’ och klicka sedan på ‘Apply Changes.’

Du kan nu klicka på knappen 'Uppdatera' för att göra widgeten live. För mer information, se vår steg-för-steg-guide om hur man lägger till och använder widgets i WordPress.

Slutligen kan du bädda in flödet och retweet-knapparna på vilken sida, inlägg eller widget-redo område som helst med hjälp av en kortkod.

Gå helt enkelt till Twitter Feed » Alla flöden och kopiera koden i kolumnen 'Kortkod'. Du kan nu lägga till kortkoden i valfritt widget-redo område på din webbplats.

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

Lär dig fler sätt att använda Twitter i WordPress

Jag hoppas att den här artikeln hjälpte dig att lägga till Twitter-delnings- och retweet-knappar i WordPress.

Vill du få ut mesta möjliga av din Twitter (X)-profil för att marknadsföra din WordPress-webbplats? Eller kanske du vill lägga till mer Twitter-innehåll på din webbplats?

Kolla in dessa guider nedan:

• Nybörjarguide om hur man lägger till Twitter-kort i WordPress
• Hur man fixar trasiga Twitter-kortbilder i WordPress
• Hur man marknadsför din Twitter-sida i WordPress med en popup
• Hur man visar antal Twitter-följare och mer i WordPress
• Hur man lägger till en betala med en tweet-knapp för filnedladdningar i 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.