Adicionar ícones de mídia social ao menu do WordPress é uma maneira inteligente de promover seus perfis sem sobrecarregar o site. Esses logotipos pequenos e reconhecíveis podem incentivar os visitantes a segui-lo em várias plataformas, potencialmente aumentando sua presença on-line e seu envolvimento.
Descobrimos que, no WordPress, a forma de adicionar ícones de mídia social ao menu depende do uso de um tema clássico ou de blocos. Mas encontramos maneiras eficazes de fazer isso para ambos os tipos de temas.
Neste artigo, mostraremos como adicionar ícones de mídia social aos menus do WordPress, usando métodos que funcionam tanto para temas clássicos quanto para temas em bloco.
Por que adicionar ícones de mídia social aos menus no WordPress?
Ao adicionar ícones de mídia social aos seus menus do WordPress, você pode obter mais cliques, engajamento e seguidores em todos os seus perfis de mídia social.
Os ícones de mídia social também podem chamar a atenção do visitante sem adicionar texto extra aos seus menus. Isso permite que você promova muitos perfis diferentes em um pequeno espaço.
O processo para adicionar ícones de mídia social é diferente da inserção de ícones de imagem no menu do WordPress. Isso ocorre porque essas imagens precisam ser vinculadas aos seus perfis sociais e, muitas vezes, exigem um estilo especial para manter a aparência em diferentes dispositivos e tamanhos de tela.
Além disso, você deve garantir que esses ícones sejam reconhecíveis e tenham um tamanho consistente, o que pode ser um desafio ao usar arquivos de imagem comuns.
Dito isso, vamos dar uma olhada em duas maneiras fáceis para iniciantes de adicionar ícones de mídia social aos menus do WordPress.
Tutorial em vídeo
Se você preferir instruções escritas, continue lendo. Basta usar os links rápidos abaixo para ir direto ao método que você deseja usar:
Método 1: Usando o plug-in de imagem de menu (somente temas clássicos)
A maneira mais fácil de adicionar ícones de mídia social aos menus do WordPress é usar o Menu Image.
Ao criar seus ícones sociais, você pode usar qualquer imagem que tenha carregado na biblioteca de mídia do WordPress.
Por exemplo, muitas das principais empresas de mídia social fornecem logotipos que podem ser usados no seu site, como o kit de ferramentas da marca Twitter. Você também pode fazer download de ícones de bibliotecas on-line, como o site Font Awesome.
O Menu Image também se integra ao plug-in Font Awesome. Isso permite que você navegue e importe todos os ícones do Font Awesome diretamente do painel do WordPress, incluindo ícones para todas as principais redes sociais.
Recomendamos instalar primeiro o plug-in Font Awesome antes de continuar com o tutorial. Para obter instruções detalhadas sobre como configurar o Font Awesome, consulte nosso guia sobre como adicionar facilmente fontes de ícones ao seu tema do WordPress.
Independentemente de como planeja fornecer os ícones de mídia social, você precisará instalar e ativar o plug-in Menu Image. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Após a ativação, talvez você queira dar uma olhada nos tamanhos dos ícones e alterá-los, se necessário. Para fazer isso, você precisa ir para Menu Image ” Menu Image.
Ao criar seus ícones sociais, você pode usar qualquer um dos tamanhos de imagem padrão do WordPress, como miniatura, imagem ou grande. O Menu Image também permite que você escolha entre três tamanhos exclusivos que são definidos como 24×24, 36×36 e 48×48 pixels por padrão.
Esses tamanhos devem funcionar bem para a maioria dos sites WordPress, mas você pode alterá-los digitando números diferentes nos campos 1st, 2nd ou 3rd Menu Image.
Feito isso, clique em “Save Changes” (Salvar alterações) para armazenar suas configurações.
Para adicionar ícones a um menu de navegação, vá para Appearance ” Menus. Por padrão, o WordPress mostrará o menu principal do seu site.
Se quiser adicionar ícones de mídia social a um local diferente do menu, como um menu flutuante fixo, basta abrir o menu suspenso “Select a menu to edit” (Selecionar um menu para editar).
Em seguida, você pode escolher um menu da lista e clicar em “Select” (Selecionar).
Para obter instruções passo a passo sobre como criar um novo menu, consulte nosso guia sobre como adicionar um menu de navegação no WordPress.
Para começar, você precisará adicionar cada perfil social ao seu menu como um novo link.
Quando estiver pronto, clique para expandir a seção “Links personalizados” e digite o endereço da página de mídia social que deseja usar. Por exemplo, você pode inserir o URL do seu grupo do Facebook ou canal do YouTube.
Você também precisará digitar algum “Texto do link”. Em uma etapa posterior, você terá a opção de alterar onde esse título aparece no menu ou até mesmo ocultá-lo completamente.
Feito isso, clique em “Add to Menu”.
Esse item aparecerá agora na coluna da direita.
Para adicionar um ícone de mídia social, basta passar o mouse sobre o novo item de menu.
Em seguida, clique no botão “Menu Image” quando ele for exibido.
Observação: Se você não vir o botão “Menu Image” (Imagem do menu), clique em “Save Changes” (Salvar alterações). Agora, o botão “Menu Image” deverá aparecer quando você passar o mouse sobre qualquer item do menu.
Agora você pode decidir se deseja usar uma imagem da biblioteca de mídia do WordPress ou um ícone fornecido pela Font Awesome.
Para usar um ícone pronto do Font Awesome, clique no botão de opção ao lado de ‘Icon’.
Em seguida, selecione “Fontawesome”.
Em seguida, você pode clicar em “Brands” (Marcas).
Agora você verá todos os ícones de marca, incluindo ícones para todas as principais redes sociais, do Facebook ao LinkedIn. Quando você vir a imagem que deseja usar, basta clicar nela.
Outra opção é usar seu próprio ícone da biblioteca de mídia do WordPress, selecionando o botão de opção “Imagem”. Em seguida, clique no link “Set Image” (Definir imagem).
Agora você pode escolher uma imagem da biblioteca de mídia do WordPress ou carregar um novo arquivo do seu computador.
Independentemente de onde você obtiver o ícone, o Menu Image mostrará uma visualização à direita.
Agora é possível alterar se o título do link aparece acima, abaixo, antes ou depois do ícone de mídia social usando as configurações de “Posição do título”.
Muitos ícones de mídia social são imediatamente reconhecíveis, portanto, o título do link pode ser desnecessário. Se você estiver adicionando muitos ícones de redes sociais a um menu de navegação, os títulos podem até mesmo fazer com que o menu pareça mais confuso e complicado.
Dito isso, talvez você queira ocultar o título selecionando o botão de opção “Hide” (Ocultar).
À medida que você fizer alterações, a visualização ao vivo será atualizada automaticamente, para que você possa experimentar configurações diferentes e ver qual é a melhor.
Por fim, se você estiver usando sua própria imagem, poderá redimensionar os ícones de mídia social usando o menu suspenso “Image Size” (Tamanho da imagem).
Ícones maiores chamam a atenção do visitante, mas também podem distraí-lo. Com isso em mente, talvez você queira experimentar tamanhos diferentes para ver o que funciona melhor em seu blog do WordPress.
Quando estiver satisfeito com a configuração do ícone de mídia social, basta clicar em “Save Changes” (Salvar alterações).
Basta repetir essas etapas para adicionar mais ícones ao menu do WordPress.
Você pode até mesmo adicionar ícones a outros itens importantes no menu de navegação e destacar esses itens de menu para chamar a atenção dos usuários.
Quando estiver satisfeito com a configuração do menu, basta clicar em ‘Save Menu’.
Agora, você pode visitar seu site para ver os novos ícones de mídia social em ação.
Esta é a aparência em nosso site de demonstração.
Método 2: Usar o Site Editor completo (somente temas de blocos)
O WordPress tem um bloco de ícones sociais integrado que permite criar um menu com ícones de mídia social e exibi-los em um layout agradável.
Esse bloco vem com ícones incorporados para todas as principais redes sociais, portanto, não é necessário instalar um plug-in como o Font Awesome ou carregar ícones na biblioteca de mídia.
No entanto, só é possível adicionar ícones e links de mídia social ao bloco Social Icons, portanto, ele não é tão flexível quanto o plug-in Menu Image.
Se você estiver usando um tema de bloco, poderá adicionar um bloco de ícones sociais a qualquer parte do seu site, como o cabeçalho ou o rodapé. Dessa forma, é possível exibir um menu de mídia social em todo o site.
Para começar, vá para Appearance ” Editor no painel do WordPress.
A partir daí, você verá alguns menus para personalizar o design do seu tema de bloco.
Para adicionar ícones de mídia social ao seu menu, clique em “Navigation” (Navegação).
A próxima etapa é clicar no ícone de lápis “Editar”.
Isso abrirá o WordPress Full Site Editor.
Feito isso, agora você poderá editar e estilizar o menu de navegação, que faz parte do modelo de cabeçalho do WordPress.
Para começar, clique no ícone azul “+” no canto superior esquerdo. Na barra de pesquisa, você deve digitar “Social Icons”.
Quando o bloco certo aparecer, arraste-o e solte-o no modelo do tema.
Para adicionar o primeiro ícone, basta clicar no ícone “+” dentro do bloco.
Na janela pop-up que aparece, digite o ícone que deseja adicionar, como “Twitter” ou “Facebook”.
Quando o ícone correto aparecer, basta clicar para adicioná-lo ao seu blog do WordPress.
Agora, clique no novo ícone de mídia social.
Isso abre uma pequena barra na qual você pode digitar o URL para o qual deseja criar o link, como sua página do Facebook.
Para adicionar mais ícones sociais ao WordPress, basta clicar no ícone “+” e repetir o mesmo processo descrito acima.
Depois de adicionar todas as plataformas de mídia social, talvez você queira personalizar o bloco. Para fazer isso, clique para selecionar o bloco Social Icons (Ícones sociais) e, em seguida, clique na guia “Block” (Bloqueio).
Você pode alterar a justificativa, o alinhamento e a orientação do ícone usando as configurações de “Layout”.
Por padrão, todos os links de mídia social serão abertos na mesma guia. Para manter os visitantes em seu site, clique para ativar a opção “Abrir links em uma nova guia”.
Por padrão, o WordPress mostra apenas os ícones sociais, sem nenhum texto.
Se quiser mostrar o texto ao lado de cada ícone, clique para ativar o botão de alternância “Show labels” (Mostrar rótulos).
Em seguida, clique na guia “Styles” (Estilos).
Aqui, você pode alterar o estilo do botão clicando em “Default” (Padrão), “Logos Only” (Somente logotipos) ou “Pill Shape” (Forma de pílula).
Por fim, você pode alterar o espaço entre os ícones sociais usando as configurações em ‘Block Spacing’.
Quando estiver satisfeito com a aparência do menu, clique no botão “Save” (Salvar).
Agora, se você visitar seu site, verá os ícones de mídia social ao vivo.
Dica bônus: Incorporar feeds sociais em seu site WordPress
Adicionar ícones de mídia social aos menus do WordPress é uma ótima maneira de obter mais seguidores e engajamento em suas diferentes contas. Entretanto, há muitas outras maneiras de promover seu Twitter, Facebook e outros perfis sociais.
A melhor maneira de obter mais seguidores e engajamento é incorporar um feed social ao vivo em seu site. Isso permite que você mostre as últimas publicações dos seus sites de mídia social, juntamente com botões que os visitantes podem usar para interagir com suas publicações ou segui-lo nas mídias sociais.
A melhor maneira de adicionar feeds de mídia social ao seu site é usar o Smash Balloon. Ele é o melhor plug-in de feed de mídia social para WordPress e permite incorporar feeds ao vivo do Twitter, Instagram, Facebook e muito mais.
Para obter mais informações, consulte nosso tutorial do WordPress sobre como adicionar feeds de mídia social ao WordPress.
Esperamos que este artigo o tenha ajudado a aprender como adicionar ícones de mídia social aos menus do WordPress. Talvez você também queira ver nosso artigo sobre como criar um menu suspenso no WordPress e nosso guia definitivo sobre como adicionar uma barra de pesquisa ao seu menu de navegação.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no 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!
Administrador
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/
Administrador
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/
Administrador
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
Administrador
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.
Administrador
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.
Administrador
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.
Administrador
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.
Administrador
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/
Administrador
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.
Administrador
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/
Administrador
Elder Designer
amazing tutorial keep it up
WPBeginner Support
Glad you found our guide helpful
Administrador
Stephanie Strand
Thank you! Very clear instructions. Helped this newbie enormously.
WPBeginner Support
Glad our guide was helpful
Administrador
Rupali Tripathi
Thank you so very much for this video.
WPBeginner Support
You’re welcome
Administrador
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.
Administrador
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/
Administrador
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
Administrador
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
Administrador
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.
Administrador
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
Administrador
Michele A
Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!
WPBeginner Support
Glad our guide could help
Administrador
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.
Administrador
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.
Administrador
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.
Administrador
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.
Administrador
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.
Administrador
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.
Administrador
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.
Administrador