Como adicionar ícones de mídia social WordPress personalizados ao seu site (2 maneiras)

Publicados: 2022-09-29

Você quer aprender como adicionar ícones de mídia social WordPress personalizados ao seu site?

Adicionar ícones de mídia social ao WordPress efetivamente permite que os visitantes saibam sobre suas contas de mídia social e os incentiva a segui-lo. A maioria dos plug-ins de mídia social oferece ícones para as principais plataformas de mídia social, mas se você deseja vincular a uma página de mídia social que esses plug-ins não suportam, pode ficar perdido.

Neste artigo, mostraremos como adicionar facilmente botões de mídia social personalizados ao WordPress para enviar usuários para redes sociais de mais nicho.

Por que adicionar ícones de mídia social ao seu site WordPress?

Adicionar ícones de mídia social ao seu site WordPress torna mais fácil para os visitantes do site encontrá-lo em outras plataformas. Considerando que as pessoas gastam em média 2 horas e 27 minutos por dia nas redes sociais, ter uma presença fora do seu site é uma forma inteligente de interagir com seu público-alvo.

Além disso, os ícones de mídia social são pequenos, permitindo que você os exiba em muitas partes do seu site, incluindo:

  • Menus do WordPress
  • Cabeçalhos do WordPress
  • Rodapés do WordPress
  • Áreas de widgets do WordPress
  • Páginas/postagens do WordPress
  • Produtos WooCommerce

Aqui está uma captura de tela de como o WPBeginner exibe links de mídia social em sua barra lateral do WordPress.

Ícones de mídia social do WordPress na barra lateral do WPBeginner

Ao adicionar ícones de mídia social ao seu site, é útil lembrar que os botões de seguir de mídia social são diferentes dos botões de compartilhamento social ou dos ícones de compartilhamento social. Em vez de pedir aos usuários que compartilhem conteúdo, eles incentivam os visitantes a seguir seus perfis de mídia social.

Com isso dito, vamos ver como adicionar ícones personalizados de mídia social ao seu site.

Como adicionar ícones de mídia social personalizados do WordPress: 2 maneiras

Como mencionamos anteriormente, muitos plugins populares do WordPress não incluem a funcionalidade de adicionar ícones de mídia social personalizados ao seu site. Muitas vezes você está limitado às principais plataformas sociais, como Facebook, Twitter, Instagram, YouTube, LinkedIn e Pinterest.

Se o seu público estiver ativo em mais sites sociais de nicho, você pode ter dificuldade em encontrar um plug-in que atenda às suas necessidades. Com isso em mente, compartilharemos abaixo duas maneiras fáceis de adicionar ícones de mídia social personalizados ao seu site.

  • 1. Adicionando ícones de mídia social do WordPress com SeedProd
    • Etapa 1. Instale e ative o SeedProd
    • Etapa 2. Crie um tema ou página de destino do WordPress
    • Etapa 3. Adicione seus ícones de mídia social personalizados ao WordPress
    • Etapa 4. Publique suas alterações
  • 2. Usando o widget de ícones sociais simples

1. Adicionando ícones de mídia social do WordPress com SeedProd

Para o primeiro método, usaremos o SeedProd para adicionar ícones sociais personalizados ao seu site.

Construtor de sites WordPress SeedProd

O SeedProd é o melhor construtor de sites WordPress que permite criar temas e páginas de destino personalizados do WordPress sem escrever código. Com centenas de modelos pré-fabricados, um construtor de arrastar e soltar e blocos e seções personalizáveis, aperfeiçoar seu design do WordPress com o SeedProd é muito fácil.

Neste método, usaremos o bloco de perfis sociais do SeedProd para adicionar ícones sociais personalizados ao seu site. O bloco é fácil de configurar, não requer CSS, HTML ou PHP personalizados e usa edição visual em vez de um shortcode.

Você também pode usar este plugin para:

  • Aumente sua lista de e-mail
  • Criar uma página em breve
  • Coloque o WordPress em modo de manutenção
  • Crie páginas de destino que convertem
  • Exibir páginas 404 personalizadas
  • Crie uma página de login personalizada do WordPress
  • E muito mais

Siga as etapas abaixo para adicionar ícones de mídia social do WordPress com o SeedProd.

Etapa 1. Instale e ative o SeedProd

Primeiro, visite a página de preços do SeedProd, escolha seu plano e crie sua conta. Para este guia, estamos usando o SeedProd Pro por seus recursos avançados.

Em seguida, faça login no painel da sua conta e visite a guia Downloads . A partir daí, você pode baixar o arquivo zip do plug-in e copiar sua chave de licença.

Encontre sua chave de licença SeedProd

Agora vá para a área de administração do WordPress e faça o upload do plugin SeedProd. Se você precisar de ajuda com esta etapa, siga este guia sobre como instalar e ativar um plug-in do WordPress.

Depois de ativar o plug-in, vá para SeedProd » Configurações e cole a chave de licença que você copiou anteriormente. Clique no botão Verificar chave para salvar as configurações e, em seguida, passe para a próxima etapa.

digite sua chave de licença

Etapa 2. Crie um tema ou página de destino do WordPress

O próximo passo é criar uma landing page ou design de tema WordPress; no entanto, isso dependerá de qual licença SeedProd você escolher na Etapa 1.

Usuários Basic e Plus podem criar landing pages com o SeedProd, enquanto usuários Plus e Elite podem criar landing pages e temas WordPress com este plugin.

Siga as etapas nestes tutoriais para criar seu design SeedProd:

  • Como criar um tema WordPress personalizado
  • Como criar uma Landing Page no WordPress

Depois de criar uma página de destino ou tema WordPress, vá para a Etapa 3 para adicionar seus ícones de mídia social personalizados do WordPress.

Etapa 3. Adicione seus ícones de mídia social personalizados ao WordPress

O SeedProd permite que você adicione ícones de mídia social personalizados em qualquer lugar do WordPress com seu construtor de temas fácil e poderoso. Depois de escolher seu Website Kit, basta abrir cada parte do tema e adicionar o bloco Perfis Sociais.

Adicionando ícones de mídia social ao cabeçalho do WordPress

Vamos começar adicionando ícones de perfil social ao seu menu WordPress. Para fazer isso, vá para SeedProd » Theme Builder, passe o mouse sobre seu modelo de cabeçalho e clique no botão Editar design .

edite seu modelo de cabeçalho SeedProd

Na tela a seguir, você verá um layout de 2 colunas como este:

Layout do construtor de cabeçalho SeedProd

Por padrão, o modelo que estamos usando tem um cabeçalho de 2 colunas com um logotipo e menu de navegação. Para adicionar seus ícones de perfil social, você precisará alterá-lo para uma seção de 3 colunas.

Primeiro, passe o mouse sobre a seção do cabeçalho até que ela tenha um contorno roxo e clique no ícone da seção duplicada .

Seção de cabeçalho duplicada do WordPress

Agora, na nova seção, passe o mouse sobre o conteúdo até que ele tenha uma borda azul e clique no ícone da Lixeira para removê-lo.

Excluir linha de cabeçalho

Depois disso, clique na opção de layout de 3 colunas para adicioná-lo à sua nova seção.

Escolha um layout de 3 colunas

Em seguida, mova os elementos da seção antiga para a nova seção arrastando e soltando.

Mova blocos antigos do WordPress para novas colunas

Quando terminar, você deverá ter 1 coluna vazia na qual poderá adicionar seus ícones de perfil social. Antes de fazer isso, passe o mouse mais uma vez sobre sua seção antiga e clique no ícone da lixeira para excluí-la.

Excluir seção antiga

Para adicionar seus perfis sociais personalizados ao seu cabeçalho, encontre o bloco Perfis sociais na barra lateral esquerda e arraste-o para a coluna vazia. Agora você pode clicar no bloco para ver suas opções de personalização.

Arraste e solte o bloco de perfis sociais

Por padrão, o bloco de perfis sociais exibirá ícones para Facebook, Twitter, Instagram e YouTube. Você pode alterar os ícones clicando em cada um e escolhendo uma rede de mídia social no menu suspenso.

Redes de mídia social SeedProd

As plataformas que você pode escolher incluem:

  • Discórdia
  • E-mail
  • Facebook
  • Facebook Messenger
  • GitHubGenericName
  • IMDB
  • Instagram
  • LinkedIn
  • Médio
  • Telefone
  • Pinterest
  • RSS
  • Folga
  • Snapchat
  • SoundCloud
  • Telegrama
  • TikTok
  • Twitter
  • Vimeo
  • Weibo
  • Whatsapp
  • WordPress
  • Youtube
  • Personalizado

Para adicionar um botão de perfil de mídia social personalizado, clique na opção Personalizar e no ícone de engrenagem para abrir as configurações.

Configurações personalizadas de perfil de mídia social

Em seguida, clique na opção Escolher ícone e procure um ícone diferente usando o Font Awesome que atenda às suas necessidades de mídia social. Por exemplo, você pode adicionar ícones sociais personalizados para Spotify, Skype, Tumblr, Behance, Airbnb, Audible, Playstation e muito mais.

Escolha um ícone de mídia social Font Awesome

Depois de escolher seu ícone de perfil social personalizado, você pode alterar a cor do ícone e adicionar seu link personalizado.

Cor e URL personalizados do ícone de mídia social

Mais abaixo, no painel de configurações, há opções para alterar o estilo, tamanho e alinhamento do ícone.

Tamanho, estilo e alinhamento do ícone de mídia social

Na guia Modelos , você pode adicionar um estilo personalizado aos seus ícones com 1 clique.

modelos de ícone de mídia social

A guia Avançado oferece configurações para personalizar estilos de ícone em um nível granular. Por exemplo, você pode alterar a cor de fundo do ícone, tamanho, espaço, sombra, margem e preenchimento.

Você também pode mostrar ou ocultar seus ícones de perfil social em dispositivos móveis ou desktop, o que é uma excelente maneira de melhorar a otimização móvel para visitantes que usam um smartphone ou tablet.

Configurações de visibilidade do ícone de mídia social

Antes de salvar suas alterações, passe o mouse sobre o bloco de perfis sociais e clique no ícone Salvar . Isso permitirá que você o reutilize em outras áreas do seu site sem adicionar manualmente cada link social e ícone personalizado novamente.

Salve seu bloco de ícones sociais SeedProd

Então, na janela pop-up, dê ao seu bloco um nome como “Ícones Sociais Personalizados” e salve.

Salve seu bloco de perfis de mídia social

Quando estiver satisfeito com os ícones de mídia social do WordPress, clique no botão Salvar no canto superior direito da tela.

Salve suas alterações

Agora, vamos adicionar seus ícones de mídia social ao rodapé do seu site.

Adicionando ícones de mídia social ao rodapé do WordPress

Para adicionar ícones sociais ao seu rodapé, acesse o painel do construtor de temas SeedProd, passe o mouse sobre o modelo de rodapé e clique no link Editar design .

Edite seu design de rodapé

Em seguida, abra o cabeçalho Blocos salvos na barra lateral esquerda e arraste o bloco de ícones sociais personalizados que você salvou na última etapa para uma coluna na área do rodapé.

Escolha seu bloco de ícones sociais personalizados salvos

Se o seu rodapé do WordPress tiver uma cor de fundo semelhante aos seus ícones, você pode clicar na guia Avançado e escolher uma nova cor de ícone com o seletor de cores.

Configurações avançadas de cores de perfis sociais

Quando tudo estiver adequado, clique no botão Salvar para armazenar suas alterações.

Adicionando ícones de mídia social à barra lateral do WordPress

Para adicionar ícones sociais personalizados à barra lateral do WordPress, volte ao painel do construtor de temas, passe o mouse sobre o modelo Barra lateral e clique no link Editar design .

Edite o design da sua barra lateral

Agora repita as instruções da etapa anterior e clique no botão Salvar quando terminar.

adicionando ícones de mídia social à barra lateral com SeedProd

Você também pode repetir esse processo para qualquer página do seu site, incluindo suas páginas de destino e páginas de conteúdo, como sobre, serviços e páginas de contato.

Etapa 4. Publique suas alterações

A última etapa é publicar seu novo tema WordPress para que os visitantes do seu site possam ver seus novos ícones de perfil de mídia social. Para fazer isso, vá para o painel do Theme Builder e gire o botão Enable SeedProd Theme para a posição "Sim".

ativar o tema SeedProd

Agora você pode dar uma olhada em suas alterações. Aqui estão alguns exemplos deste tutorial:

Cabeçalho

Ícones de mídia social no exemplo de cabeçalho

Rodapé

Ícones de mídia social no exemplo de rodapé

Barra Lateral

Ícones de mídia social no exemplo da barra lateral

2. Usando o widget de ícones sociais simples

O método a seguir é útil se você deseja adicionar apenas ícones de mídia social personalizados à barra lateral do WordPress ou às áreas de widget. Se você está procurando um plugin gratuito com ícones personalizados, você pode experimentar o Social Icons Widget & Block da WPZOOM.

No entanto, usaremos um plugin do WordPress chamado Simple Social Icons que você pode baixar gratuitamente do repositório de plugins do WordPress porque é direto, sem sinos e assobios extras.

Primeiro, vá para Plugins »Adicionar novo no seu painel do WordPress, procure o plugin Simple Social Icons e clique no botão Instalar agora .

Instale ícones sociais simples

Em seguida, clique no botão Ativar para ativar o plug-in em seu site WordPress.

Depois de instalar o plug-in, navegue até Aparência » Widgets e clique no ícone de mais (+) para adicionar um novo bloco à sua barra lateral.

Adicione o widget de ícones sociais simples

Você precisará procurar o bloco Simple Social Icons e clicar nele para incorporá-lo à sua área de widget.

Nas configurações do bloco, dê ao widget um título como “Siga-nos” e clique na caixa de seleção para abrir os links em uma nova guia. Essa é uma ótima maneira de manter os usuários em seu site e reduzir as taxas de rejeição, o que pode ajudar seu SEO.

Edite o tamanho, a borda e o alinhamento dos ícones sociais simples

Em seguida, vá em frente e ajuste o tamanho do ícone, o raio da borda, a largura e o alinhamento.

Em seguida, role para baixo e escolha uma cor de ícone personalizada, cor de foco, cor de fundo, cor de foco de fundo, cor de borda e cor de borda de fundo.

Editar cores de ícones sociais simples

Por fim, você pode inserir os links do seu perfil para mais de 20 plataformas de mídia social, incluindo:

  • Blogluvin
  • Driblar
  • Flickr
  • Boas leituras
  • Periscópio
  • Encontro
  • E os principais sites de redes sociais.
adicione seus links sociais aos ícones sociais simples

Lembre-se de clicar no botão Atualizar para salvar seu novo recurso. Em seguida, você pode visualizar sua barra lateral do WordPress para ver a aparência de seus ícones de mídia social.

Exemplo de ícones sociais simples na barra lateral do WordPress

É isso!

Esperamos que este artigo tenha ajudado você a aprender como adicionar ícones personalizados de mídia social do WordPress ao seu site de negócios.

Você também pode gostar destes outros guias úteis do nosso blog:

  • Como criar uma página WordPress moderna em construção
  • Como promover seu blog (Guia para iniciantes)
  • Como incorporar eventos do Facebook no WordPress

Obrigado por ler. Siga-nos no YouTube, Twitter e Facebook para obter mais conteúdo útil para expandir seus negócios.