Dica tech: Como colocar os seus Ícones das Redes Sociais pela Plataforma do Blogger

redes sociais cbblogers dica de html

192 thoughts on “Dica tech: Como colocar os seus Ícones das Redes Sociais pela Plataforma do Blogger

  1. Olá!
    Boa noite!
    Já faz um tempão que tento colocar as redes sociais uma ao lado da outra e nunca consigo, pois na hora que clico o ícone não corresponde a rede social.. Então sempre coloco uma em cima da outra.. Gostaria de saber se pode me ajudar?
    Desde já obrigada!Ah esse post foi perfeito!!

    1. Olá Lolla, claro que posso te ajudar sim.

      Entrei no seu blog, e pelo que verifiquei a imagem que vocês escolheu já vem junto com o nome da rede social, estou certa? Me confirme isso por gentileza.

      Se a imagem do ícone já vier com o nome da rede social, realmente não vão ficar uma do lado da outra, pelo simples fato de ser uma imagem larga. E mesmo se você diminuir a imagem, irá ficar desproporcional pois a figura que você escolheu é para ficar no formato que está, uma embaixo da outra.

      Caso queira que fique no formato como está aqui na pagina do CBBlogers (uma do lado da outra), é necessário que você escolha um ícone que tenha somente o logo da rede social, sem o nome, ai sim você irá conseguir colocar um do lado do outro.

      Att
      Grazi

    1. Olá Fanny, verifiquei no seu blog e pelo jeito pode ser algum problema na sua configuração ou na imagem escolhida, verifique os três passos abaixo:

      1º verifique se você hospedou as imagens no servidor web, e utilizou o URL da Imagem e não a imagem salva somente no seu computador.

      2º pode ser algum erro no código de HTML, então analise o código HTML e verifique se está igual ao do tutorial

      3º ou a imagem do ícone escolhida não está mais disponível.

      Verifique as três opções, se o problema persistir me avise que estarei verificando junto com você para solucionarmos.

      Bjo

      1. Eu não consegui, será que se eu mandar minhas informações por e-mail pra você você faz pra mim? Eu não vejo problema nisso é que eu não estou conseguindo mesmo, se sim manda seu e-mail na resposta, beijos.

  2. OI Grazi, que pode me ajudar? Estou tentando fazer do jeitinho que você postou mas não estou conseguindo. Se poder, entre na minha página, acredito que na hora da figura que está saindo alguma coisa errada. Fico no aguardo. Muito obrigada.

    1. Olá Eva, verifiquei a sua pagina e pelo modo como está aparecendo as redes sociais, é alguma coisa que você sem querer acrescentou no código HTML. Verifique cada parte do código para ver se não tem nenhum carácter errado, pois uma virgula fora do lugar muda tudo. Outra coisa, verifique também as imagens se você hospedou de forma correta em um servido online, porque não adianta copiar somente o URL de uma imagem da Internet que não vai dar certo. Depois de verificar esses dois detalhes e o problema persistir me avise para que possamos achar o problema e solucionar.

  3. Olá, quando eu coloco o código, depois de pronto, quando clico no ícone, o link leva ao endereço do meu blog / o link da rede social… tem como resolver?

  4. Olá, amei as dicas, e já estou usando no meu blog!
    Agora queria saber como que faz pra colocar embaixo do post na mesma linha do link dos comentários, esses ícones de “curti” “pin it” “tweetar” e “g+”???

  5. , boa noite vou ver o seu blog e vou tentar mexer no HTML que não percebo nada, mas como se coloca TAGS, eu preciso Urgentemente e não consigo, PODE-ME AJUDAR? eu já tenho o programa do adsend no meu blog agora ando a procura como colocar o dobl click não consigo já pedi a tantas pessoas para me darem consultoria eu pago pelo serviço mas poucos sabem ou querem, eu preciso do tags não consigo criar, o dobl click caixa de E-mails para enviar automaticamente para varias pessoas, aumentar as visitas, e finalmente criar uma loja será que existe algum informático/a que me ajude, por favor
    Atenciosamente
    Alexandra Melo

    1. Olá Guga, se a imagem do ícone não está aparecendo, deve ser a forma como você a hospedou no servidor online, nesse caso veja o post do link abaixo, nele tem toda a explicação de como hospedar e utilizar de forma correta a URL da imagem.

      https://www.cbblogers.com/2014/01/picasaweb-como-hospedar-e-utilizar-url-de-imagem/

      Já com relação ao site não existe, pode ser o endereço URL que esteja errado na sua configuração, pois uma virgula fora do lugar dá erro e muda tudo.

      Então verifique primeiro se está hospedando de forma correta a imagem e analise os códigos HTML que você está usando, se o erro persistir me retorne para que eu possa te ajudar.

    1. Olá Manoel, o que vc não consegue colocar, as imagens que não aparecem ou o link que não é direcionado a rede social desejada?
      Se caso for as imagens é só seguir o passo a passo do tutorial desse link que é para funcionar:

      https://www.cbblogers.com/2014/01/picasaweb-como-hospedar-e-utilizar-url-de-imagem/

      Se for o redirecionamento para o site da rede social reveja o código e analise para ver se não tem nada errado, pois apenas uma virgula fora do lugar no código HTML, ele não funciona.

    1. Olá Marcia, você verificou se o código HTML está correto?
      Tente hospedar a imagem em outro servidor para verificar se não é o Picasa que está com problemas. Experimente o Tinypic (http://tinypic.com). Pois eu seguir novamente todo o passo a passo e deu tudo certo. Se o problema persistir me avise para ajudarmos a solucionar.

    1. Olá Grazi, eu andei analisando novamente o código e o código do tutorial não está funcionando, então tentei utilizar esse código abaixo:





      Substitua somente o URL da rede social e da imagem. Agora é para dar certo.

      1. Ainda assim nao estou conseguindo.
        Coloco tudo como voce explica, mas na hora de visualizar no blog aparece como se fosse um arquivo cortado no meio.
        Vc sabe o que pode ser?
        Obrigada

        1. Olá Gabriela, pelo que verifiquei no seu blog, está aparecendo correto duas redes sociais. Caso tem mais ícones para aparecer deve ser algum espaço que você deve ter colocado entre um código ou outro que não deixa aparecer as outras.

    1. Boa tarde Daniele, o problema de se usar layout free é que em alguns casos não permitem a alteração. E em outros os códigos HTML mudam, então pode ser que ele não aceite outros tipos de códigos. Nesse caso teria que estudar como está o código do seu layout para fazer a alteração. Pode ser que tenha que fazer a alteração dentro do corpo do blog e não em um arquivo de Gadgets.

    1. Olá Juliana o problema de se trabalhar com Layout Free é que nem sempre os códigos HTMLs estão da mesma forma que um layout feito por partes. Então nesse caso dificulta a edição. No seu caso pode ser alguma coisinha que você está colocando errada por isso dá erro.

  6. OI Grasy, estou muito confusa, voce diz no seu tutorial na parte que voce diz ‘ACREDITO QUE ATE AGORA NAO HOUVE COMPLICAÇÕES”…bem estou confuso no seguinte, Eu entrei no site que voce descreveu acima, fui na imagem e coloquei salvar imagem. Depois que eu fiz isso eu abri meu dropbox e salvei dentro do dropbox, ai eu peguei o URL da imagem (acredito) e ai no tutorial voce diz URL DO PINTEREST E depois URL DA IMAGEM, no caso URL do pinterest seria o que? (gente eu devo ser muito burra), olha o exemplo do meu pinterest essa é a URL da minha imagem https://www.dropbox.com/s/q776aj9x45mbxes/Active-Instagram-3-icon.png?dl=0, ele salva em PGN, no meu blog apareceu uma imagemzinha errada nao aparece a imagem do pinterest…. nossa me ajuda

    1. Olá Edilaine, No URL DO Pinterest, você irá colocar o endereço do seu perfil na rede social. Quanto ao salvar a imagem: é melhor que você salve em JPG e de preferencia no drive do próprio Google que seria o Picasa Web (https://picasaweb.google.com/home). Pois sempre que tentei salvar no dropbox não deu certo para mim. O final do endereço da imagem precisa ser sempre o formato dela, que no seu caso seria o png e não png?dl=0 como está no seu endereço. Veja um exemplo de uma imagem do meu blog (https://lh6.googleusercontent.com/-Jko3aB65n-A/U69L3k64H9I/AAAAAAAAMR0/ZA4PdiAs660/s311/Perfil.JPG).

  7. Olá,

    Eu fiz do jeito que você disse, mas pra mim, a imagem aparece, mas quando tento clicar em cima, ele não direciona pra lugar nenhum. O link tá certo, como eu faço?

  8. Grazi, Boa Tarde!
    Consegui fazer do jeitinho que você falou… Apenas uma coisa ficou um pouco diferente, o ícone que eu hospedei era pequeno e quando eu passei para o meu blog ele ficou em tamanho maior, você sabe o que pode ter acontecido?! Beijão

    1. Olá Viviani, a imagem precisa ser exatamente no tamanho que se encaixa no seu blog, por exemplo da no meu blog eu uso o tamanho de cada ícone de 60px por 60px. Pode ser que na hora que vc baixou a imagem ela parecia estar pequena e quando exportou ela ficou no tamanho original.

  9. Olá,gostaria de agradecer pelo conteúdo produzido e dizer que ele é de grande utilidade, é simples e de fácil entendimento. Muito obrigada!

    Deu tudo muito certo!

    1. Olá Maike, vc hospedou a imagem no Dropbox, sempre que alguém hospeda a imagem desses tutoriais no Dropbox não dá certo, eu mesma nunca usei o Dropbox para fazer esse tipo de hospedagem. Pode ser que o erro esteja ai, tente fazer com o drive do Google o Picasa (https://picasaweb.google.com/home) para ver se da certo. Caso o erro persistir deve ser algum problema com a imagem que você está hospedando.

  10. Olá, um ótimo post. Está me ajudando muito.
    Porém eu gostaria de colocar os ícones todos numa linha e que ocupassem a largura total dessa linha.
    Será que você pode me ajudar?
    Eu tentei setar via html mesmo, um tamanho (altura e largura) para eles, mas não fica bom.
    Queria realmente que eles ocupassem todo o espaço disponível na linha.
    Muito obrigada.

    1. Olá Leonardo, esse tutorial é para os ícones ficarem um do lado do outro. Se você estiver usando um layout free pode ser por esse motivo que ele está mudando o código.

      Com relação a configuração para que o link abra em outra janela, me envie um e-mail graziela@cbblogers.com com a duvida, assim eu poderei te ajudar, pois será necessário incluir um código e se eu colocar aqui nos comentário não irá aparecer para você ver.

    1. Olá Jessica, o Picasa está passando por processo de atualização e as fotos estão sendo transferidas para o Google+ Fotos. E por isso em alguns casos, as imagens não estão aparecendo. Aconselho adiciona-las no seu álbum do Google Fotos e inserir o link do da foto do álbum.

    1. Olá Gabi, o Picasa está passando por processo de atualização e as fotos estão sendo transferidas para o Google+ Fotos. E por isso em alguns casos, as imagens não estão aparecendo. Aconselho adiciona-las no seu álbum do Google Fotos e inserir o link do da foto do álbum.

  11. Oi Graziela! Tudo bem? estou com um probleminha, espero que vc possa me ajudar! 🙂 É a primeira vez que eu estou fazendo um blog, ainda não tenho nada publicada, estou tentanto configurar tudo antes. Eu fiz tudo como vc falou, e qndo entro no blog, aonde tem que estar o icone aparece uma folha rasgada na metade, e qndo clico encima me direciona corretamente para a rede social. O que eu estou fazendo de errado? Muito obrigada pela atenção!

  12. Olá,

    bom,seguir todas as instruções,comseguir,mas as imagens das redes sociais não aparecem,já salvei outras no picasa,mas também não aparecem,o que faço?
    qualquer coisa dar uma olhada lá grupojeitusdedanca.blogspot.com.

    Obrigado!

  13. Olá, tudo bem? Segui todos os passos de acordo com o tutorial, porém além de não aparecer as fotos dos ícones eles não abrem os links, aparece como página não existente, e hospedei as imagens no Picassa, poderia por gentiliza me ajudar?

    1. Olá Aline, entrei no seu blog e os links estão corretos. Eu cliquei e fui direcionada para as paginas das redes sociais. Quanto a exibição dos ícones, você deve estar hospedando a imagem de forma errada, por isso elas não devem estar aparecendo. Mas para te ajudar siga o passo a passo desse tutorial de como hospedar a imagem e utilizar o URL: https://www.cbblogers.com/2014/01/picasaweb-como-hospedar-e-utilizar-url-de-imagem/. Caso não der certo a hospedagem no Picasa, você pode fazer o processo em outro servidor de imagem online que pode ser o tinypic(http://tinypic.com).

  14. Olá, tudo bem? então eu amei o tutorial, eu fiz e realmente consegui, o problema que não aparece a imagem do Gadget, e eu hospedei no Picasa e eu não coloquei em modo álbum e sim separadamente, poderia conferir para mim? desde já muito obrigada

  15. Oi Grazi, vim aqui te agradecer pelas dicas, com elas enfim consegui colocar os ícones das minhas Redes Sociais no meu Blog.
    Muitoooo obrigada, você me ajudou muito!
    Se quiser da uma passadinha no meu Blog será muito bem vinda, te espero! Beijinhos…

    1. Olá Julio, vamos tirar essa sua duvida:
      Você terá que fazer a substituição dos códigos pelos URL para que quando clicarem no ícone o seu leitor seja direcionado para sua rede social, ou seja, irá ficar desse forma:

      URL DA IMAGE – você irá colocar o link da imagem que você salvou no servidor Web, que pode ser o ícone do facebook, twitter, youtube entre outros.

      URL DO YOUTUBE – você irá colocar o link do seu canal no youtube e os outros links serão das outras suas redes sociais.

  16. Ola ! Comecei o meu blog essa semana, e ainda ha muitas coisas que tenho que aprender, realmente eu estava me debatendo pra tentar colocar isso, muito obrigada mesmo, esse post vai ser de grande serventia !

    1. Olá Inês, deve ser o endereço do URL da imagem que você está utilizando errado. Para utilizar o endereço correto é preciso abrir a imagem e depois copiar o endereço do URL.
      Tente fazer assim para ver se dá certo.
      Beijos

  17. Ola equipe do site cbblogers!
    Quando coloquei na primeira vez deu um erro mais depois fiz uma correção e agora tudo certo ok. Parabéns por compartilhar seu conhecimento continue assim rs.

    Bom! quero aproveitar e já que é lançamento não vou deixar vocês desapercebidos ou que seus leitores entrem primeiro, então veja meu humilde blog criado esses dias porem com uma grande novidade mundial ok.
    Acesse aqui –> http://gruposwowapp.blogspot.com.br/

  18. Obrigada pela dica, mas continuo a não conseguir… Mesmo depois de gravar as imagens não aparecem no Blog, apesar de as ter guardado no picasa e de utilizar esse URL

  19. Passando pra deixar um recadinho de agradecimento, graças a sua dica conseguir fazer exatamente da maneira que falou.
    Parabéns pela iniciativa de ajudar outras pessoas iniciantes neste mundo virtual dos bloggers.

  20. Olá, eu queria saber do código social que vem em vários templates do blogger que vc n precisa hospedar a imagens, basta digitar esse codigo.
    Ex: ‘sorting-05 linkedin’
    Ex: ‘sorting-06 flickr’
    Com essa chamada inicial, n necessita de uma url para o icone, sabe onde se consegue?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Me segue lá no Instagram

This error message is only visible to WordPress admins

Error: API requests are being delayed for this account. New posts will not be retrieved.

Log in as an administrator and view the Instagram Feed settings page for more details.