Como adicionar ícones de mídia social na barra lateral do WordPress

Sempre que criamos um novo site WordPress, uma coisa que nunca esquecemos de fazer é adicionar ícones de mídia social. É uma maneira tão simples, porém poderosa, de se conectar com nosso público-alvo além do próprio site.

Adicionar ícones sociais ao seu site é como deixar um rastro de migalhas de pão para seus visitantes. Isso permite que eles saibam sobre sua presença nas mídias sociais e oferece uma maneira fácil de segui-lo em diferentes plataformas.

Neste artigo, mostraremos como adicionar ícones de mídia social à barra lateral do WordPress.

Por que adicionar ícones de mídia social à barra lateral do WordPress?

Uma barra lateral do WordPress é uma área em seu site que não faz parte do conteúdo principal. Nela, você pode exibir informações adicionais que possam interessar aos leitores, como as publicações mais recentes do seu blog e links para seus perfis sociais.

Adicionar links sociais à barra lateral do WordPress é uma boa ideia porque informa os usuários sobre suas contas de mídia social. Como resultado, eles podem verificá-las, segui-lo e ajudá-lo a aumentar o número de seguidores nas mídias sociais.

Além disso, a exibição de suas contas de mídia social pode criar um senso de credibilidade e servir como prova social. Quando os visitantes veem que você tem uma presença ativa nas mídias sociais, isso mostra que o seu site de comércio eletrônico ou de negócios é confiável.

Muitos blogs populares do WordPress exibem ícones de mídia social em suas barras laterais, como o WPBeginner:

Dito isso, vamos dar uma olhada em como adicionar ícones de acompanhamento de mídia social à barra lateral do seu site WordPress.

O método a ser usado depende do tema e do editor do WordPress que você está usando. Se quiser pular para uma determinada seção, use estes links rápidos:

Método 1: Adicionar ícones sociais com o editor completo do site (temas de blocos)

Se você for usuário de um tema de bloco, poderá adicionar botões de mídia social à barra lateral do WordPress usando o bloco Social Icons.

Observe que o processo varia de acordo com o tema que você usa. Alguns temas de blocos podem incluir uma barra lateral por padrão, à qual você pode adicionar o bloco de ícones sociais. Alguns também podem ter um padrão de cabeçalho que funciona como uma barra lateral, e outros podem não ter barra lateral alguma.

Neste exemplo, usaremos um tema de bloco padrão do WordPress que já inclui uma parte do modelo da barra lateral por padrão.

Primeiro, vá para Appearance ” Editor no painel de administração do WordPress.

Em seguida, você precisa selecionar “Patterns” (Padrões).

Isso o levará a uma página em que você poderá editar as partes do modelo do tema, como cabeçalhos, rodapés e barras laterais.

Aqui, selecione “All template parts” (Todas as partes do modelo).

Localize a parte do modelo Sidebar, clique no botão de três pontos e escolha “Editar”. Isso abrirá o editor do WordPress.

Agora você verá a parte do modelo padrão da barra lateral do seu tema. Aqui, as diferentes partes da barra lateral são normalmente separadas por um divisor de forma, como uma linha reta.

Digamos que você queira adicionar os ícones de mídia social abaixo da biografia do autor. Nesse caso, clique no botão “List View” (Exibição de lista) no lado esquerdo da página e selecione o bloco “Separator” (Separador) que está logo abaixo do grupo de elementos da biografia do autor.

Clique no menu de três pontos e selecione “Add after” (Adicionar depois).

Agora, clique no botão “+” em qualquer lugar da página.

Em seguida, escolha o bloco “Group” (Grupo).

Nesta etapa, você pode escolher um layout para o bloco Group.

Como estamos simplificando as coisas, vamos escolher a primeira opção.

Vamos adicionar um texto de chamada para ação que aparecerá acima dos ícones de mídia social.

Para fazer isso, basta clicar no botão “+” dentro do bloco Group e selecionar o bloco “Paragraph”.

Agora você pode inserir seu texto de chamada para ação.

Pode ser o que você quiser, como “Siga-nos nas mídias sociais”.

Depois disso, basta clicar no botão “+” novamente e localizar o bloco “Social Icons” (Ícones sociais).

Agora você pode começar a adicionar suas plataformas de mídia social ao bloco. Basta clicar no botão “+” novamente e adicionar seus botões de mídia social um a um.

Sinta-se à vontade para usar o recurso de pesquisa para navegar por todas as opções de redes sociais.

Depois de adicionar todos os botões, você pode começar a adicionar links personalizados aos seus perfis sociais.

Tudo o que você precisa fazer é clicar em um ícone social e inserir o URL do seu perfil.

Nessa etapa, você pode personalizar a aparência dos ícones.

Se o tamanho dos botões não for grande ou pequeno o suficiente, você poderá usar a opção “Size” (Tamanho) na barra de ferramentas do bloco.

Em Block Settings (Configurações do bloco), à esquerda, você pode personalizar a justificativa, a orientação, as configurações de link e os rótulos dos ícones.

Recomendamos que os links sejam abertos em uma nova guia para que os usuários não precisem sair do seu site para visitar seus perfis sociais.

Se você mudar para a guia Block Styles (Estilos de bloco), poderá alterar os estilos e as cores dos ícones para se adequarem ao design do seu site WordPress.

Dependendo de sua preferência, você pode fazer com que todos os ícones tenham cores diferentes ou a mesma cor, como abaixo.

Rolando para baixo na mesma guia, você encontrará as configurações Dimensions (Dimensões) para personalizar a margem e o espaçamento do bloco.

Essas configurações podem ser úteis se você quiser ajustar o espaçamento entre o bloco de ícones sociais e outros blocos na barra lateral.

Também é uma boa ideia adicionar um texto de chamada para ação na parte superior do bloco de ícones sociais para destacar onde estão os botões e incentivar os usuários a se tornarem seguidores ou assinantes.

Para fazer isso, vá em frente e adicione um bloco de parágrafo usando o botão “+”. Certifique-se de que ele esteja acima dos ícones sociais.

Alguns exemplos de call-to-action que você pode usar são “Siga-nos”, “Junte-se a mais de X leitores” ou “Receba as últimas atualizações”.

Se ainda não o fez, você também pode adicionar mais elementos à barra lateral, como suas postagens em destaque e comentários recentes.

Agora, basta clicar no botão “Save” (Salvar) no canto superior direito da página.

Se você não estiver vendo essas alterações refletidas em suas páginas ou publicações, provavelmente é porque nenhuma delas está usando a parte do modelo da barra lateral.

Para ter certeza de que a página desejada está usando um modelo de página com uma barra lateral, volte ao menu principal do editor de site completo. Em seguida, selecione “Páginas”.

Agora, selecione a página em que você deseja que a barra lateral apareça e clique no botão de lápis “Edit” (Editar).

Como exemplo, usaremos o modelo de página com a barra lateral em nossa página de amostra.

Nessa etapa, você pode clicar no ícone preto “Settings” (Configurações) no canto superior direito.

Em seguida, clique em “Pages” (Páginas) e selecione “Swap template” (Trocar modelo).

Você verá alguns modelos de página que seu tema fornece.

Aqui, basta escolher aquele com a barra lateral que acabamos de editar.

Depois disso, basta clicar em “Salvar” como de costume.

Ao acessar seu site do WordPress, você deverá ver uma barra lateral com alguns links sociais.

Método 2: Adicionar ícones de mídia social com widgets do WordPress (temas clássicos)

O próximo método é para pessoas que usam um tema clássico do WordPress com áreas de barra lateral prontas para widgets.

Para adicionar botões de mídia social à sua barra lateral, basta acessar Appearance ” Widgets no painel do WordPress.

Em seguida, navegue até a área do widget do WordPress onde você deseja adicionar o widget Social Icons. Em nosso exemplo, selecionaremos “Sidebar”, mas o nome pode ser diferente dependendo do tema que você estiver usando.

Agora, clique no botão “+” do bloco de adição no canto superior esquerdo, ao lado de “Widgets”.

Aqui, você pode procurar o bloco Social Icons (Ícones sociais).

Depois disso, você precisa clicar nesse widget da barra lateral ou arrastá-lo e soltá-lo em qualquer lugar na área de edição.

Em geral, é melhor adicionar seus ícones de redes sociais perto da parte superior da área do widget. Dessa forma, eles podem chamar a atenção dos visitantes desde o momento em que eles chegam à página.

Em seguida, de forma semelhante ao método anterior, você pode clicar no botão “+” para adicionar novos botões de mídia social, um a um, ao widget.

No exemplo abaixo, colocamos o bloco de ícones sociais abaixo do bloco de pesquisa. Também estamos adicionando um ícone do WhatsApp.

Nesse ponto, você pode começar a adicionar seus links sociais.

No WhatsApp, você pode digitar “wa.me/” e escrever seu número do WhatsApp ao lado. Não há necessidade de usar o símbolo +, mas certifique-se de adicionar o código de chamada do seu país, como nesta captura de tela.

Você também tem acesso às opções Block Settings (Configurações de bloco) e Styles (Estilos) no painel direito.

Para abrir essas opções, você pode clicar no ícone “Settings” (Configurações) no canto superior direito.

Além disso, sinta-se à vontade para adicionar um bloco de parágrafo na parte superior do widget de mídia social para seu texto de chamada para ação.

Recomendamos transformar os blocos Parágrafo e Ícones sociais em um grupo para que eles não pareçam separados na barra lateral.

Para fazer isso, basta selecionar o parágrafo e os ícones sociais juntos. Depois disso, clique no ícone “Transform” (Transformar) na barra de ferramentas do bloco e selecione “Group” (Agrupar).

Quando terminar, clique no botão “Atualizar” para oficializar as alterações em todas as suas barras laterais.

Veja como deve ser o resultado final:

Método 3: adicionar ícones personalizados de mídia social com o SeedProd (temas personalizados)

Se você usar o SeedProd, terá mais controle sobre a aparência dos botões de mídia social na barra lateral. Por exemplo, se usar uma plataforma de mídia social para a qual o WordPress não tem um ícone, você mesmo poderá criar um botão para ela.

Além disso, você pode ajustar o espaçamento dos ícones especificamente para dispositivos móveis.

Se você for novo no SeedProd e quiser usá-lo, precisará instalar e ativar o plug-in primeiro. Você precisará da versão Pro para poder acessar o recurso Social Profiles (Perfis sociais).

Para obter mais informações sobre como instalar um plug-in, consulte nosso guia sobre como instalar um plug-in do WordPress.

Em seguida, você pode seguir este tutorial para configurar seu tema com o SeedProd.

Agora, para adicionar os ícones sociais à barra lateral, você precisará ir para SeedProd ” Theme Builder. Em seguida, passe o mouse sobre o modelo “Sidebar” (Barra lateral) e clique em “Edit Design” (Editar design).

Agora você está dentro do construtor de páginas SeedProd. O bloco Social Profiles deve ter sido adicionado por padrão ao modelo do tema.

No entanto, se isso não tiver acontecido, você poderá usar a barra de pesquisa no painel esquerdo e digitar “Social Profiles”. Depois disso, basta arrastar e soltar o bloco para onde for mais adequado para você.

Não se esqueça de adicionar um bloco de texto na parte superior dos botões e escrever algum texto de chamada para ação.

Dessa forma, você está direcionando a atenção dos visitantes para os botões de mídia social na barra lateral.

Para personalizar a aparência dos ícones de perfil de mídia social, basta clicar no elemento “Social Profiles” (Perfis sociais). Aqui, você verá diferentes guias para personalizar os botões.

Na guia “Content” (Conteúdo), você pode adicionar mais ícones e alterar o estilo, o tamanho e o alinhamento dos ícones.

Além das opções padrão, como Instagram e Facebook, o SeedProd também tem botões para Slack, Telegram, Github e muito mais.

Para adicionar um novo ícone de mídia social que o SeedProd não tenha por padrão, é necessário clicar no botão “+ Add New Share”.

Depois disso, selecione “Custom” (Personalizado) no menu suspenso.

Para editar o botão, clique no símbolo de configurações de engrenagem ao lado do botão de seta.

Depois de fazer isso, basta selecionar “Choose Icon” (Escolher ícone).

Agora, você será redirecionado para a Icon Library (Biblioteca de ícones), onde há centenas de ícones de marca para escolher, cortesia dos ícones Font Awesome.

Neste exemplo, usaremos o Airbnb. Mas também há outras opções de plataformas, como LinkedIn ou Tumblr.

Depois de selecionar um ícone, você pode ajustar a cor e adicionar o link para a página de mídia social.

Aqui, decidimos usar a cor da marca do Airbnb. Ao inserir o link da conta social, não se esqueça de incluir também o “https://”.

A seguir, a guia “Templates”.

Se você mudar para essa guia, poderá ajustar o design do ícone. Você pode torná-lo mais quadrado, circular e/ou monocromático, dependendo de suas preferências.

Por fim, a guia “Advanced” oferece mais maneiras de personalizar seus botões de mídia social.

A seção Styles (Estilos) é onde você pode alterar o estilo, a cor, o tamanho, o espaço entre eles e o efeito de sombra dos ícones.

Em Spacing (Espaçamento), você pode editar a margem e o preenchimento do bloco. O que é ótimo no SeedProd é que ele permite que você faça com que a margem e o preenchimento sejam diferentes para dispositivos móveis e de desktop.

Para editar a margem e o preenchimento, basta escolher um dos ícones de dispositivo e inserir as medidas de margem e preenchimento da seguinte forma:

Rolando para baixo, você encontrará Visibilidade do dispositivo e Efeitos de animação.

Na primeira configuração, você pode optar por ocultar o bloco no desktop ou no celular. Isso pode ser necessário se você tiver optado por usar o bloco Social Profiles em outra parte do seu site e não quiser duplicar os ícones de perfil social.

Com Animation Effects, você pode selecionar um estilo de animação para o bloco quando os ícones forem carregados na página da Web. Esse efeito não é necessário se você não quiser distrair muito o visitante do conteúdo principal.

Depois de configurar o bloco Social Profiles de acordo com suas preferências, basta clicar no botão “Save” (Salvar) no canto superior direito.

Ou clique no botão “Preview” (Visualizar) para ver primeiro a aparência da barra lateral.

E é isso! Você adicionou com êxito o bloco de perfis sociais usando o SeedProd.

Veja como pode ser o resultado final:

Dica bônus: Incorporar seus perfis de mídia social em seu site WordPress

Adicionar ícones de mídia social à sua barra lateral é um ótimo primeiro passo para aumentar o número de seguidores e exibir prova social. Dito isso, talvez você também queira incorporar seus feeds de mídia social diretamente no seu site WordPress.

Isso permite que os visitantes vejam seu conteúdo mais recente e interajam com você diretamente no site, aumentando potencialmente o reconhecimento da marca e o envolvimento.

A maneira mais fácil de incorporar feeds de mídia social no WordPress é usar o Smash Balloon. Esse plug-in de mídia social permite que você conecte seu site a várias plataformas sociais e incorpore feeds delas.

A melhor parte? A Smash Balloon facilita a personalização desses feeds de acordo com sua preferência. Dessa forma, seus feeds de mídia social ficam ótimos com o restante do design do seu site.

Para obter mais informações, consulte estes tutoriais:

• Como criar um feed de fotos personalizado do Instagram no WordPress
• Como criar um feed personalizado do Facebook no WordPress
• Como exibir tweets recentes no WordPress (passo a passo)
• Como mostrar os vídeos mais recentes do canal do YouTube no WordPress
• Como incorporar vídeos do TikTok no WordPress

Esperamos que este guia passo a passo tenha ajudado você a aprender como adicionar ícones de mídia social à barra lateral do WordPress. Talvez você também queira conferir nosso artigo sobre como adicionar ícones de mídia social ao menu do WordPress e nossa lista de plug-ins obrigatórios do WordPress para sites de negócios.

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.