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 ai menu di WordPress (in modo semplice)

State cercando un modo per aggiungere le icone dei social media ai menu di WordPress?

I loghi di siti come Facebook e Twitter sono immediatamente riconosciuti da tutto il mondo. Aggiungendo queste icone ai vostri menu, potrete promuovere i vostri profili di social media in modo accattivante e senza occupare molto spazio.

In questo articolo vi mostreremo come aggiungere le icone dei social media ai menu di navigazione di WordPress.

How to add social media icons to WordPress menus (easy way)

Perché aggiungere le icone dei social media ai menu di WordPress?

Aggiungendo le icone dei social media al vostro sito web, potete incoraggiare le persone a visitare i vostri account sui social media. In questo modo potrete ottenere più follower e coinvolgimento su Facebook, Twitter, Instagram e altro ancora.

Una possibilità è quella di aggiungere le icone dei social media alla barra laterale di WordPress o a un’area simile predisposta per i widget. Tuttavia, quando le persone vogliono visitare una nuova pagina, di solito guardano prima il vostro menu di navigazione.

Aggiungendo le icone dei social media ai vostri menu di WordPress, potrete spesso ottenere più clic, coinvolgimento e follower su tutti i vostri profili di social media.

Le icone dei social media possono anche catturare l’attenzione del visitatore senza aggiungere altro testo ai vostri menu. In questo modo è possibile promuovere molti profili diversi in poco spazio.

Detto questo, diamo un’occhiata a 2 modi semplici per aggiungere le icone dei social media ai menu di WordPress.

Video tutorial

Subscribe to WPBeginner

Se preferite le istruzioni scritte, continuate a leggere. Utilizzate i link rapidi qui sotto per passare direttamente al metodo che desiderate utilizzare:

Il modo più semplice per aggiungere le icone dei social media ai menu di WordPress è utilizzare Menu Image. Questo plugin gratuito consente di aggiungere icone di immagini ai menu di navigazione, comprese le icone dei social media.

Quando si creano le icone sociali, è possibile utilizzare qualsiasi immagine caricata nella libreria multimediale di WordPress.

Ad esempio, molte delle principali aziende di social media forniscono loghi che potete utilizzare sul vostro sito web, come il brand toolkit di Twitter. È anche possibile scaricare icone da librerie online come il sito web Font Awesome.

Menu Image si integra anche con il plugin Font Awesome. Ciò consente di sfogliare e importare tutte le icone Font Awesome direttamente dalla dashboard di WordPress, comprese le icone per tutti i principali social network.

Si consiglia di installare il plugin Font Awesome prima di proseguire con il tutorial. Per istruzioni dettagliate su come configurare Font Awesome, consultate la nostra guida su come aggiungere facilmente font di icone al vostro tema WordPress.

Indipendentemente dal modo in cui si intende fornire le icone dei social media, è necessario installare e attivare il plugin Menu Image. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, è possibile dare un’occhiata alle dimensioni delle icone e modificarle, se necessario. Per farlo, è necessario andare su Immagine del menu ” Immagine del menu.

How to add social media icons to a WordPress menu

Quando create le vostre icone sociali, potete usare una qualsiasi delle dimensioni predefinite delle immagini di WordPress, come miniatura, immagine o grande. Menu Image consente inoltre di scegliere tra tre dimensioni uniche, impostate di default a 24×24, 36×36 e 48×48 pixel.

Queste dimensioni dovrebbero andare bene per la maggior parte dei siti web WordPress, ma è possibile modificarle digitando numeri diversi nei campi 1ª, 2ª o 3ª immagine del menu.

Resizing social media icons in WordPress

A questo punto, fare clic su “Salva modifiche” per memorizzare le impostazioni.

Per aggiungere icone a un menu di navigazione, andate su Aspetto ” Menu“. Per impostazione predefinita, WordPress mostra il menu principale del sito.

Selecting a WordPress menu to edit

Se si desidera aggiungere le icone dei social media a un’altra posizione del menu, basta aprire il menu “Seleziona un menu da modificare”.

È quindi possibile scegliere un menu dall’elenco e fare clic su “Seleziona”.

Editing a WordPress navigation menu

Per istruzioni passo passo su come creare un nuovo menu, consultare la nostra guida su come aggiungere un menu di navigazione in WordPress.

Per iniziare, dovrete aggiungere ogni profilo sociale al vostro menu come nuovo link.

Quando si è pronti, fare clic per espandere la sezione “Link personalizzati” e digitare l’indirizzo della pagina di social media che si desidera utilizzare. Ad esempio, si può inserire l’URL del proprio gruppo Facebook o del proprio canale YouTube.

È inoltre necessario digitare un “testo di collegamento”. In una fase successiva, sarà possibile modificare la posizione del titolo nel menu o addirittura nasconderlo completamente.

Adding link text to a website navigation menu

A questo punto, fare clic su “Aggiungi al menu”.

La voce apparirà ora nella colonna di destra.

Adding social links to a WordPress website

Per aggiungere l’icona di un social media, è sufficiente passare il mouse sulla nuova voce di menu.

Quindi, fare clic sul pulsante “Immagine del menu” quando appare.

Adding icons and images to a WordPress menu

Nota: se non si vede il pulsante “Immagine del menu”, fare clic su “Salva modifiche”. A questo punto, il pulsante “Immagine del menu” dovrebbe apparire quando si passa il mouse su qualsiasi voce del menu.

A questo punto si può decidere se utilizzare un’immagine dalla libreria multimediale di WordPress o un’icona fornita da Font Awesome.

Per utilizzare un’icona Font Awesome già pronta, fare clic sul pulsante di opzione accanto a “Icona”.

Adding Twitter, Facebook, and other social icons to WordPress

Quindi, selezionare “Fontawesome”.

È quindi possibile fare clic su “Marchi”.

Adding branded icons to a WordPress navigation menu

Ora vedrete tutte le icone di marca, comprese le icone di tutti i principali social network, da Facebook a LinkedIn. Quando vedete l’immagine che volete utilizzare, fateci un clic.

Un’altra opzione è quella di utilizzare la propria icona dalla libreria multimediale di WordPress, selezionando il pulsante di opzione “Immagine”. Quindi, fare clic sul link “Imposta immagine”.

Adding any file or image to a WordPress navigation menu

A questo punto è possibile scegliere un’immagine dalla libreria multimediale di WordPress o caricare un nuovo file dal computer.

Indipendentemente dalla provenienza dell’icona, Menu Image mostrerà un’anteprima sulla destra.

Previewing icons in a website or blog navigation menu

È ora possibile modificare la visualizzazione del titolo del link sopra, sotto, prima o dopo l’icona del social media utilizzando le impostazioni di “Posizione del titolo”.

Molte icone dei social media sono immediatamente riconoscibili, quindi il titolo del link potrebbe essere superfluo. Se si aggiungono molte icone di social media a un menu di navigazione, i titoli possono persino far sembrare il menu più disordinato e complicato.

Detto questo, è possibile nascondere il titolo selezionando il pulsante di opzione “Nascondi”.

Hiding the menu link title text

Man mano che si apportano le modifiche, l’anteprima dal vivo si aggiorna automaticamente, in modo da poter provare diverse impostazioni per vedere qual è l’aspetto migliore.

Infine, se si utilizza una propria immagine, è possibile ridimensionare le icone dei social media utilizzando il menu a tendina “Dimensione immagine”.

Resizing social icons on a WordPress navigation menu

Le icone più grandi attirano l’attenzione del visitatore, ma possono anche distrarre. Per questo motivo, si consiglia di provare diverse dimensioni per vedere cosa funziona meglio sul proprio blog WordPress.

Quando si è soddisfatti della configurazione dell’icona dei social media, è sufficiente fare clic su “Salva modifiche”.

Publishing social icons on a WordPress website

È sufficiente ripetere questi passaggi per aggiungere altre icone al menu di WordPress.

È possibile aggiungere icone anche ad altre voci importanti del menu di navigazione. Ad esempio, si possono aggiungere icone al modulo di contatto o alla pagina di checkout di WooCommerce.

Quando si è soddisfatti della configurazione del menu, è sufficiente fare clic su “Salva menu”.

Publishing a menu with social icons

Ora potete visitare il vostro sito web per vedere le nuove icone dei social media in azione.

Ecco come appariva sul nostro sito web dimostrativo.

Adding social icons to a WordPress menu

Metodo 2: Utilizzo dell’editor completo del sito (solo per i temi a blocchi)

WordPress dispone di un blocco integrato di icone sociali che consente di creare un menu contenente le icone dei social media e di visualizzarle in un bel layout.

An example of a social media navigation menu

Questo blocco è dotato di icone integrate per tutti i principali social network, quindi non è necessario installare un plugin come Font Awesome o caricare icone nella libreria multimediale.

Tuttavia, è possibile aggiungere icone e collegamenti ai social media solo nel blocco Social Icons, quindi non è flessibile come il plugin Menu Image.

Se si utilizza un tema a blocchi, è possibile aggiungere un blocco Icone sociali a qualsiasi parte del sito web, come l’intestazione o il piè di pagina. In questo modo, è possibile mostrare un menu dei social media in tutto il sito.

Per iniziare, andate su Aspetto ” Editor nella dashboard di WordPress.

Selecting the Full-Site Editor from the WordPress admin panel

Da qui, si vedranno alcuni menu per personalizzare il design del tema di blocco.

Per aggiungere le icone dei social media al menu, fare clic su “Navigazione”.

Selecting Navigation in WordPress Full Site Editing

Il passo successivo è fare clic sull’icona della matita “Modifica”.

Si aprirà l’Editor completo di WordPress.

Clicking the pencil edit button for Navigation in WordPress Full Site Editing

Fatto questo, sarete ora in grado di modificare il vostro menu di navigazione, che fa parte del modello di intestazione di WordPress.

Per iniziare, fare clic sull’icona blu “+” nell’angolo in alto a sinistra. Nella barra di ricerca, digitate “Icone sociali”.

Adding the Social Icons block to WordPress

Quando appare il blocco giusto, trascinarlo sul modello del tema.

Per aggiungere la prima icona, basta fare clic sull’icona ‘+’ all’interno del blocco.

Adding social icons to a WordPress template

Nel popup che appare, digitate l’icona che volete aggiungere, ad esempio “Twitter” o “Facebook”.

Quando appare l’icona giusta, basta fare clic per aggiungerla al vostro blog WordPress.

Adding a Twitter icon to a WordPress navigation menu

A questo punto, fare clic sulla nuova icona dei social media.

Si apre una piccola barra in cui è possibile digitare l’URL a cui si desidera collegarsi, ad esempio la propria pagina Facebook.

Adding URLs to a social media menu

Per aggiungere altre icone sociali a WordPress, basta cliccare sull’icona “+” e ripetere la stessa procedura descritta sopra.

Dopo aver aggiunto tutte le piattaforme di social media, è possibile personalizzare il blocco. Per farlo, fare clic per selezionare il blocco Icone sociali e poi fare clic sulla scheda ‘Blocco’.

Customizing a social block in WordPress

È possibile modificare la giustificazione, l’allineamento e l’orientamento dell’icona utilizzando le impostazioni di “Layout”.

Per impostazione predefinita, tutti i collegamenti ai social media si aprono nella stessa scheda. Per far sì che i visitatori rimangano sul vostro sito web, potete fare clic per attivare la levetta “Apri i link in una nuova scheda”.

Opening website links in a new browser tab

Per impostazione predefinita, WordPress mostra solo le icone sociali, senza alcun testo.

Se si desidera visualizzare il testo accanto a ciascuna icona, fare clic per attivare la levetta “Mostra etichette”.

Adding labels to a social menu

Quindi, fare clic sulla scheda “Stili”.

Qui è possibile modificare lo stile dei pulsanti facendo clic su “Predefinito”, “Solo loghi” o “Forma della pillola”.

Adding button styles to a navigation menu

Infine, è possibile modificare lo spazio tra le icone sociali utilizzando le impostazioni alla voce “Spaziatura blocchi”.

Quando si è soddisfatti dell’aspetto del menu, fare clic sul pulsante “Salva”.

Publishing a social icons block in WordPress

Ora, se visitate il vostro sito web, vedrete le icone dei social media dal vivo.

Suggerimento bonus: Incorporare i feed sociali nel vostro sito WordPress

L’aggiunta delle icone dei social media ai menu di WordPress è un ottimo modo per ottenere più follower e coinvolgimento tra i vostri diversi account. Tuttavia, ci sono molti altri modi per promuovere i vostri profili Twitter, Facebook e altri social.

Il modo migliore per ottenere più follower e coinvolgimento è incorporare un feed sociale live nel vostro sito web. Questo vi permette di mostrare gli ultimi post dei vostri siti di social media, insieme a pulsanti che i visitatori possono utilizzare per interagire con i vostri post o seguirvi sui social media.

Il modo migliore per aggiungere i feed dei social media al vostro sito web è utilizzare Smash Balloon. È il miglior plugin per i feed dei social media per WordPress e consente di incorporare feed live da Twitter, Instagram, Facebook e altro ancora.

The Smash Balloon social media WordPress plugin

Per maggiori informazioni, consultate il nostro tutorial su come aggiungere i feed dei social media a WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere le icone dei social media ai menu di WordPress. Potreste anche voler consultare la nostra guida su come incorporare un video di Facebook in WordPress o vedere le nostre scelte degli esperti per i migliori plugin Twitter per WordPress.

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

61 commentiLascia una risposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    The Menu Image plugin is fantastic. I actually wrote an article about it when I was dealing with the exact same issue. Creating a main ‘Contact’ folder in the menu and adding a submenu with links to social networks along with icons—it works like magic. Previously, I used Font Awesome, and it was quite impractical. This is a much more elegant solution.

  3. Ralph

    As I love your article tutorials this time I only watched video and it was great! Short, no fluff and straight to the point. You guys should include more video tutorials. You are great at it and now I have new icons in my menu (not only for my socials). Thanks a lot!

  4. Jonas

    Thanks for this article, it helped me a lot!

    • WPBeginner Support

      Glad our article was helpful!

      Admin

  5. Farhad

    Is there a way to have blog posts submitted to social media sites automatically?
    Thank you.

  6. Jimmy Ekisa

    Brilliant article!!! You saved me time to create social menus and add them in the NewsPack Theme header, thank you so much.

  7. Shyam

    How to show icons of social profiles in footer?

  8. Kerry

    I’ve got the social media icons on my website. How do I link those icons to my social media profiles?

    • WPBeginner Support

      You would have the menu items be custom URLs

      Admin

  9. Vicki

    Thanks for this, I’ve managed to add the Goodreads logo to my Social Menu and chose the Social Menu location too. However when I view the page it shows the magnifying glass next to the new Goodreads logo, rather than just the logo on it’s own – why is this and how do I get rid of it?

    • WPBeginner Support

      You would want to check with your theme’s support to see if this is due to the design of the theme itself.

      Admin

  10. Danielle

    I added the social media menu but it’s not showing on my site. What can I do?

    • WPBeginner Support

      We would first recommend reaching out to the plugin’s support for them to take a look and ensure this isn’t a hiccup with the plugin.

      Admin

  11. Lisa Jackson

    Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?

    • WPBeginner Support

      It would depend on your specific theme, you would first want to check with your theme’s support to ensure it is not an issue with how their menu is styled that could be causing that.

      Admin

  12. andi moss

    What? No icons? Find our own?

    • WPBeginner Support

      We do not have a specific set we would recommend at the moment but there are many different options available depending on the style you’re looking for.

      Admin

  13. Bob Wright

    Setting up a social link on my site does not match the images in this article (perhaps our parent organization’s customization blocks that).

  14. Ankit

    Hi,

    Once again, a great and helpful tutorial. I’m just facing one issue, though. For the last step, when I try to select the menu location option, I can only see the primary menu option there. How do I get the social menu option as well?

    • WPBeginner Support

      Your specific theme may not have a social specific menu location. If you reach out to your theme’s support they can clarify and assist.

      Admin

  15. Jonathan

    I’m trying to get my head round how to add social media accounts to my WordPress blogsite. Any assistance appreciated. If I’ve skipped an earlier step in setting up the site, my apologies in advance for a stupid comment!

  16. Elder Designer

    amazing tutorial keep it up

    • WPBeginner Support

      Glad you found our guide helpful :)

      Admin

  17. Stephanie Strand

    Thank you! Very clear instructions. Helped this newbie enormously.

    • WPBeginner Support

      Glad our guide was helpful :)

      Admin

  18. Rupali Tripathi

    Thank you so very much for this video.

    • WPBeginner Support

      You’re welcome :)

      Admin

  19. Debbie Serjeant

    Icons are appearing without color … wonder what I did wrong?

    • WPBeginner Support

      You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.

      Admin

  20. Isaac

    Hello, is there a way to space the icons farther apart from one another? Mine seem to be too close to each other…. Thank you

  21. Sam Simson

    I tried to hide the title from being shown on the menu. Seems like that function didn’t work. the title is still visible.

    • WPBeginner Support

      You would want to check with the support for your specific theme to see if that would be overriding your customizations

      Admin

  22. Tracy

    Hi! I tried using this method but I didn’t get the “select image” part. I only get to introduce the URL and Navigation Label… any ideas?

    • WPBeginner Support

      You may want to ensure the plugin was fully installed and activated for the select image to appear

      Admin

  23. Lea

    Thank you! Seems to be a better working solution than with font awesome! Is it allowed though to just use a e.g. facebook icon picture from google pictures then for the image I upload?

    • WPBeginner Support

      You would want to be sure to check the image usage rights if you take an image off of Google but if you are allowed to use it you could upload it to your site.

      Admin

  24. Larry Hilton

    I followed the directions for adding social images to my footer area and the Google & Yelp images aren’t visible. I did them the same way as those displayed. This does not appear to be browser related. Any suggestions

    • WPBeginner Support

      Start by reaching out to the plugin’s support to ensure there aren’t any known issues with those icons or how the menu is being added

      Admin

  25. Michele A

    Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!

    • WPBeginner Support

      Glad our guide could help :)

      Admin

  26. Muneeb

    Icons are currently on the site but don’t work even link is added. whats the reason?

    • WPBeginner Support

      If the urls are structured properly then you would want to let the plugin’s support know about your error to take a look if the error is with the plugin itself.

      Admin

  27. Mr. Debtsmith

    Hi guys,

    Installed the plug in. Added 3 social accounts and clicked “Main Nav” location box. The widget replaced the existing main menu instead of being added to it, and instead of the icons showing, the social account titles show instead. I’m looking forward to the benefits of this plug in. Hope you guys can help.

    Thanks!

  28. ARPIT

    Thank You Very Much for Essential Information that I was Seeking on the Internet.
    Highly Appreciated.

    • WPBeginner Support

      Glad our article could be helpful to you.

      Admin

  29. Dan

    My current theme has social media icons on the main top header in the desktop version, but when switched to mobile version the social icons are gone. how can I get them to stay and possibly my header links also?

    • WPBeginner Support

      Hi Dan,

      It seems like your theme hides them on the mobile version. Please contact your theme author and they will be able to help you with this.

      Admin

  30. David Cornish

    Thanks for the advice, I use Simple Social Icons now and I like them very much. Any advice on what plugin to use to display a “share on twitter” or “share on facebook” button above and/or below a post, similar to what you have under the title of this article?

  31. Rob Lilley

    Is there a way to add a target attribute, so the social page opens in a new tab/window?

    • Editorial Staff

      Yes, you can easily open the links in a new window. If you’re not seeing the option in your Custom Links by default, then you will have to click on the “Screen Options” tab on the top right of the screen and make sure that “Link Target” option is checked.

      Admin

  32. Umarbhatti

    Hi,
    This plugin looks awesome. Thanks!

  33. Aman Singh

    Hello,

    Can I get the custom code for the widget to look similar to what it is on WPbeginner?

    I like the widget look for social media icons on WPBeginner so can I get the code.

    Thank you.

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.