Så här addar du icons för social media i din sidebar i WordPress

Undrar you hur man addar social media icons till din sidebar i WordPress?

Att lägga till sociala icons på din website är ett enkelt sätt att låta din publik veta att du finns på sociala medier. På så sätt kan de enkelt besöka dina sociala profiler och följa you online.

I den här artikeln visar vi hur du addar icons för sociala media till din sidebar i WordPress.

Varför add to social media icons till din sidebar i WordPress?

En sidebar i WordPress är ett area på din website som ej är en del av huvudinnehållet. Det är där du kan visa ytterligare information som läsare kan vara intresserade av, till exempel dina senaste blogginlägg och länkar till dina sociala profiler.

Att lägga till sociala links i din sidebar i WordPress är en bra idé eftersom det berättar för användarna om dina konton i sociala media. Följaktligen kan de kontrollera dem, följa dig och hjälpa dig att öka antalet följare på dina sociala medier.

Dessutom kan det skapa en känsla av trovärdighet och fungera som ett socialt bevis om du displayed your social media accounts. När besökare ser att du har en aktiv närvaro på sociala medier visar detta att din ecommerce- eller företagssite är pålitlig.

Många populära WordPress bloggar visar social media icons i sina sidebar, gillar WPBeginner:

Följaktligen, låt oss ta en titt på hur du add to social media follow icons till din WordPress website’s sidebar.

Vilken metod du ska använda beror på vilket WordPress theme och vilken editor du använder. Om du vill hoppa till en viss section kan du använda dessa snabblänkar:

Metod 1: Lägga till sociala icons med full Site Editor (Block Themes)

Om du är en block theme användare, då kan du lägga till sociala media knappar till din WordPress sidebar med hjälp av Social Icons block.

Observera att processen varierar beroende på vilket theme du använder. Vissa block-teman kan innehålla en sidebar som standard, som du sedan kan add to Social Icons-blocket. Vissa kan också ha ett header-mönster som fungerar som ett sidebar, och vissa kanske inte har ett sidebar kl. alls.

I det här exemplet använder vi ett standardtema för WordPress och visar dig hur du skapar en sidebar för alla dina pages eller posts där du kan add to Social Icons-blocket.

Först går du till Appearance ” Editor i din WordPress adminpanel.

Därefter måste du selecta ”Templates”.

Detta kommer att ta dig till en page där du kan edit template av your pages and posts.

Här kan du välja en av templates för page. Det kan vara antingen ”Pages” eller ”Enskilda inlägg”, beroende på var du vill att sidebaren ska vara.

Om du vill att sidebaren ska visas på både dina statiska pages och posts kan du editera dem båda senare. You can also customize the homepage template in case you need the sidebar to appear there, too.

I det här fallet väljer vi ”Pages”.

Därefter klickar du på pennknappen i den vänstra panelen bredvid knappen med tre punkter.

Då öppnas WordPress Editor.

Som du kan se har standardtemat inte en sidebar i templaten Pages ännu, så vi måste skapa en för den.

För att göra detta kan du hovera över var du vill lägga till sidebar och klicka på knappen ”+” för att lägga till block när den visas. Hitta sedan och välj ”Columns”.

Det kommer att finnas några olika varianter att välja mellan.

I det här exemplet använder vi alternativet ”66 / 33” för att efterlikna standardutseendet för en höger sidebar.

När du har gjort det kan du dra and drop blocket Post Content till vänster om blocket Columns.

Din Pages template ska se ut ungefär som på bilden under, med den högra kolumnen tom.

Klicka nu på den högra column och välj knappen add block ’+’.

Sök sedan efter blocket Social Icons.

Du kan nu börja lägga till dina social media-plattformar i blocket. Simply click the ”+” button again and add your social media buttons one by one.

Använd gratis utvald funktion för att browsa igenom alla alternativ för sociala nätverk.

När du har lagt till alla knappar kan du börja lägga till customize länkar till dina sociala profiler.

Allt du behöver göra är att clicka på en social icon och enter din profil URL.

I det här skedet kan du customize hur iconerna ser ut.

Om storleken på knapparna inte är tillräckligt stor eller liten kan du använda alternativet ”Storlek” i blockets toolbar.

I Block Settings till vänster kan du customize ikonernas motivering, orientering, länkinställningar och etiketter.

Vi rekommenderar att du öppnar länkarna i en new tab så att användarna inte behöver lämna din website för att besöka dina sociala profiler.

Om du byter till tabben Block Styles kan du ändra icons stilar och färger så att de passar din WordPress website design.

Beroende på ditt alternativ kan du låta alla icons ha olika färger eller samma färg, som du gillar under.

Om du rullar ner på samma tabs hittar du inställningarna för Dimensions för att customize blockets marginal och avstånd.

Dessa Settings kan vara till hjälp om du vill justera avståndet mellan blocket Social Icons och andra block i sidebaren.

Det är också en bra idé att lägga till en call-to-action-text högst upp i blocket Social Icons för att markera var knapparna finns och uppmuntra användare att bli följare eller prenumeranter.

För att göra detta, gå vidare och lägg till ett Paragraph block med hjälp av ”+” knappen. Se till att det är ovanför de sociala iconerna.

Några exempel på call-to-action som du kan använda är ”Följ oss”, ”Gå med över X Läsare” eller ”Få de senaste updates”.

Om du inte redan har gjort det kan du också add to fler element i sidebaren, som gillar dina utvalda inlägg och senaste inlägg.

Nu klickar du bara på knappen ”Save” högst upp till höger på page.

Och det är allt!

När du går till din WordPress website bör du nu se en sidebar med några sociala links.

Om du vill skapa unika sidebars för olika pages eller posts, som all innehåller ett Social Icons block, rekommenderar vi att du skapar ett WordPress pattern eller återanvändbart block för din sidebar.

För att lära dig mer kan du kontrollera våra guider för nybörjare om hur du använder WordPress block patterns och hur du lägger till återanvändbara block.

Metod 2: Lägga till Social Media Icons med WordPress Widgets (Classic Themes)

Nästa metod är för personer som använder ett klassiskt WordPress-tema med widgetfärdiga sidebar-områden.

För att add to social media buttons to your sidebar, simply head to Appearance ” Widgets from your WordPress dashboard.

Navigera sedan till WordPress widget area där du vill add to widgeten Social Icons. I vårt exempel kommer vi att välja ”Sidebar”, men namnet kan vara annorlunda beroende på vilket theme you använder.

Klicka nu på knappen add block ”+” högst upp till vänster, bredvid ”Widgets”.

Här kan du leta efter blocket Social Icons.

Efter det måste du klicka på den här widgeten för sidebar eller drag and drop den var som helst i redigeringsområdet.

Allmänt sett är det bäst att add to dina sociala nätverksikoner högst upp i widgetens area. På så sätt kan de fånga dina besökares uppmärksamhet direkt från det ögonblick de landar på sidan.

Sedan kan du, på samma sätt som med den tidigare metoden, clicka på knappen ”+” för att add new social media-knappar en efter en till widgeten.

I exemplet under har vi placerat blocket Social Icons under blocket Search. Vi lägger också till en WhatsApp icon.

Nu kan du börja lägga till dina sociala links.

För WhatsApp kan du skriva ”wa.me/” och skriva ditt WhatsApp-nummer bredvid. Du behöver inte använda +-symbolen, men se till att add to ditt lands anropskod, som i den här screenshoten.

Du har också tillgång till alternativen Block Settings och Styles i den högra panelen.

För att öppna dessa alternativ kan du klicka på ikonen ”Settings” högst upp till höger.

Dessutom är du välkommen att lägga till ett Paragraph block högst upp på widgeten för sociala medier för din call-to-action-text.

Vi rekommenderar att blocken Paragraph och Social Icons görs till en grupp så att de inte ser separerade ut i sidebaren.

För att göra detta väljer du bara stycket och de sociala iconerna tillsammans. Därefter klickar du på ikonen ”Transform” i blockets toolbar och väljer ”Group”.

När du är slutförd, fortsätt och klicka på knappen ”Update” för att göra ändringarna officiella på alla dina sidebars.

Så här ska slutresultatet gilla att se ut:

Metod 3: Lägga till Custom Social Media Icons med SeedProd (Custom Themes)

Om du använder SeedProd får du mer control över hur dina knappar för social media ser ut i din sidebar. Om du till exempel använder en social media-plattform som WordPress inte har en icon för, kan du skapa en knapp för den själv.

Dessutom kan du justera avståndet mellan icons specifikt för mobila enheter.

Om du är new till SeedProd och vill använda det, måste du installera och aktivera plugin först. Du kommer att behöva Pro-versionen för att kunna komma åt funktionen Sociala profiler.

Om du vill ha mer information om hur du installerar ett tillägg kan du kontrollera vår guide om hur du installerar ett plugin för WordPress.

Sedan kan du följa denna tutorial för att ställa in ditt theme med SeedProd.

Nu, för att add to de sociala icons till sidebaren, måste du gå till SeedProd ” Theme Builder. Sedan hoverar du över templaten ”Sidebar” och klickar på ”Edit Design”.

Du är nu inne i SeedProd page builder. Blocket Social Profiles borde ha lagts till som standard i temamallen.

Om det inte har gjort det kan du använda search-fältet i den vänstra panelen och skriva in ”Social Profiles”. Efter det är det bara att drag and drop blocket till den plats som passar dig bäst.

Glöm inte att lägga till ett textblock högst upp på knapparna och skriva en call-to-action-text.

På så sätt riktar du besökarnas uppmärksamhet mot knapparna för social media i sidebaren.

För att customize hur profilikonerna för sociala medier ser ut, klicka bara på elementet ”Sociala profiler”. Här kommer du att se olika tabs för att customize knapparna.

I ”Content” tabs, you can add more icons and change the icon style, icon size, and alignment.

Förutom de vanliga alternativen som Instagram och Facebook har SeedProd också knappar för Slack, Telegram, Github och mer.

För att add en new social media icon som SeedProd inte har som standard, måste du clicka på ’+ Add New Share’ knappen.

Därefter väljer du ”Custom” från dropdown-menyn.

För att edit knappen, gå vidare och click kugghjulet settings symbolen bredvid pilen knappen.

När du har gjort det, selectar du bara ”Choose Icon”.

Nu kommer du att bli redirectad till Icon Library, där det finns hundratals varumärkesikoner att välja mellan, med tillstånd av Font Awesome-ikoner.

I det här exemplet kommer vi att använda Airbnb. Men det finns också andra val för plattformar som gillar LinkedIn eller Tumblr.

När du har valt en icon kan du justera färgen och add to länken till sidan för social media.

Här har vi bestämt oss för att klistra fast oss vid Airbnbs varumärkesfärg. När du infogar länken till det sociala kontot, se till att inkludera ”https://” också.

Nästa är tabben ”Templates”.

Om du byter till den här tabben kan du justera utformningen av ikonen. Du kan göra den mer fyrkantig, cirkulär och/eller monokromatisk, beroende på ditt alternativ.

Slutligen erbjuder tabben ”Advanced” fler sätt att customize dina knappar för sociala media.

I sectionen Styles kan you ändra icons stil, färg, storlek, mellanrum och skuggeffekt.

I Spacing kan du editera blockets marginal och padding. Det som är bra med SeedProd är att det tillåter dig att göra marginalen och padding olika för stationära och mobila enheter.

För att edit marginalen och padding, välj bara en av device icons och insert your margin och padding mätningar gillar så:

När du rullar ner hittar du Device Visibility och Animation Effects.

I den första inställningen kan du tacka ja till att dölja blocket på datorn eller mobilen. Detta kan vara nödvändigt om du har valt att använda blocket Social Profiles i en annan del av din website och inte vill ha dubbla icons för sociala profiler.

Med Animation Effects kan du välja en animationsstil för blocket när iconerna hämtas på sidan. Denna effekt är inte nödvändig om du inte vill distrahera besökaren för mycket från huvudinnehållet.

När du har konfigurerat blocket Sociala profiler som du gillar, klickar du bara på knappen ”Save” i det övre högra hörnet.

Eller klicka på knappen ”Preview” för att se hur sidebaren ser ut först.

Och så var det klart! Du har utan problem addat blocket för sociala profiler med SeedProd.

Så här kan slutresultatet gilla att se ut:

Bonus tips: Embed Your Social Media Profiles on Your WordPress Site

Att lägga till social media icons till din sidebar är ett bra första steg för att öka antalet följare och visa socialt bevis. Med detta sagt kanske du också vill embedda dina sociala media feeds direkt på din WordPress site.

This allows visitors to see your latest content and engage with you directly on your website, potentially increasing brand awareness and engagement.

Det enklaste sättet att embedda feeds från sociala media i WordPress är att använda Smash Balloon. Med detta tillägg för sociala media kan du ansluta din website till olika sociala plattformar och embedda feeds från dem.

Och det bästa av allt? Smash Balloon gör det enkelt att customize dessa feeds efter vad du gillar. På så sätt ser dina social media feeds bra ut med resten av din website design.

För mer information, kontrollera dessa tutorials:

• Så här skapar du ett customize Instagram Photo Feed i WordPress
• Så här skapar du ett Custom Facebook Feed i WordPress
• Så här displayed du senaste tweets i WordPress (steg för steg)
• Så här visar du senaste videoklipp från YouTube-kanalen i WordPress
• Hur man embedar TikTok videoklipp i WordPress

Vi hoppas att denna Step-by-Step guide har hjälpt dig att lära dig hur du lägger till social media icons till din WordPress sidebar. Du kanske också vill kontrollera vår artikel om hur du lägger till social media icons till din WordPress meny och vår lista över de måste-ha WordPress tillägg för företagswebbplatser.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.