Dicas Tech: Como colocar os seus Ícones das Redes Sociais pela Plataforma do WordPress
17/10/2013
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:
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é.
3.3 Depois de colocar o widget na posição que você deseja, ele irá abrir uma janela como na figura abaixo:
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
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.
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-> ” ” ” ” ” ” “”””” ” ” ” ” ” ” ” ” ” “->
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
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?
Olá Daniela, Fiz uma alteração no post e atualizei o codigo HTML, pois o que estava antes, não estava correto. Então tente usar esse código que está agora no post.
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?
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.
Posso salvar as imagens em um album do facebook e pegar o link de la??
Não, precisam ser imagens hospedadas em servidores online.
nao consigui.. as imagens nao aparecem.. e onde voce escreveu URL DO YOUTUBE…tem que ser com os ” que voce colocou ????
Olá Karen, se as imagens não tiverem hospedadas em um servidor online, elas não irão aparecer. Para verificar como hospedar e usar o URL das imagens de forma correta, verifique o post do link abaixo:
https://www.cbblogers.com/2014/01/picasaweb-como-hospedar-e-utilizar-url-de-imagem/
Com relação ao URL do Youtube, tem que ser o endereço do seu canal no youtube.
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
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.