Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere le icone dei social media nella barra laterale di WordPress

Vi state chiedendo come aggiungere le icone dei social media alla barra laterale di WordPress?

L’aggiunta di icone sociali al vostro sito web è un modo semplice per far conoscere al pubblico la vostra presenza sui social media. In questo modo, potranno facilmente visitare i vostri profili sociali e seguirvi online.

In questo articolo vi mostreremo come aggiungere le icone dei social media alla barra laterale di WordPress.

How to Add Social Media Icons in Your WordPress Sidebar

Perché aggiungere le icone dei social media alla barra laterale di WordPress?

Una barra laterale di WordPress è un’area del vostro sito web che non fa parte del contenuto principale. È il luogo in cui è possibile visualizzare informazioni aggiuntive che possono interessare i lettori, come i post più recenti del blog e i link ai vostri profili sociali.

L’aggiunta di link sociali alla barra laterale di WordPress è una buona idea perché informa gli utenti dei vostri account sui social media. Di conseguenza, possono controllarli, seguirvi e aiutarvi a far crescere il vostro seguito sui social media.

Inoltre, la visualizzazione dei vostri account sui social media può creare un senso di credibilità e fungere da prova sociale. Quando i visitatori vedono che avete una presenza attiva sui social media, dimostrano che il vostro sito di e-commerce o aziendale è affidabile.

Molti blog WordPress popolari mostrano le icone dei social media nelle loro barre laterali, come WPBeginner:

WPBeginner's social media icons on the sidebar

Nota: le icone dei social media sono diverse dai pulsanti di condivisione sociale sui post di WordPress. Se state cercando di aggiungere pulsanti di condivisione, potete consultare la nostra guida per principianti su come aggiungere icone di condivisione sociale in WordPress.

Detto questo, vediamo come aggiungere le icone dei follower dei social media alla barra laterale del vostro sito web WordPress.

Il metodo da utilizzare dipende dal tema e dall’editore di WordPress in uso. Se volete saltare a una determinata sezione, potete usare questi link rapidi:

Metodo 1: Aggiungere le icone sociali con l’editor completo del sito (temi a blocchi)

Se utilizzate un tema a blocchi, potete aggiungere i pulsanti dei social media alla barra laterale di WordPress utilizzando il blocco Social Icons.

Si noti che la procedura varia a seconda del tema utilizzato. Alcuni temi di blocco possono includere una barra laterale predefinita, alla quale è possibile aggiungere il blocco Icone sociali. Alcuni potrebbero anche avere un modello di intestazione che funziona come una barra laterale, mentre altri potrebbero non avere affatto una barra laterale.

In questo esempio, utilizzeremo un tema di blocco predefinito di WordPress e vi mostreremo come creare una barra laterale per tutte le vostre pagine o post in cui aggiungere il blocco Social Icons.

Per prima cosa, andare su Aspetto ” Editor nel pannello di amministrazione di WordPress.

Selecting the Full-Site Editor from the WordPress admin panel

Successivamente, è necessario selezionare “Modelli”.

Si accede così a una pagina in cui è possibile modificare il modello delle pagine e dei post.

Choosing the Templates menu on WordPress Editor

Qui si può scegliere uno dei modelli di pagina. Può essere “Pagine” o “Messaggi singoli”, a seconda della posizione della barra laterale.

Se si desidera che la barra laterale appaia sia sulle pagine statiche che sui post, è possibile modificarle entrambe in un secondo momento. È anche possibile personalizzare il modello della homepage, nel caso in cui si desideri che la barra laterale appaia anche lì.

In questo caso, selezioneremo “Pagine”.

Selecting Pages on the WordPress Editor Templates page

Successivamente, fare clic sul pulsante della matita nel pannello di sinistra, accanto al pulsante con i tre punti.

Si aprirà l’editor di WordPress.

Clicking the pencil edit button on Pages inside the WordPress editor

Come si può vedere, il tema predefinito non ha ancora una barra laterale nel modello Pagine, quindi dobbiamo crearne una.

Per farlo, si può passare il mouse sul punto in cui si desidera aggiungere la barra laterale e fare clic sul pulsante “+” quando appare. Quindi, trovare e selezionare “Colonne”.

Selecting the Columns block on WordPress editor

Ci saranno alcune varianti tra cui scegliere.

In questo esempio, utilizzeremo l’opzione ’66 / 33′ per imitare l’aspetto standard di una barra laterale destra.

Choosing one of the variations of the Columns block in WordPress editor

Una volta fatto, è possibile trascinare e rilasciare il blocco Contenuto del post a sinistra del blocco Colonne.

Il modello di Pagine dovrebbe assomigliare all’immagine seguente, con la colonna di destra vuota.

Moving the Post Content block to the left side of the Columns block

A questo punto, fare clic sulla colonna di destra e selezionare il pulsante “+” per aggiungere un blocco.

Quindi, cercare il blocco Icone sociali.

Searching for the Social Icons block to add to the Columns block

Ora potete iniziare ad aggiungere le vostre piattaforme di social media al blocco. È sufficiente fare nuovamente clic sul pulsante “+” e aggiungere i pulsanti dei social media uno per uno.

Non esitate a utilizzare la funzione di ricerca per sfogliare tutte le opzioni di social network.

Adding a social profile to the Social Icons block

Una volta aggiunti tutti i pulsanti, si può iniziare ad aggiungere i collegamenti personalizzati ai propri profili sociali.

Tutto ciò che dovete fare è cliccare su un’icona sociale e inserire l’URL del vostro profilo.

Entering an Instagram account link to the Social Icons block

In questa fase è possibile personalizzare l’aspetto delle icone.

Se le dimensioni dei pulsanti non sono sufficientemente grandi o piccole, è possibile utilizzare l’opzione ‘Dimensione’ nella barra degli strumenti del blocco.

Customizing the buttons' sizes using the Social Icons block toolbar

Nelle Impostazioni blocco a sinistra, è possibile personalizzare la giustificazione, l’orientamento, le impostazioni dei collegamenti e le etichette delle icone.

Si consiglia di far aprire i link in una nuova scheda, in modo che gli utenti non debbano lasciare il vostro sito web per visitare i vostri profili sociali.

Social Icons Block Settings

Se si passa alla scheda Stili blocco, è possibile modificare gli stili e i colori delle icone per adattarle al design del sito WordPress.

A seconda delle preferenze, si può fare in modo che tutte le icone abbiano colori diversi o uguali, come in questo caso.

Configuring the Social Icons color and styles in the Block Styles tab

Scorrendo la stessa scheda, si trovano le impostazioni Dimensioni per personalizzare il margine e la spaziatura del blocco.

Queste impostazioni possono essere utili se si desidera regolare la spaziatura tra il blocco Icone sociali e gli altri blocchi della barra laterale.

Configuring the Dimensions settings of the Social Icons block

È anche una buona idea aggiungere un testo di invito all’azione in alto al blocco delle icone sociali per evidenziare la posizione dei pulsanti e incoraggiare gli utenti a diventare follower o abbonati.

Per farlo, aggiungete un blocco Paragraph utilizzando il pulsante “+”. Assicuratevi che sia sopra le icone sociali.

Adding a Paragraph block on top of the Social Icons block

Alcuni esempi di call-to-action che potreste usare sono “Seguici”, “Unisciti a più di X lettori” o “Ricevi gli ultimi aggiornamenti”.

Se non l’avete ancora fatto, potete aggiungere altri elementi alla barra laterale, come i post in evidenza e i commenti recenti.

A questo punto, è sufficiente fare clic sul pulsante “Salva” nell’angolo in alto a destra della pagina.

Clicking the Save button on the WordPress editor

E questo è quanto!

Quando si accede al proprio sito web WordPress, si dovrebbe ora vedere una barra laterale con alcuni link sociali.

Example of what the Social Icons block looks like on the front end

Se volete creare barre laterali uniche per pagine o post diversi, che includano tutte un blocco Icone sociali, vi consigliamo di creare un modello WordPress o un blocco riutilizzabile per la vostra barra laterale.

Per saperne di più, potete consultare le nostre guide per principianti su come utilizzare i modelli di blocchi WordPress e su come aggiungere blocchi riutilizzabili.

Metodo 2: Aggiungere le icone dei social media con i widget di WordPress (temi classici)

Il metodo successivo è destinato a chi utilizza un tema classico di WordPress con aree della barra laterale predisposte per i widget.

Per aggiungere i pulsanti dei social media alla barra laterale, basta andare su Aspetto ” Widget dal cruscotto di WordPress.

Quindi, navigare nell’area widget di WordPress dove si desidera aggiungere il widget Icone sociali. Nel nostro esempio, selezioneremo “Sidebar”, ma il nome potrebbe essere diverso a seconda del tema in uso.

Navigating to the Appearance Widgets menu and selecting Sidebar on WordPress admin panel

A questo punto, fare clic sul pulsante “+” del blocco aggiuntivo in alto a sinistra, accanto a “Widget”.

Qui si può cercare il blocco Icone sociali.

Choosing the Social Icons block in the WordPress Widgets settings

Successivamente, è necessario fare clic su questo widget della barra laterale o trascinarlo in un punto qualsiasi dell’area di modifica.

In generale, è meglio aggiungere le icone dei social network vicino alla parte superiore dell’area widget. In questo modo, possono attirare l’attenzione dei visitatori fin dal momento in cui arrivano sulla pagina.

Quindi, analogamente al metodo precedente, è possibile fare clic sul pulsante “+” per aggiungere uno per uno nuovi pulsanti di social media al widget.

Nell’esempio seguente, abbiamo posizionato il blocco Icone sociali sotto il blocco Ricerca. Abbiamo anche aggiunto un’icona di WhatsApp.

Placing the Social Icons widget below the Search widget and adding the WhatsApp icon

A questo punto, potete iniziare ad aggiungere i vostri link sociali.

Per WhatsApp, potete digitare “wa.me/” e scrivere il vostro numero WhatsApp accanto ad esso. Non è necessario usare il simbolo +, ma assicuratevi di aggiungere il codice di chiamata del vostro Paese, come in questa schermata.

Adding a WhatsApp number in the Social Icons block

È inoltre possibile accedere alle opzioni Impostazioni blocco e Stili nel pannello di destra.

Per aprire queste opzioni, si può fare clic sull’icona “Impostazioni” nell’angolo in alto a destra.

Selecting the Settings icon on the Widgets page

Inoltre, è possibile aggiungere un blocco di paragrafi sopra il widget dei social media per il testo della call-to-action.

Si consiglia di rendere i blocchi Paragrafo e Icone sociali un gruppo, in modo che non appaiano separati nella barra laterale.

Per farlo, è sufficiente selezionare il paragrafo e le icone sociali insieme. Successivamente, fare clic sull’icona ‘Trasforma’ nella barra degli strumenti del blocco e selezionare ‘Raggruppa’.

Grouping the Social Icons and Paragraph blocks

Una volta terminato, fare clic sul pulsante “Aggiorna” per rendere ufficiali le modifiche su tutte le barre laterali.

Ecco come dovrebbe apparire il risultato finale:

An example of what the Social Icons widget looks like on the website

Metodo 3: Aggiunta di icone personalizzate per i social media con SeedProd (temi personalizzati)

Se utilizzate SeedProd, avrete un maggiore controllo sull’aspetto dei pulsanti dei social media nella vostra barra laterale. Ad esempio, se utilizzate una piattaforma di social media per la quale WordPress non ha un’icona, potete creare voi stessi un pulsante.

Inoltre, è possibile regolare la spaziatura delle icone in modo specifico per i dispositivi mobili.

Se non si conosce SeedProd e si desidera utilizzarlo, è necessario prima installare e attivare il plugin. Per poter accedere alla funzione Profili sociali è necessaria la versione Pro.

Per ulteriori informazioni su come installare un plugin, consultate la nostra guida su come installare un plugin di WordPress.

Quindi, si può seguire questo tutorial per configurare il tema con SeedProd.

Ora, per aggiungere le icone sociali alla barra laterale, è necessario andare su SeedProd ” Theme Builder. Quindi, passare il mouse sul modello “Sidebar” e fare clic su “Modifica design”.

Clicking Edit Design on the Sidebar template inside SeedProd

Ora ci si trova all’interno del costruttore di pagine SeedProd. Il blocco Profili sociali dovrebbe essere stato aggiunto di default al modello del tema.

In caso contrario, è possibile utilizzare la barra di ricerca nel pannello di sinistra e digitare “Profili sociali”. Dopodiché, è sufficiente trascinare e rilasciare il blocco nel punto più adatto.

Selecting the Social Profiles block on SeedProd

Non dimenticate di aggiungere un blocco di testo sopra i pulsanti e di scrivere un testo di invito all’azione.

In questo modo, si indirizza l’attenzione dei visitatori verso i pulsanti dei social media nella barra laterale.

Creating a Follow Us text on top of the Social Profiles block on SeedProd

Per personalizzare l’aspetto delle icone dei profili dei social media, basta fare clic sull’elemento “Profili sociali”. Qui si vedranno diverse schede per personalizzare i pulsanti.

Nella scheda “Contenuto” è possibile aggiungere altre icone e modificare lo stile, le dimensioni e l’allineamento delle icone.

Configuring the Content tab of the Social Profiles block in SeedProd

Oltre alle opzioni standard come Instagram e Facebook, SeedProd dispone anche di pulsanti per Slack, Telegram, Github e altro ancora.

Per aggiungere un’icona di un nuovo social media che SeedProd non ha di default, è necessario fare clic sul pulsante “+ Aggiungi nuova condivisione”.

Quindi, selezionare “Personalizzato” dal menu a discesa.

Creating a Custom social media button on SeedProd

Per modificare il pulsante, fare clic sul simbolo delle impostazioni dell’ingranaggio accanto al pulsante con la freccia.

Una volta fatto ciò, selezionare “Scegli icona”.

Clicking the Choose Icon for the custom social media button on SeedProd

A questo punto, sarete reindirizzati alla Libreria delle icone, dove ci sono centinaia di icone di marca tra cui scegliere, grazie alle icone di Font Awesome.

In questo esempio, utilizzeremo Airbnb. Ma ci sono anche altre scelte per piattaforme come LinkedIn o Tumblr.

Choosing the Airbnb icon on SeedProd

Una volta selezionata l’icona, è possibile regolare il colore e aggiungere il link alla pagina del social media.

In questo caso, abbiamo deciso di attenersi al colore del marchio Airbnb. Quando si inserisce il link dell’account sociale, assicurarsi di includere anche il simbolo “https://”.

Configuring the Airbnb icon design on Social Profiles block inside SeedProd

Segue la scheda “Modelli”.

Se si passa a questa scheda, è possibile regolare il design dell’icona. È possibile renderla più quadrata, circolare e/o monocromatica, a seconda delle proprie preferenze.

Editing the Templates setting for the Social Profiles block in SeedProd

Infine, la scheda “Avanzate” offre ulteriori modi per personalizzare i pulsanti dei social media.

Nella sezione Stili è possibile modificare lo stile delle icone, il colore, la dimensione, lo spazio intermedio e l’effetto ombra.

The Styles tab in the Social Profiles block settings in SeedProd

In Spaziatura, è possibile modificare il margine e il padding del blocco. L’aspetto positivo di SeedProd è che consente di modificare il margine e il padding per i dispositivi desktop e mobili.

Per modificare il margine e il padding, basta scegliere una delle icone del dispositivo e inserire le misure del margine e del padding nel modo seguente:

Configuring the Social Profiles block spacing in SeedProd

Scorrendo verso il basso, si trovano Visibilità del dispositivo ed Effetti di animazione.

Nella prima impostazione, si può scegliere di nascondere il blocco su desktop o mobile. Questo può essere necessario se si è scelto di utilizzare il blocco Profili sociali in un’altra parte del sito e non si vogliono duplicare le icone dei profili sociali.

Con gli Effetti di animazione, è possibile selezionare uno stile di animazione per il blocco quando le icone vengono caricate sulla pagina web. Questo effetto non è necessario se non si vuole distrarre troppo il visitatore dal contenuto principale.

SeedProd's Device Visibility and Animation Effect settings for the Social Profiles block

Una volta configurato il blocco Profili sociali a proprio piacimento, è sufficiente fare clic sul pulsante “Salva” nell’angolo in alto a destra.

Oppure, fare clic sul pulsante “Anteprima” per vedere prima l’aspetto della barra laterale.

Clicking the Save button on SeedProd

Ed ecco fatto! Avete aggiunto con successo il blocco dei profili sociali utilizzando SeedProd.

Ecco come potrebbe essere il risultato finale:

Example of what the social media icons in the sidebar look like if made with SeedProd

Suggerimento bonus: Incorporare i profili dei social media sul sito WordPress

L’aggiunta delle icone dei social media alla barra laterale è un ottimo primo passo per aumentare il numero di follower e visualizzare la prova sociale. Detto questo, potreste anche voler incorporare i feed dei vostri social media direttamente sul vostro sito WordPress.

In questo modo i visitatori possono vedere i vostri ultimi contenuti e interagire con voi direttamente sul vostro sito web, aumentando potenzialmente la brand awareness e il coinvolgimento.

Il modo più semplice per incorporare i feed dei social media in WordPress è utilizzare Smash Balloon. Questo plugin per i social media consente di collegare il sito web a varie piattaforme sociali e di incorporare i feed da esse.

La parte migliore? Smash Balloon consente di personalizzare facilmente questi feed a proprio piacimento. In questo modo, i feed dei media si abbinano perfettamente al resto del design del sito web.

Per ulteriori informazioni, selezionate queste esercitazioni:

Speriamo che questa guida passo passo vi abbia aiutato a capire come aggiungere le icone dei social media alla barra laterale di WordPress. Potreste anche voler selezionare il nostro articolo su come add-on le icone dei social media al vostro menu WordPress e il nostro elenco dei plugin WordPress indispensabili per i siti aziendali.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

35 commentiLascia una risposta

  1. THANKGOD JONATHAN

    Can I also use this Wordpress Editor with Free themes? As they come with limited customizations for free users.

    • WPBeginner Support

      It depends on the specific theme for what editor it has available.

      Admin

  2. Moinuddin Waheed

    I have used social sharing plugin for adding social media link to my blog posts and pages.
    At times it becomes necessity to have one. This leads to increased traffic to our blog posts and lets the user to share with different platforms.
    This is something that every blog or businesses would need to have.
    Seedprod has very easy and smooth way to have social plugins to our blogs and sidebar widgets.
    Thanks wpbeginner for this guide.

    • WPBeginner Support

      You’re welcome, glad you found our guide and SeedProd helpful :)

      Admin

  3. Jiří Vaněk

    This was one of the first things I dealt with on the side panel: the availability of social media. I had links to social networks set up this way for quite a while. However, I found it graphically more appealing to use a floating bar on the other side. So, on the right, I had the classic right menu, and on the left side, which was unnecessarily empty (on the blog), I ended up using a plugin. There, I have floating bars with links to social networks, email, and a popup comment.

  4. Ahmed Omar

    it looks a long process that needs attention
    Although I have my social media pages, but I did not add any icons on my site before.
    I will give it a try today as it worth the work, and with your detailed step by step explanation, it would be easy

    • WPBeginner Support

      We hope our guide simplifies the process for you :)

      Admin

  5. Ralph

    I always like to read your tutorial guys. Straight to the point and multiple options. Having ability to customize icons is very nice and I will definitely use it to make my site looks better and more professional.

    • WPBeginner Support

      Happy to hear you enjoy our content :)

      Admin

  6. koor united

    this was very helpfull

    • WPBeginner Support

      Glad our article was helpful :)

      Admin

  7. The Venetian Box

    I ABSOLTELY love your videos, I am learning SO much and it´s SO straight forward! Thank you!

    • WPBeginner Support

      Thank you, glad you like our videos :)

      Admin

  8. PAMELA

    coding is one of my weakness and this is a great plugin for me :) Thank you

    • WPBeginner Support

      Glad we could let you know about the plugin :)

      Admin

  9. Karen Footloose

    This worked like a charm. Until–don’t laugh–I realized I had beautiful FOLLOW buttons while I was looking for SHARING buttons. How do I get those just as simple and customizable to go in a widget in the sidebar. I’ve looked, but haven’t found simple ones.

  10. Mathukutty P.V.

    What is difference between jetpack social media icon and wp social media profile? jetpack have youtube provision wherea wp social media profile do not have youtube.

  11. Kunj Bihari

    Nice post thank you for sharing this article

  12. Patrick Tuthill

    Added a few social widgets to my current theme and it’s both do not render correctly? I am using the theme “Nisarg” which is a basic free blog theme, adn I have heard these plugins adapt differently to various themes. It’s frustrating when these widgets are for ease of use but they haven’t saved me any time. Any feedback from anyone would help. I do plan to upgrade to Genesis framework, not sure if that matters.

  13. tess

    thank you this was very helpful. keep up the good work

  14. sneakers3205

    Great and easy instructions. Thank you.

  15. Ru

    perfect. just what i needed. thanks.

  16. Lora

    The icons are not appearing in the boxes when I installed this plugin. I just see tiny letters and numbers inside the squares. Help?

  17. Amol Ghuge

    This is great. Love to have the these options in one place. Very helpful!

  18. Maggie

    Thank you for the article.
    I am a new blogger and I have been using your website since the beginning.
    I have to admit, if there’s any problem I come across or I need some help, I could find the answer here.
    Good job!

  19. Lindsay

    Thank you for this advice, but how do you get it to show the Facebook, LInkedIn, Twitter icons??? All I have is grey…….

    Thank you!!

  20. Ahmed

    You are Awsome dude….

    Helpful Article… thanks

  21. Andre Costa

    Beautiful! Thank you.

  22. jerralyn

    Nice post, thank you for sharing this useful tutorial on how to add social media on Wordpress side bar. Can I use DigDig plug-in instead of Simple Social Icons plugin?

  23. Ankit

    Great piece of information for beginners. A good read.

  24. Shahnawaz

    Dear Syed Balkhi, Sir I would like to thanks you very much and you are my best and favorite personality in WordPress world. Dear sir I will pray for you that always you will write for us. I am using your this plugin and I am daily visit you site and got updates and I will try these updates on my blog. Thanks

  25. Keith Davis

    Great plugin – use it on all my sites.
    Another winner from Genesis.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.