Botões para compartilhar os posts

em 26 de março de 2014

Não resta dúvida: as redes sociais são um poderoso aliado para a divulgação dos blogs.
Ter em seu blog botões que possibilitem compartilhar, curtir, retuitar e recomendar ampliam o alcance do blog e fazem-no crescer mais rápido.
Oferecer ao leitor todas as facilidades possíveis também é algo útil e inteligente.

Já publiquei aqui no blog alguns tutoriais que ensinam como inserir botões ao final dos posts.
Relembre:
http://www.elainegaspareto.com/2013/10/divulgar-blog-botoes-compartilhar-curtir-retuitar.html

Hoje quero compartilhar com você estes botões, que sempre vi em blogs Wordpress mas que podem ser usados em blogs do Blogger, basta fazer do modo correto.
Veja a demonstração:
http://contos.elainegaspareto.com/



Para começar você precisa acessar o site que gera os botões.
Acesse: Shareaholic
Lá você verá esta página inicial:

https://www.shareaholic.com/
Clique no botão Sign up free para criar sua conta.
Será mostrada essa página:


Preencha os campos pedidos com seu email, crie uma senha e clique no botão azul.
Você receberá um email do site para confirmar a conta.
Clique no link de confirmação que receber em seu email cadastrado ao criar a conta.
Aparecerá esta página após confirmar sua conta:


Nessa fase vamos criar os seus botões de compartilhar postagens.
Clique em For you site, no alto da página.
Vai abrir esta:


Clique onde sinalizei.
Na página que abrir siga exatamente conforme destaquei em minhas marcações:

Ao clicar em Continue você será direcionado a esta página:


Coloque um nome para sua seleção de botões (eu coloquei Tutoriais).
Vá mexendo até entender como funciona, é muito simples.

Escolha a posição dos botões, role a página e escolha quais botões deseja ter.
Se desejar retirar algum dos que são padrão basta clicar sobre eles e arrastar para fora do widget.
Depois de concluir a sua seleção clique em Save settings.
Aparecerá então essa janelinha, com os códigos:

Não feche essa janela!

Agora vá ao painel administrativo de seu blog e clique na aba Modelo.
A seguir clique em Editar HTLM  e dentro da caixa de código tecle Ctrl+F.
Na barra de pesquisa que abrir digite </head> e tecle Enter para localizar.
Achou?

Volte à janelinha com os códigos e copie o primeiro, o maior.
Cole este código maior acima de </head>.
Salve.

Agora, dentro da barra de pesquisa, cole isso:

 <div class='post-footer-line post-footer-line-2'/>

Com dificuldades para copiar o código? 
Leia: 
Como usar os tutoriais deste blog?

Dê Enter para localizar.
Podem aparecer 2 ocorrências do trecho, mas nos interessa a segunda ocorrência, tá?
Achou?
Imediatamente acima do trecho localizado cole o segundo código da janelinha, o menor.
Salve as alterações.

Olha como fica o meu:

Parece complicado por causa do tanto de imagens mas na verdade é mega simples!
E ao instalar os botões você passa a ter acesso à estatísticas, é muito interessante!
Caso tenha mais de um blog e queira instalar os botões nele também basta clicar em Add website, em sua página de perfil no site Shareaholic e seguir o que a tela for pedindo.



Caso você queira ter em seu blog mas não tenha tempo ou jeito para fazer entre em contato comigo; nós combinamos o valor (bem em conta) e eu faço pra você.

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

30 comentários , comente também!

  1. Sabe aquela frase: tinha uma pedra no meio do caminho ..........?
    Eu mudo para: tinha um HTML no meio do caminho rsrsrsrsr
    Vou compartilhar.
    Beijos querida.

    ResponderExcluir
  2. Será que dou conta? Vc faz parecer tão simples, acho que eu é sou meio ogra mesmo! Mas vou tentar.
    Obrigada!!!!
    Bjs

    ResponderExcluir
  3. Olá Eleaneaine por causa desses botões ando doida a mais de um mes, quero publicar mas com os meus desenhos, e ir para o link, 1 passo não consigo encontar um editor simples, basicamente para escrever o meu lik, e mais algumas coisas, depois, quanto aos Rssrs, não consigo dar conta, nem consigo criar o bloglovin porque eles pedem, o código do Feeds, o meu blog está todo desconfigurado, deixou de ser prazer publicar, e passou a ser uma complicação até já desisti do blog da moda, a minha operadora, fez com que as tags, importantíssimo, desaparecem-sem, ando mesmo chateada, tu Eleane uma vezz nós falamos, por skype tu fizeste-me uns botões, no topo o trabalho nunca ficou terminado porque nunca mais falamos, até já tive para eleiminar o blog, estou farta, cansada, tudo o que seja em html no corpo do blog não consigo, ainda tive para te pedir ajuda, mas como nunca mais falamos, fiquei a pensar, que não querias trabalhar comigo, nunca te cheguei a pagar os botões, fizeste através do link que está disponivel no blog não houve trabalho, fhotoshopo.
    também te falei sobre a box de lado que abre e fecha, essa não chegas-te a fazer, nem o falsplyer, não estou a cobrar estou só a dizer as coisas para te lembrares de mim foi a um ano atrás, se quiseres voltar preciso mesmo de ajuda, também quero mudar o banner quem o fez de oferta foi numas horas, foi a dona do blog casa decorada, nós costumamos falar, os botões que quero é igual ao blog gosto disto, no topo todos juntos, o face, o pinterest, o google+ o meu feed que não sei qual é, o tumblr tenho os desenhos, mas como são os lado um dos outros têm de ser feito em html, depois as malditas tags, e um editor de fotos simples, tenho de pagar o dominio até dia 5 de abril, se não conseguir nada depois de tantas tentativas até passo noites a falar com o google apps, e de 1 blog já desisti, eles mandam-me pesquisar ir a foruns, fico furiosa. também hoje é dia 1 de abril já falta pouco para decidir, se quiseres pensar em falar comigo eu gostava muito de uma palavra amiga e de ajuda, claro pago os serviços.
    desculpa o testamento, quanto ao teu post é bom mas não vou tentar, porque sei que vou matar a minha cabeça e não vou conseguir.
    o blog é www.reciclardecorar.net
    Beijinhos
    Alexandra Melo de Portugal

    ResponderExcluir
  4. Oii galera sigam meu blog ele é otimo
    http://frasesloucasdeumaadolescente.blogspot.com/

    ResponderExcluir
  5. Obrigada!!

    Consegui fazer!!

    Beijos,

    KAren

    ResponderExcluir
  6. Oi amiga! =)
    Quando puder me tira uma dúvida? Sobre botões, os sites de notícia tem um botão "recomendar" do face. Mas ele não abre aquela janela mostrando que vc vai compartilhar aquilo na sua linha do tempo. Ele simplesmente faz tudo automaticamente. E seus amigos do face apenas veem que vc recomendou aquela matéria! Acho tão interessante... porque não dá aquele "trabalho" de escrever mais alguma coisa, escolher imagem, nada!!! Você só clica em recomendar, ele computa sua recomendação e todos os amigos do face veem aquilo!!! Tipo as notícias do R7. ;) Ensina? :D Super beijo!

    ResponderExcluir
  7. Serio muito obrigada eu já estava arrancando os cabelo da minha cabeça pra colocar esses botões :)
    my blog is: http://blogdothayrlan.blogspot.com.br

    ResponderExcluir
  8. bom dia flor, estou tentando colocar os botões do face, pin e outros, mas qdo chega no último passo não encontro essa frase´: div class='post-footer-line post-footer-line-2'/

    já tentei várias vezes e nada. Muito obrigada por compartilhar seus conhecimentos está me ajudando muito em meu blog, se puder me faça uma visita, vc está no lado direito do blog, aliás vc é fantástica, parabéns, bom findi, aguardo retorno, bjubju
    luzia aragão

    ResponderExcluir
    Respostas
    1. Luzia, todo template tem esse trecho.
      Mas se realmente não achar tente localizar por trechos menores, tipo pot-footer-line-2
      Tenho certeza que achará.
      bjssss

      Excluir
    2. no meu tem div class='post-footer-line post-footer-line-2'
      mas com o / no final ,não tem ,ai quando eu coloco nesse sem o / ,não dá senrto

      Excluir
  9. Parabéns, ótimo artigo. Por favor continue assim ;).

    ResponderExcluir
  10. Respostas
    1. Andressa, se você seguir o tutorial e se não houver nada em seu blog que cause conflito não há razão pra não dar certo :)

      Excluir
  11. Eu queria saber como faço pra colocar os botões de compartilhamentos em tipo caixa separado do post, igual o seu?! Obrigada

    ResponderExcluir
    Respostas
    1. Amanda, não entendi...
      Como assim, separado do post?

      Excluir
  12. Olá,
    Tava procurando esses botões há muito tempo e encontrei aqui no seu blog.
    Pena que não estão funcionando direito. Dos 5 que eu escolhi só aparece um, que é o do Facebook.
    Uma pena.
    Grande abraço.

    ResponderExcluir
    Respostas
    1. Almir, tem certeza?
      No meu blog de exemplo todos estão funcionando...
      Experimente refazer, talvez tenha esquecido algo...

      Excluir
  13. nao consegui gostaria de aprender nao de pagar pra vc fazer vc cobra pra encinar tbm?

    ResponderExcluir
  14. Olá, Elaine, eu gostaria de saber se há como trocar a imagem que o site disponibiliza para uma personalizada.

    ResponderExcluir
    Respostas
    1. Anna, nesse site só dá pra usar os modelos previamente disponibilizados, até onde eu sei...

      Excluir
  15. Não consegui :( coloco no meu lay mas não aparece

    ResponderExcluir
  16. Funcionou no meu. Valeu!

    http://meuuniversopeculiar.blogspot.com.br/

    ResponderExcluir
  17. Seus tutoriais sempre didáticos e interessantes. Obrigada por compartilhar



    nobodyaskedmichelle.blogspot.com.br

    ResponderExcluir
  18. Olá Elaine. Segui todos os passos direitinho, e conferi tudo mas nao deu certo, nao aparecem os botoes. Se puder me ajudar agradeço :)

    ResponderExcluir
    Respostas
    1. Infelizmente não há muito o que dizer.
      Recomendo que tente em outro modelo de blog pois pode ser que haja algum conflito no que está tentando...

      Excluir
  19. Olá Elaine consegui pôr os botões, mas agora queria tirar os outros botões que estavam. O que preciso tirar do código para fazer isso?

    ResponderExcluir
    Respostas
    1. Infelizmente não sei como ajudar porque cada template tem os códigos em lugares diferentes...

      Excluir
  20. Não aparece o código no meu.Será que é porque meu templete é baixado da net?

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…