Så här skapar du knappar för sociala medier för alla större nätverk

  • Dela Detta
Kimberly Parker

Innehållsförteckning

Att uppmuntra social delning bland dina kunder och fans kan vara ett bra sätt att öka din räckvidd på nätet. Men ingen kommer att dela ditt innehåll om det är jobbigt att göra det.

Glöm att få folk att kopiera och klistra in länkar. Med lite enkel kod kan du lägga till knappar för sociala medier som gör att användarna kan dela ditt innehåll på nätet med bara några få klick.

Innehållsförteckning

Typer av knappar för sociala medier

Knappar för sociala medier för Facebook

Knappar för sociala medier för Instagram

Knappar för sociala medier för LinkedIn

Knappar för sociala medier för Twitter

Knappar för sociala medier för YouTube

Knappar för sociala medier för Pinterest

Knappar för sociala medier för SMMExpert

Typer av knappar för sociala medier

De vanligaste typerna av knappar för sociala medier har funktioner för att dela, gilla och följa. Alla har olika syften och hur de fungerar varierar något mellan olika nätverk. Men varje typ gör i allmänhet det som namnet antyder:

  • Dela knappar låta användarna dela ditt innehåll med vänner och följare
  • Gilla knappar Låt dem ge ditt innehåll en virtuell tumme upp.
  • Följ knappar prenumererar på dina uppdateringar på det angivna sociala nätverket.

Alla knappar för sociala medier i det här inlägget är aktiva, så du kan interagera med dem för att se exakt hur de fungerar. Vi skapade dem med hjälp av de verktyg som beskrivs för varje socialt nätverk nedan.

Knappar för sociala medier för Facebook

Facebook har flera knappar för sociala medier: dela, följ, gilla, spara och skicka.

Dela-knappen på Facebook

Hur det fungerar

Genom att lägga till en Facebook-delningsknapp på din webbplats kan besökarna dela ditt innehåll med sina vänner och följare på Facebook. De kan välja att dela ditt innehåll på sin tidslinje, till en grupp eller till och med i ett privat meddelande via Facebook Messenger. Användarna kan också lägga till ett eget personligt meddelande till det delade innehållet innan de publicerar det.

Så här lägger du till en delningsknapp på Facebook

Använd Facebooks konfigurator för delningsknappar för att skapa kod för delningsknappar som du kan klistra in i HTML-koden på din webbplats.

Alternativ för delningsknappen på Facebook

När du har en delningsknapp för Facebook på din webbplats kan du välja om du vill visa hur många gånger sidan redan har delats (som vi gjorde med knappen ovan). Om din sida får många sociala delningar kan det här antalet vara ett bra socialt bevis på värdet av ditt innehåll.

Följ-knappen på Facebook

Hur det fungerar

Med följ-knappen kan användare prenumerera på offentliga uppdateringar från den aktuella Facebook-sidan.

Så här lägger du till en Facebook-följ-knapp

Använd Facebooks gränssnitt för följ-knappen för att skapa en kod som du kan kopiera och klistra in i din HTML.

Alternativ för Facebooks följ-knapp

Du kan välja att visa antalet personer som redan följer din sida genom att välja alternativen "box count" eller "button count". För personliga sociala bevis kan du välja att visa besökarna vilka av deras befintliga Facebook-vänner som redan följer din sida, och till och med visa dessa följares ansikten, genom att välja alternativet "standard" och klicka på rutan Visa ansikten.

Facebook Gilla-knappen

Hur det fungerar

Att klicka på gilla-knappen på din webbplats har samma effekt som att klicka på gilla på ett av dina Facebook-inlägg. Det gillade innehållet visas på användarens Facebook-tidslinje och kan visas i deras vänners nyhetsflöde.

Hur du lägger till en Facebook Like-knapp

Gå till Facebooks konfigurator för gilla-knappen för att skapa koden som du kan kopiera och klistra in i din HTML-kod.

Alternativ för Facebook Gilla-knappen

Precis som med de andra Facebook-knapparna kan du välja att visa hur många gånger sidan redan har gillats. Du kan också tillhandahålla en anpassad knapp som visar vilka av tittarens Facebook-vänner som redan har gillat sidan.

Ett extra intressant alternativ är att du kan välja att knappen ska säga "rekommendera" i stället för "gilla".

Spara till Facebook-knappen

Hur det fungerar

Knappen Spara till Facebook fungerar precis som alternativet Spara på Facebook-inlägg. Den sparar länken till en användares privata lista så att de kan gå tillbaka till den senare - i stort sett som ett bokmärke på Facebook och gör det enkelt att dela den senare.

Så här lägger du till en Save to Facebook-knapp

Använd Facebooks konfigurator för Spara-knappen för att skapa koden som du ska klistra in i din HTML-kod.

Facebooks sändningsknapp

Hur det fungerar

Med Facebooks sändningsknapp kan användarna skicka innehåll från din webbplats direkt till sina vänner via ett privat meddelande på Facebook Messenger, en form av mörk social delning.

Så här lägger du till en Facebook-sändningsknapp

Du gissade rätt - Facebook har en konfigurator för sändningsknappen som ger dig koden som du behöver klistra in i din HTML-kod.

Knappar för sociala medier för Instagram

Instagram har inga knappar för att dela eller gilla, vilket är logiskt eftersom Instagram är en mobil plattform för delning av foton och videor som inte lämpar sig för att gilla och dela webbinnehåll.

I stället erbjöd Instagram tidigare märken som du kunde använda för att skicka personer från din webbplats direkt till ditt Instagramflöde, men dessa märken finns inte längre tillgängliga. Förändringar i Instagrams API har också gjort det svårt för tredjepartsleverantörer att skapa funktionella Instagramknappar och märken.

Det betyder att du har väldigt få alternativ när det gäller knappar för social delning för Instagram. Men det finns en lösning, och den är enkel: bädda in ett Instagram-inlägg.

Förutom fotot innehåller det inbäddade inlägget en aktiv följ-knapp som gör det möjligt för användare att följa ditt konto utan att lämna din webbplats. Du kan till och med lägga upp ett foto på Instagram som du använder specifikt för detta ändamål - något slags ständigt pågående inlägg som lyfter fram värdet av ditt Instagram-konto.

Visa det här inlägget på Instagram

Ett inlägg delat av SMMExpert (@hootsuite)

Eller så kan du skapa ett Instagram-inlägg som har direkt anknytning till innehållet på en viss sida. Du vill naturligtvis inte göra det här på alla dina webbsidor, men att bädda in ett relevant Instagram-foto kan vara ett bra alternativ i blogginlägg.

Så här bäddar du in ett Instagram-inlägg med en följ-knapp

  1. Navigera till det specifika inlägget som du vill bädda in, eller gå till din Instagram-profil och bläddra tillbaka för att hitta ett relevant val.
  2. Klicka på inlägget
  3. Klicka på knappen Mer ( ... ) längst ner till höger
  4. Välj Bädda in
  5. Välj om du vill inkludera bildtexten och klicka sedan på Kopiera inbäddningskoden
  6. Lägg in koden i din HTML

Knappar för sociala medier för LinkedIn

LinkedIn erbjuder skräddarsydd JavaScript-kod för både dela och följa-knapparna.

Dela-knappen på LinkedIn

Hur det fungerar

Delningsknappen på LinkedIn kombinerar funktionerna i Facebooks delnings- och sändningsknappar. Den gör det möjligt för användare att dela ditt innehåll på LinkedIn på flera olika sätt - på sin offentliga profil, med sina kontakter, i en grupp eller i ett meddelande till en eller flera personer. Om du klickar på knappen öppnas ett popup-fönster med möjlighet att lägga till ett personligt meddelande till inlägget och alternativ för delning.

Så här lägger du till en delningsknapp på LinkedIn

Gå till LinkedIn share plugin-generatorn för att skapa JavaScript-kod som du kan klistra in i din HTML.

Alternativ för delningsknappen på LinkedIn

Du kan välja om du vill visa hur många gånger ditt innehåll redan har delats på LinkedIn.

Följ-knappen på LinkedIn

Hur det fungerar

Om du klickar på LinkedIn-knappen för att följa ditt företag på LinkedIn kan användarna följa ditt företag på LinkedIn utan att lämna din webbplats.

Så här lägger du till en LinkedIn-knapp för att följa

Använd LinkedIn follow company plugin-generatorn för att skapa en kod som du kan klistra in i din HTML.

Alternativ för LinkedIn-knappen för att följa

Precis som med LinkedIns delningsknapp kan du välja att visa hur många som redan följer ditt företag på LinkedIn som en del av följeknappen.

Men det finns också ett mer intressant alternativ att utforska. Pluginprogrammet för företagsprofil fungerar på ungefär samma sätt som en enkel följ-knapp, men ger mer information om ditt företag när du bara håller musen över den. Om du vill prova det, försök att hålla musen över knappen nedan.

Du kan skapa en egen med hjälp av LinkedIns plugingenerator för företagsprofiler.

Knappar för sociala medier för Twitter

Förutom de vanliga delnings- och följ-knapparna erbjuder Twitter knappar för att twittra med en viss hashtag eller för att @-nämna någon med ett klick på musen. Det finns också en knapp som gör att någon kan skicka ett privat Twitter-meddelande till dig.

Knapp för delning på Twitter

Hur det fungerar

När en användare klickar på Tweet-knappen öppnas ett popup-fönster med en Tweet som innehåller sidans titel och dess URL - eller så kan du ange en egen URL. Med en egen URL kan du inkludera UTM-parametrar för att spåra hur mycket trafik du får från din Twitter-delningsknapp. Användaren kan lägga till mer text om han eller hon vill innan han eller hon skickar Tweeten.

Så här lägger du till en Twitter-delningsknapp

  1. Gå till publish.twitter.com, bläddra ner och klicka på Twitter-knappar
  2. Klicka på Dela-knappen
  3. Ovanför kodrutan klickar du på ställa in anpassningsalternativ
  4. Ange dina preferenser för Tweet-alternativ och knappstorlek och klicka sedan på Uppdatera
  5. Kopiera och klistra in den medföljande koden i din HTML

Alternativ för Twitter-delningsknappen

Med hjälp av anpassningsalternativen kan du välja att inkludera en hashtag och ett "via"-användarnamn, vilket garanterar att du får erkännande som källan till ditt fantastiska innehåll. Du kan också välja att fylla i viss text i förväg.

Följ-knappen på Twitter

Hur det fungerar

Twitter-följarknappen är inte lika effektiv som Facebook-följarknappen, eftersom den kräver två klick från användarna. När du klickar på knappen öppnas ett popup-fönster med en förhandsgranskning av din Twitter-profil. Användaren måste klicka på Följ igen i popup-fönstret för att slutföra processen.

Så här lägger du till en Twitter-följ-knapp

  1. Gå till publish.twitter.com, bläddra ner och klicka på Twitter-knappar
  2. Klicka på Följ-knapp
  3. Ange ditt Twitter-adress, inklusive @-symbolen (t.ex. @SMMExpert).
  4. Klicka på Förhandsgranska
  5. Ovanför kodrutan klickar du på ställa in anpassningsalternativ
  6. Ange dina preferenser för Tweet-alternativ och knappstorlek och klicka sedan på Uppdatera
  7. Kopiera och klistra in den medföljande koden i din HTML

Alternativ för Twitter-följ-knappen

Du kan välja om ditt användarnamn ska visas eller döljas på knappen och om du vill att knappen ska vara liten eller stor. Du kan också välja vilket språk knappen ska visas på.

Knapp för att nämna Twitter

Hur det fungerar

När någon klickar på Twitter-knappen på din webbplats visas ett popup-fönster med en tom Tweet som börjar med ett @-namn på ditt användarnamn. Detta kan vara ett bra sätt att få läsarna att kontakta ditt team på Twitter eller att uppmuntra kundtjänstförfrågningar via nätverket.

Så här lägger du till en Twitter-knapp

  1. Gå till publish.twitter.com, bläddra ner och klicka på Twitter-knappar
  2. Klicka på Knapp för omnämnande
  3. Ange ditt Twitter-adress, inklusive @-symbolen (t.ex. @SMMExpert).
  4. Klicka på Förhandsgranska
  5. Ovanför kodrutan klickar du på ställa in anpassningsalternativ
  6. Ange dina preferenser för Tweet-alternativ och knappstorlek och klicka sedan på Uppdatera
  7. Kopiera och klistra in den medföljande koden i din HTML

Alternativ för Twitter-knappen för omnämnande

Du kan välja att förinföra viss text i tweeten, vilket kan vara en bra idé om du använder knappen på en kundtjänstsida. Du kan också välja om du vill att knappen ska vara stor eller liten och vilket språk som ska användas för att visa knapptexten.

Knapp för Twitter hashtag

Hur det fungerar

När någon klickar på en Twitter-hashtag-knapp på din webbplats öppnas ett popup-fönster med en Tweet med den valda hashtaggen. Detta är ett utmärkt sätt att uppmuntra människor att dela innehåll med din varumärkeshashtag eller motivera dem att delta i en Twitter-chatt.

Så här lägger du till en Twitter hashtag-knapp

  1. Gå till publish.twitter.com, bläddra ner och klicka på Twitter-knappar
  2. Klicka på Hashtag-knapp
  3. Ange den hashtag du valt, inklusive #-symbolen (t.ex. #HootChat).
  4. Klicka på Förhandsgranska
  5. Ovanför kodrutan klickar du på ställa in anpassningsalternativ
  6. Ange dina preferenser för Tweet-alternativ och knappstorlek och klicka sedan på Uppdatera
  7. Kopiera och klistra in den medföljande koden i din HTML

Alternativ för Twitter hashtag-knappen

Precis som med knappen omnämna kan du ange förfylld text, välja knappstorlek och ange på vilket språk knapptexten ska visas. Du kan också välja att inkludera en specifik URL, vilket kan fungera bra om du arkiverar dina Twitter-chattar eller samlar in användargenererat innehåll på en specifik sida. Du kan också välja en landningssida som är relevant för en specifik hashtag-kampanj.

Knapp för Twitter-meddelanden

Hur det fungerar

Med Twitter-meddelandeknappen kan användare skicka ett privat direktmeddelande till dig på Twitter. Observera att detta är en annan funktion än Facebooks sändningsknapp, som gör det möjligt för användare att skicka ditt innehåll i ett privat meddelande till alla som de är anslutna till. Med Twitter-meddelandeknappen kan användarna bara kontakta dig, inte någon annan på Twitter. Även om detta inte bidrar till att utöka din sociala räckvidd, kan detkan vara ett bra sätt att uppmuntra människor att kontakta din kundtjänst och dina säljteam via Twitter.

En Twitter-meddelandeknapp fungerar bäst om du har ställt in ditt konto så att det tillåter direkta meddelanden från vem som helst. Annars kan personer som inte följer dig inte skicka meddelanden till dig och kan känna sig frustrerade över ditt varumärke.

Så här lägger du till en Twitter-meddelandeknapp

  1. Logga in på ditt Twitter-konto
  2. I den vänstra kolumnen klickar du på Integritet och säkerhet
  3. Bläddra ner till Direktmeddelande och kryssa i rutan bredvid Ta emot direktmeddelanden från vem som helst
  4. I den vänstra kolumnen klickar du på Dina Twitter-data. Du kan behöva ange ditt lösenord för att komma åt den här skärmen.
  5. Välj och kopiera ditt användar-ID, som visas under ditt användarnamn.
  6. Gå till publish.twitter.com, bläddra ner och klicka på Twitter-knappar
  7. Klicka på Knapp för meddelanden
  8. Ange ditt användarnamn i den övre rutan, inklusive @-symbolen (t.ex. @SMMExpert).
  9. Klistra in ditt användar-ID i den nedre rutan
  10. Klicka på Förhandsgranska
  11. Ovanför kodrutan klickar du på ställa in anpassningsalternativ
  12. Ange dina preferenser för Tweet-alternativ och knappstorlek och klicka sedan på Uppdatera
  13. Kopiera och klistra in den medföljande koden i din HTML

Alternativ för knappen för Twitter-meddelanden

Du kan välja att fylla i texten i förväg, vilket kan fungera bra om knappen finns på en sida där det är troligt att folk kontaktar dig om en specifik produkt, kundtjänst eller kampanj. Du kan också välja om du vill visa ditt användarnamn på knappen, knappens storlek och vilket språk som ska visas i knapptexten.

Knappar för sociala medier för YouTube

YouTube erbjuder endast en knapp för sociala medier, som gör det möjligt för användare att prenumerera på en YouTube-kanal.

YouTube-prenumerationsknapp

Hur det fungerar

Precis som Twitter-knappen för att följa kräver YouTube-knappen för prenumeration två klick. När någon klickar på din prenumerationsknapp öppnas din YouTube-kanal i ett nytt fönster med en ruta för att bekräfta prenumerationen. Användaren måste sedan klicka på prenumeration igen för att prenumerationen ska träda i kraft.

Så här lägger du till en YouTube-prenumerationsknapp

Använd sidan Konfigurera en knapp på YouTube för att skapa den kod som du behöver för att klistra in i din HTML.

Alternativ för YouTube-prenumerationsknappen

Du har några alternativ när du konfigurerar din YouTube-prenumerationsknapp. Du har möjlighet att inkludera din YouTube-profilbild, en mörk bakgrund bakom knappen och om du vill visa ditt befintliga antal prenumeranter eller inte. Precis som i de andra nätverken kan det vara en bra signal för socialt bevis att lyfta fram ett stort antal prenumeranter.

Knappar för sociala medier för Pinterest

Pinterest spara-knappen

Hur det fungerar

Spar-knappen på Pinterest är likvärdig med delningsknappen i andra nätverk, eftersom du kan öka din räckvidd genom att spara ditt innehåll till en Pinterest-planka. Eftersom Pinterest är en bildbaserad plattform för att hålla reda på information och idéer fungerar den lite annorlunda än delningsknapparna i andra nätverk. Det finns tre olika sätt att konfigurera spar-knappen på Pinterest på din webbplats:

  1. Bild som svävar på bilden : I stället för att placera en fristående Pinterest-knapp på din webbplats skapar det här alternativet en kod som visar en Pin It-knapp när någon för musen över en bild på din sida. Det här är det alternativ som rekommenderas mest av Pinterest.
  2. Vilken bild som helst : Med det här alternativet placerar du en Pinterest-knapp på din webbsida. Om du klickar på den kan användaren välja att spara alla bilder från din webbplats på sin Pinterest-planka.
  3. En bild : I det här fallet gäller spar-knappen bara en enda bild på sidan. Det här är det mest komplicerade alternativet när det gäller kodning.

Så här lägger du till en Pinterest-sparknapp-bild som svävar över eller någon annan bildstil

  1. Gå till Pinterest widget builder och klicka på Spara-knapp
  2. Välj vilken typ av knapp du vill använda: bild som svävar över eller vilken bild som helst.
  3. Välj dina önskade alternativ för knappstorlek och form
  4. För musen över exempelbilden för att förhandsgranska din knapp.
  5. Kopiera knappkoden och klistra in den i din HTML-fil.
  6. För alternativet med valfri bild kopierar och klistrar du in skriptet pinit.js längst ner på sidan för widgetbyggaren i din HTML, precis ovanför taggen

Så här lägger du till en Pinterest-sparknapp - en bildstil

  1. Gå till Pinterest widget builder och klicka på Spara-knapp
  2. Välj dina önskade alternativ för knappstorlek och form
  3. I ett nytt webbläsarfönster går du till den sida på din webbplats där den bild du vill arbeta med finns.
  4. Kopiera och klistra in URL av denna webbsida i URL-rutan i widget builder
  5. På din webbsida högerklickar du på den bild du vill arbeta med och väljer Kopiera bildens URL
  6. Klistra in bildens URL i Bild rutan i widget builder
  7. Ange en beskrivning av bilden i fältet Beskrivning rutan i widgetbyggaren. Den visas under bilden när någon sparar den på Pinterest.
  8. Klicka på exemplet Fäst den knappen i widgetbyggaren för att testa din knapp.
  9. Kopiera knappkoden och klistra in den i din HTML-fil.
  10. Kopiera och klistra in skriptet pinit.js längst ner på sidan för widgetbyggaren i din HTML, precis ovanför taggen

Alternativ för Pinterest-knappen för att spara

Förutom att välja vilken typ av knapp du vill använda kan du anpassa knappens form (rund eller rektangulär), storlek (liten eller stor) och språk. Du kan också välja om du vill visa det befintliga antalet pin-adresser för din bild.

Följ-knappen för Pinterest

SMMExpert

Hur det fungerar

När någon klickar på knappen Följ Pinterest på din webbplats öppnas ett förhandsgranskningsfönster som visar dina senaste pins. De klickar sedan på knappen Följ i förhandsgranskningen för att börja följa ditt Pinterest-konto.

Så här lägger du till en Pinterest-knapp för att följa

  1. Gå till Pinterest widget builder och klicka på Följ
  2. Ange din Pinterest-profil URL
  3. Ange ditt företagsnamn så som du vill att det ska visas på knappen.
  4. Kopiera knappkoden och klistra in den i din HTML-fil.
  5. Kopiera och klistra in skriptet pinit.js längst ner på sidan för widgetbyggaren i din HTML, precis ovanför taggen

Alternativ för Pinterest-knappen för att följa

Ditt enda alternativ med Pinterest-knappen för att följa är hur du ska visa ditt företagsnamn. Du kan använda ditt användarnamn på Pinterest eller ditt fullständiga företagsnamn. Håll dig i vilket fall som helst till något som är lätt att förstå för användarna.

Knappar för sociala medier för SMMExpert

SMMExpert erbjuder en knapp för sociala medier som gör det möjligt för användarna att dela ditt innehåll till alla nätverk som de har kopplat till sin SMMExpert-instrumentpanel.

SMMExpert delningsknapp

Hur det fungerar

När en användare klickar på SMMExpert-knappen på din webbplats öppnas ett fönster med ett gränssnitt som innehåller en länk till ditt innehåll. Användaren kan välja vilka sociala nätverk han/hon vill dela det till: Twitter, Facebook, LinkedIn, Google+ eller alla dessa. Han/hon kan lägga till ett personligt meddelande innan han/hon delar det och bestämma om han/hon vill lägga upp det direkt, planera inlägget till en viss tidpunkt i framtiden eller användaSMMExperts funktion för automatisk schemaläggning.

Hur du lägger till en SMMExpert-delningsknapp

Gå till hootsuite.com/social-share, ange din URL och kopiera och klistra in koden i din HTML.

SMMExperts alternativ för aktieknappen

Du kan välja mellan flera olika knappstilar.

Ta dina kunskaper om sociala medier till nästa nivå med gratis onlineutbildning och videor från SMMExpert Academy. .

Kom igång

Kimberly Parker är en erfaren digital marknadsföringsproffs med över 10 års erfarenhet i branschen. Som grundare av sin egen marknadsföringsbyrå för sociala medier har hon hjälpt många företag inom olika branscher att etablera och växa sin onlinenärvaro genom effektiva sociala mediestrategier. Kimberly är också en produktiv författare, efter att ha bidragit med artiklar om sociala medier och digital marknadsföring till flera välrenommerade publikationer. På fritiden älskar hon att experimentera med nya recept i köket och gå långa promenader med sin hund.