In Tutoriais

Botões para Compartilhar Personalizados


Olá! Como alguns leitores comentaram que gostaram dos links de compartilhamento aqui do blog, pesquisei uma forma de adicioná-los aos templates do Blogger, já que estes que uso atualmente já vieram no template, que baixei no Sora Templates; esse modelo se chama Boxer, apenas mudei as imagens. Conforme o que pesquisei, obtive esse resultado abaixo: 


Para isso, li este artigo do site Difluir, que mostra como adicionar manualmente ícones personalizados, legal para inserir no HTML de cada postagem e ter em mãos mais facilmente os locais em que se deve personalizar, além de um maior controle quanto ao que compartilhar; também li no Ferramentas Blog um artigo para inserir um gadget de compartilhamento flutuante nos posts, já que precisava saber como adaptar cada link em HTML, e olhei os códigos do próprio modelo que uso, feito pelo Sora Templates, para ter certeza se estava certinho. Os buttons para redes sociais que uso, vocês poderão encontrar no Beautiful Dawn Designs, mas em qualquer site, tipo Flaticon e Deviantart, tem muitas opções.
Acesse Modelo - Editar HTML, procure por <div class='post-footer-line post-footer-line-3'/> ou pelo post-footer do modelo que usar, e cole logo abaixo o seguinte código:
<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-FACEBOOK' title='Facebook'/></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-TWITTER' title='Twitter'/></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-GOOGLE' title='G+'/></a>
<!-- share buttons -->

É só colocar as URLs das imagens de ícones para Facebook, Twitter e Google+. Espero que gostem.

Related Articles

31 comentários:

  1. no me aparecio ese codigo en mi plantilla T-T

    ResponderExcluir
  2. E assim,como faz pra tirar os originais,tipo esse daqui? https://31.media.tumblr.com/e6fdf1c72ec2685d4c02c3fbc130e0e2/tumblr_inline_ncpvtyoZ3b1r7e8hm.png

    ResponderExcluir
    Respostas
    1. Vá até Layout - clique em Editar no gadget de Postagens no blog - deixe a opção Mostrar botões de compartilhamento desmarcada.

      Excluir
  3. como colocar o link do instagram, me ajude.. bhs

    ResponderExcluir
  4. como colocar o link do instagram? bj

    ResponderExcluir
    Respostas
    1. Vou pesquisar se há como; eu não uso essa rede e ainda não vi em templates a opção de compartilhar para instagram...vou dar olhada e se encontrar conto aqui. bj...

      Excluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Tente colocar o código depois de outras áreas de post-footer...aqui tá dando certo.

      Excluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Hmmm...aqui tá normal, não sei o que pode estar acontecendo...testei no modelo Simple do Blogger.

      Excluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Talvez seja; não me lembro se testei no travel, vou testar depois e te respondo ok :)

      Excluir
  8. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Testei novamente no Travel e está dando certo...

      Excluir
  9. por favor poderia passar como compartilhar tb o pinterest...obrigada..bjs

    ResponderExcluir
    Respostas
    1. Esse que uso aqui no blog já veio no template; vou pesquisar para saber como usar personalizado; talvez essa página possa ajudar: Pinterest goodies. Bjuss

      Excluir
  10. Me ajudou muito, obrigada <3.

    http://vivalani.blogspot.com.br/

    ResponderExcluir
  11. Como faço para o twitter compartilhar além do link o titulo??

    ResponderExcluir
  12. Na primeira vez que tentei deu certo, mas agora não vai mais :c

    ResponderExcluir
  13. Eu achei que eles ficaram muito grudadinhos. Tem como separar um pouco?

    ResponderExcluir
    Respostas
    1. Sim, depois de cada <img, acrescente um style ="padding: 5px", mudando o 5 por um número maior, para ficarem mais afastadas, tipo: <img style ="padding: 5px" src....

      Excluir
  14. Como edita ele, para ficar onde eu quero e colocar o nome compartilhar?

    ResponderExcluir
    Respostas
    1. É legal deixar abaixo do post-footer, como mostrei ali no post. Para adicionar um texto tipo Compartilhe, você poderia, por exemplo, colocar acima do código algo como:
      <span style="font-size: 20px; color: pink; font-family: 'delius swash caps',cursive">Compartilhe</span><br/>
      Mudando os valores, fontes e acrescentando outros estilos ^^

      Excluir
  15. Ola! super funcionou no meu blog, mas gostaria de centralizar os botÔes de compartilhamento, como é possivel?

    ResponderExcluir
    Respostas
    1. Coloquem o código entre center e /center.

      Excluir
  16. Oi tudo bem? Eu também estou usando um template do Follow Your Dreams e enfrento o problema de não conseguir colocar o botão de compartilhamento. Acredito eu que tenha algum código que impeça os botões de ficarem visível. Você poderia me dar uma dica de como resolver? Desde já obrigada!

    ResponderExcluir
    Respostas
    1. Eu usei os códigos desse post para criar botões personalizados nesse modelo :)

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart