Aggiungere le icone dei social media al menu di WordPress è un modo intelligente per promuovere i vostri profili senza ingombrare il sito. Questi piccoli loghi riconoscibili possono incoraggiare i visitatori a seguirvi su varie piattaforme, aumentando potenzialmente la vostra presenza online e il vostro engagement.
Abbiamo scoperto che con WordPress, il modo in cui aggiungere le icone dei social media al menu dipende dal fatto che si utilizzi un tema classico o a blocchi. Ma abbiamo trovato modi efficaci per farlo per entrambi i tipi di temi.
In questo articolo vi mostreremo come aggiungere le icone dei social media ai menu di WordPress, utilizzando metodi che funzionano sia per i temi classici che per quelli a blocchi.
Perché aggiungere le icone dei social media ai menu di WordPress?
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.
Il processo di aggiunta delle icone dei social media è diverso da quello di inserimento delle icone delle immagini nel menu di WordPress. Infatti, queste immagini devono essere collegate ai vostri profili social e spesso richiedono uno stile speciale per mantenere il loro aspetto su diversi dispositivi e dimensioni dello schermo.
Inoltre, dovrete assicurarvi che queste icone siano riconoscibili e di dimensioni coerenti, cosa che può essere difficile quando si usano file di immagine normali.
Detto questo, diamo un’occhiata a 2 modi semplici per aggiungere le icone dei social media ai menu di WordPress.
Video tutorial
Se preferite le istruzioni scritte, continuate a leggere. Utilizzate i link rapidi qui sotto per passare direttamente al metodo che desiderate utilizzare:
Metodo 1: Utilizzo del plugin Immagine del menu (solo per i temi classici)
Il modo più semplice per aggiungere le icone dei social media ai menu di WordPress è utilizzare Menu Image.
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.
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.
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.
Se si desidera aggiungere le icone dei social media a un’altra posizione del menu, come un menu flottante appiccicoso, è sufficiente aprire il menu a discesa “Seleziona un menu da modificare”.
È quindi possibile scegliere un menu dall’elenco e fare clic su “Seleziona”.
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, si avrà la possibilità di modificare la posizione di questo titolo nel menu o addirittura di nasconderlo completamente.
A questo punto, fare clic su “Aggiungi al menu”.
La voce apparirà ora nella colonna di destra.
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.
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”.
Quindi, selezionare “Fontawesome”.
È quindi possibile fare clic su “Marchi”.
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”.
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.
È 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”.
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”.
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”.
È sufficiente ripetere questi passaggi per aggiungere altre icone al menu di WordPress.
È anche possibile aggiungere icone ad altre voci importanti del menu di navigazione ed evidenziarle per attirare l’attenzione degli utenti.
Quando si è soddisfatti della configurazione del menu, è sufficiente fare clic su “Salva menu”.
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.
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.
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.
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”.
Il passo successivo è fare clic sull’icona della matita “Modifica”.
Si aprirà l’Editor completo di WordPress.
Fatto questo, sarete ora in grado di modificare e stilizzare il vostro menu di navigazione, che fa parte del modello di header di WordPress.
Per iniziare, fare clic sull’icona blu “+” nell’angolo in alto a sinistra. Nella barra di ricerca, digitate “Icone sociali”.
Quando appare il blocco giusto, trascinarlo sul modello del tema.
Per aggiungere la prima icona, basta fare clic sull’icona ‘+’ all’interno del blocco.
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.
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.
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’.
È 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”.
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”.
Quindi, fare clic sulla scheda “Stili”.
Qui è possibile modificare lo stile dei pulsanti facendo clic su “Predefinito”, “Solo loghi” o “Forma della pillola”.
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”.
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.
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 consultare il nostro articolo su come creare un menu a discesa in WordPress e la nostra guida definitiva sull’aggiunta di una barra di ricerca al vostro menu di navigazione.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
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.
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!
Jonas
Thanks for this article, it helped me a lot!
WPBeginner Support
Glad our article was helpful!
Admin
Farhad
Is there a way to have blog posts submitted to social media sites automatically?
Thank you.
WPBeginner Support
There are a few different options for that, you would want to start by taking a look at our article below:
https://www.wpbeginner.com/beginners-guide/how-to-automatically-post-to-facebook-from-wordpress/
Admin
Jimmy Ekisa
Brilliant article!!! You saved me time to create social menus and add them in the NewsPack Theme header, thank you so much.
Shyam
How to show icons of social profiles in footer?
WPBeginner Support
If your site has a widget area for your footer you could use one of the plugins from our list below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Admin
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
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
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
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
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
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).
WPBeginner Support
You would want to ensure you are an admin user and the site is on WordPress.org for the most likely reasons. You can see our comparison in our guide below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
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
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!
WPBeginner Support
No worries, it depends on what you’re looking for. For a starting point, we would recommend taking a look at our recommended plugins below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Admin
Elder Designer
amazing tutorial keep it up
WPBeginner Support
Glad you found our guide helpful
Admin
Stephanie Strand
Thank you! Very clear instructions. Helped this newbie enormously.
WPBeginner Support
Glad our guide was helpful
Admin
Rupali Tripathi
Thank you so very much for this video.
WPBeginner Support
You’re welcome
Admin
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
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
WPBeginner Support
That would normally require changing CSS, for a starting point you may want to take a look at our article here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
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
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
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
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
Michele A
Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!
WPBeginner Support
Glad our guide could help
Admin
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
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!
WPBeginner Support
You would want to let the plugin’s support know: https://wordpress.org/support/plugin/menu-image and they should be able to see if this is an error with the plugin itself.
Admin
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
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
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?
WPBeginner Support
Hi David,
Please see our list of the best social media plugins for WordPress.
Admin
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
Umarbhatti
Hi,
This plugin looks awesome. Thanks!
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.
WPBeginner Support
Hi Aman,
You can just use your browser’s Inspect tool to copy the HTML code and CSS.
Admin