CBBlogers

Dicas Tech

Dicas Tech: Como colocar os seus Ícones das Redes Sociais pela Plataforma do WordPress

por Graziela Forti em Dicas Tech, Gadget, Redes Sociais

outubro 17, 2013 28

Icones, Redes Sociais, CBBlogers

Olá Pessoal, tudo bem com vocês?

No meu primeiro post que eu fiz a dica foi de como colocar os ícones das redes sociais no blog da plataforma do Blogger (post aqui), hoje vamos aprender a colocar os ícones no blog da plataforma do WordPress. Os primeiros passos são os mesmos que do outro tutorial, o que vai mudar é no momento de inserir o código HTML no blog.

Para a Plataforma do WordPress:

1º Passo – escolher o ícone:  como eu já havia explicado no tutorial anterior, você irá escolher a imagem do ícone das redes sociais em algum site de dowload de ícones. Eu uso o site Icon Archive, como eu já havia sitado no outro post, mas existem vários outros site sobre o assunto que você também pode utilizar.

 2º Passo – Armazenar imagens no servidor web: Depois da escolha do ícone, você irá hospedar as imagens em um servidor online de armazenamento de fotos na internet. Como foi postado no primeiro tutorial, eu uso o Picasa Web do google, mas você pode utilizar o servidor que já está acostumado.

3º Passo – colocar os ícones no blog: a partir daqui muda o tutorial, no painel do WordPress você irá seguir os seguintes passos:

3.1 Acesse a opção Aparência, irá abrir algumas opções em baixo, clique em Widgets:

Ícones, Redes Sociais, WordPress, CBBlogers

3.2 Irá aparecer varias widgets, você escolhe a opção Texto e irá puxar a janela até onde você quer que fique os ícones das redes sociais, na barra lateral ou no rodapé.

Ícones, Redes Sociais, WordPress, CBBlogers

3.3 Depois de colocar o widget na posição que você deseja, ele irá abrir uma janela como na figura abaixo:

Ícones, Redes Sociais, WordPress, CBBlogers

4º Passo – configurar o código HTML: agora você irá realizar a configuração das redes sociais, no campo onde está “Insira o código HTML aqui”  você irá colar o código abaixo:

<a href=”URL DO FACEBOOK“><img border=”0″ src=”URL da IMAGEM” /></a>

<a href=”URL do TWITTER“><img border=”0″ src=”URL da IMAGEM” /></a>

<a href=”URL do PINTEREST“><img border=”0″ src=”URL da IMAGEM” /></a>

<a href=”URL do GOOGLE+“><img border=”0″ src=”URL da IMAGEM” /></a>

<a href=”URL do YOUTUBE“><img border=”0″ src=”URL da IMAGEM“/></a>

Esse é o mesmo código HTML utilizado na plataforma Blogger, então a sequencia do tutorial volta a ser a mesma coisa que o outro post. Depois de inserir o código, você irá alterá-lo da seguinte maneira:

Só será alterado os campos que estão em negrito, inserindo o link das suas redes sociais nos campo URL DO YOUTUBE por exemplo.

No campo URL DA IMAGE, você irá colocar o link de onde a imagem foi salva no servidor web.

Caso queira colocar outras redes sociais é só acrescentar mais um campo do código abaixo, antes do </a>

<a href=”URL do YOUTUBE“><img border=”0″ src=”URL da IMAGEM“/></a>

No final é só salvar que a suas redes já estarão disponíveis no seu blog para que os seus leitores possam acessar e segui-las. Mas antes verifique cada link se está direcionado corretamente para as suas redes sociais.

Se alguém tiver alguma duvida ou dificuldade, é só deixar nos comentários que eu estarei ajudando.

Um Super Beijo,

CBBlogers by Gra 

E não se esqueça de passar no Blog Intensy Modas e também segui-la aqui no CBBlogers.

Facebook / Twitter  / Pinterest  / Instagram

*imagem via Six Revisions

Comentários

  1. ola parabéns pelo site esta muito legal com dicas muito importante,eu queria te fazer uma pergunta si vc pode me ajudar como que eu faço para colocar redes sociais nas postagens,no wordpress onde que eu coloco esses codigo html, para redes sociais ficar abaixo dos post.

    obg sidnei sucesso

    Responder
    • Olá Sidnei, para colocar o ícones de compartilhamento do post na redes sociais no WordPress é necessário usar um plugin. Estou estudando como fazer de forma pratica e fácil para providenciar o tutorial.

      Responder
  2. nao consigui.. as imagens nao aparecem.. e onde voce escreveu URL DO YOUTUBE…tem que ser com os ” que voce colocou ????

    Responder
  3. Posso salvar as imagens em um album do facebook e pegar o link de la??

    Responder
  4. Ola, não consigo fazera imagem aparecer no meu blog. Fiz todo o passo a passo ara hospedar a imagem no picasa e ainda assim nada…pode e ajudar?

    Responder
    • Olá Andreia, para a imagem não estar aparecendo pode ser um desses dois problemas: primeiro o tema que você está utilizando no WordPress não deixa a imagem aparecer no seu blog ou então é algum código de HTML que você colocou errado na janela de texto. Então aconselho a primeiro mudar o tema para fazer um teste e ver se pode ser esse problema. Se não resolver, analise cada detalhe do código HMTL e veja se tem alguma palavra diferente do código que está no tutorial.

      Responder
  5. Olá! Eu até consegui colocar a imagem da rede social como a do twitter, porém, quando clico no logo do twitter do meu blog, diz que o link está quebrado! Eu confirmei para ver se era o link do perfil mesmo e estava correto, coloquei exatamente aonde vc manda mas não vai. Testei com todas as minhas redes sociais, porém o wordpress não reconhece o endereço. O que faço?

    Responder
  6. Para quem não está conseguindo fazer as imagens aparecerem é só arrumar as “” (aspas), elas estão para os lados errados. Deu tudo certo aqui.

    Responder
    • Quero agradeçer a autora desse texto e a Lais por ter informado de um erro minusculo que faz toda a diferença, valeu, as aspas tem que mudar do url das redes sociais e também aonde vai ficar a imagem !

      estas funcionam-> ” ” ” ” ” ” “”””” ” ” ” ” ” ” ” ” ” “->

      Responder
    • Miss Independent Blog maio 29, 2015 09:26

      Boa Tarde,

      Eu consegui colocar as imagens e os logotipos estão a funcionar. Mas os logotipos aparecem muito grandes e na vertical. Podia me ajudar? Obrigada

      Responder
  7. Olá como faz no Blogger?

    Responder
  8. Deu certo, porem a imagem está grande, qual codigo consigo reduzir?
    Obrigada!!

    Responder
  9. Foto de perfil de Vera

    Graziela,

    Muito obrigada por este tutorial! Consegui aplicar em todos os botões que queria colocar no meu blog!
    Parabéns!
    Beijos

    Responder
  10. Como faco para deixar o icone menor?

    Responder
  11. obrigadaaaaaaaaaaa! suei pra encontrar um post eficaz sobre como colocar um icone das redes sociais no wordpress!
    Deu super certo!

    Responder
  12. Muito bom!!

    Demorei muito até encontrar alguém que explicasse de um modo claro para iniciantes como eu…rss

    Obrigada!!

    Responder
  13. Muito Obrigada pelo tutorial me ajudou muito, mesmo.

    Responder
  14. Quando fico logado como pagina não posso interagir com pessoas que fazem parte de minha pagina.
    Gostaria de saber como fazer para minha pagina curtir e comentar fotos e estatus de um membro.
    No momento só posso compartilhar as postagens dos perfis como está na imagem que estou enviando.
    Desde já agradeço a ajuda!!!

    Responder
  15. Muito bom o tutorial, deu tudo certo aqui. Só queria saber se tem como fazer com que o link das redes sociais abram como uma nova aba? Porque agora quando clico está abrindo na página do site e isso é meio ruim. Obrigada 😀

    Responder
  16. ola adorei as dicas!!!! eu tenho o wordpress porem não encontrei o Widgets vc poderia me ajudar

    Responder
  17. Olá, boa tarde.
    Fiz isso no meu site, só não aparece o logo. Já tentei de tudo, desde ícones de até imagens normais e hospedados em outros locais, e até nas mídias do meu site, mas não vai.
    meu site: http://www.pvhdigital.com

    A imagem não aparece no rodapé.
    Como eu poderia resolver isso?

    Responder
  18. Qual o plugin que você utilizou para colocar o nome do autor do post? Você poderia me informar por favor?

    Responder
  19. Graziela, utilizei a configuração como vc indicou, porém no celular (android) a imagem não aparece, sabe me dizer porque ? Help, please!

    Responder

Deixe um comentário

O seu endereço de email não será publicado.


*


#CNB2018 - VÍDEO OFICIAL
  
Pular para a barra de ferramentas