Acessórios Widget Vanessa S.
Botões AddThis compartilhar post nas redes sociais
Depois que eu lancei o Template Art Nouveaur, alguns leitores me enviaram sugestões de artigo, pedindo que eu ensinasse a instalar aqueles botões do AddThis, para compartilhar os artigos em redes sociais, que aparece no rodapé dos posts.
De fato, notei que ainda não existia tutorial publicado aqui sobre ele.
Na minha opinião, o AddThis oferece o serviço de compartilhamento de forma mais completa que já vi, pois este recurso permite o compartilhamento dos seus posts em mais de 270 redes sociais diferentes.
E o melhor, ele dá ao usuário diversas opções de escolha e personalização destes botões.
Eu uso este recurso do AddThis, se quiser conferir, passe o mouse em cima do último ícone no rodapé do post, em “Favorite e Compartilhe”.
Como eu já citei acima, este recurso é tão completo, fornece tantas opções aos usuários que irei dividir o tutorial em 2 partes, para que não fique tão extenso, pois pretendo apresentar a vocês todas as formas possíveis de uso deste recurso, assim vocês terão a opção de escolher qual se encaixa melhor em seus blogs.
Neste artigo vou explicar como se cadastrar e instalar este recurso no seu blog e vou demostrar algumas opções de personalização dos botões, e no próximo vou ensinar uma forma de personalização mais avançada.
Obtendo o código:
1. Acesse a página www.addthis.com
2. Em “Get sharing buttons for” escolha a opção “A web site“.
3. Em “Select your style” escolha a opção de botões que você achar melhor.
Note que na coluna ao lado direito, em “Preview” você poderá visualizar como ficará o botão que você escolheu.
4. Se você quiser obter acesso as informações das estatísticas, saber quantas pessoas compartilharam seus post usando o AddThis, clique em “Create an account“.
O site vai pedir que você faça um pequeno cadastro. Preencha os dados para se cadastrar. É rápido, simples e é grátis.
pois será através dele que você receberá as informações das estatísticas, informando quantas vezes seu artigo foi compartilhado nas redes sociais.
Através desse cadastro pois que você receberá as informações das estatísticas, informando quantas vezes seu artigo foi compartilhado nas redes sociais.
Finalize o cadastro, clicando no botão “Register”.
5. Na próxima página o site fornecerá um código. Copie este código.
Clique em “Get the Code“.
Onde instalar o código:
Agora que você já escolheu e já configurou o seu botão, veja neste post as opções de local mais adequado para colar o código. Eu recomendo que você instale na linha do Rodapé do post.
Formas de personalizações simples do botão
No código fornecido pelo site, note que a palavra “Share” é em inglês, mas você pode alterar o “Share” para “Compartilhe“.
Por exemplo:
Se você escolheu este modelo padrão:
O código fornecido será este :
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#username=SEU-USERNAME"></script>
<!-- AddThis Button END -->
Lembre-se que no exemplo acima, onde está “SEU-USERNAME” é o seu nome de usuário, aquele que você cadastrou no site.
Acrescentando mais ícones:
Se você quiser, pode acrescentar mais ícones, basta escolher qual o ícone da rede social que você quer acrescentar e incluir no código. Inclusive pode incluir o ícone para imprimir.
Basta incluir o código referente ao botão que você quer acrescentar logo acima da linha </div>
Veja exemplos:
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_stumbleupon"></a>
<a class="addthis_button_digg"></a>
Código do botão para imprimir:
<a class="addthis_button_print"></a>Botões com CSS3 sem ícones:
Se você quiser, pode acrescentar apenas um botão simples, sem incluir ícones. Desta forma, quando o leitor passar o mouse em cima do botão, abrirá a janela com as opções das redes sociais para compartilhar o seu post.
1º passo:
Você deve escolher a opção de local mais adequado para instalar o código.
Eu recomendo que você instale na linha do Rodapé do post.
Após escolher o local para instalação, cole este código:
<style type='text/css'>
.addthis_share_btn a, .addthis_share_btn a:visited {
background: #222; /*--edite a cor do seu botão--*/
display: inline-block;
padding: 6px 12px;
font-family: arial,helvetica,lucida,verdana,sans-serif;
font-size: 12px;
line-height: 1em;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.addthis_share_btn a:hover {
background: #111; /*--edite a cor do seu botão--*/
color: #fff;
}
.addthis_share_btn a:active { top: 1px; }
.addthis_share_btn a span, .addthis_share_btn:visited a span {
background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;
padding: 1px 0 1px 18px;
}
</style>
<!-- AddThis Share Button -->
<div class='addthis_toolbox addthis_share_btn'>
<a class='addthis_button_compact' href='http://addthis.com/bookmark.php'>
<span>Compartilhe</span></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- End AddThis Share Button -->
Agora basta personalizar a cor do botão de acordo com as cores do seu template, editando a cor em "background" que está destacado em vermelho, no código.
Se quiser, confira Demo
Caso queira conferir outras formas de personalização mais avançada dos botões, veja o artigo:
Botões AddThis com ícones Personalizados
Artigo atualizado em fevereiro/2013.
Olá muito bom esse addthis
tentei com outos…
mais o melhor é esse valew!
Oi chará!
Muito obrigado pela ajuda…
beijos
Pois é, foi alterado o add this.
Poderia atualizar o post?
Obg (:
Já atualizei.:)
Creio que a pagina do ADD This foi alterada, nao consegui acompanhar o post pelo que vi lá… Talvez seja bom “atualizar” o post. Obrigado. Ricardo
Muito obrigada Vanessa, funcionou direitinho =D (menos o curtir 🙁 )
ñ consigo ver os avatas das pessoas que curten minha página no facebook
gandiget>>>sidebar
Vlw vc me ajudou bastante !
Vanessa,
tento instalar o AddThis agora e ele não mostra os contadores zerados, e sim como se já estivessem usados.
Você já viu algum erro parecido?
Não se preocupe que isso é normal. É pq seus post já haviam sido compartilhados antes mesmo de vc instalar o AddThis.
Como faço para centralizar?
Estou com a mesma dúvida. Também tentei, e não consegui.
obg eu tinho o widget no meu outro blog mas eu nao guardei ele, ele tinha a opçao de configurar as redes sociais facil , eu so queria saber mesmo como colocar as redes sociais que essa semana eu procurei o html
mto boa a dica do baraka.
tbém fiquei dias tentando resolver o preblema.
valeu!!!
Sybylla
Valeu pela dica! A dica que o Baraka deu acima tb funciona bem. Obrigada mais uma vez pela dica;)
Eu tive o mesmo problema que muitos acima relataram, onde vem o link do blog inteiro e não da postagem.
O problema foi resolvido quando eu adicionei os botões de maneira automática pelo botão Adicionar no Blogger que tem no painel do Add This. Ele encaminha você para um painel do Blogger onde o código é adicionado com o gadget HTML/Javascript e os botões escolhidos aparecem direto no rodapé do post. Talvez isso ajude.
Abraço!
brigado obrigado arrazeures
Oi, Clau =)
Enfim, coloquei o AddThis no CBSaberes!
A única dúvida que tenho é quanto ao botão "Send to Blogger"…por acaso, ele "reproduz" o post? Espero que não.
Muito obrigado por "compartilhar" mais essa dica.
Abraços
Obrigado, sempre que venho neste site resolvo meus problemas
Descobri!!!
O Baraka já havia comentado como personalizar a mensagem com o titulo do post acima!
Pra tirar o @AddThis e colocar o seu username é só add o tw:via='username' no final antes do />
Excelente dica do Baraka!!!
Não sabe o quanto procurei por essa modificação.
Agora só falta eu personalizar a mensagem do botão do Twitter com "via @username" ao invés de "via @AddThis".
Baraka
Muito obrigada pela ajuda! Fico tão feliz qdo vejo isso \o/
Valeu mesmo! Espero que a Juliana agora consiga resolver o problema. 😉
— Juliana Netto —
Eu fiz assim no meu e deu certo!
Por exemplo, o botão do twitter é assim, certo:
a class='addthis_button_twitter'
Para compartilhar o post individualmente (e não o endereço do blog apenas) eu alterei assim:
a class='addthis_button_twitter' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'
Onde, os códigos —
expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' —
vão mostrar que é o link do post é que deve ser compartilhado. Repita isso com todos os outros botões!
Juliana Netto
Deve ser algum problema no seu template. Lamento,mas não tenho como ajudar.
Tenho tentando usar o botão de compartilhamento do addtoany e do addthis.
O problema é que, em ambos, quando clico nos ícones orkt,facebook, buzz, por exemplo, ao invés de aparecer o link e o título do post, aparece o link do blog como um todo.
Como faço para que os botões compartilhem os conteúdos dos meus posts isoladamente?
PS: Uso o miscali.blogspot.com como teste, se quiser conferir.
encontramos.net
Tenta usar a tag de alinhamento centralizado antes do código html:
<center> e </center> no final do código.
Luis Henriques
Que bom que vc entendeu..realmente, não há como eu ajudar individualmente os leitores, a quantidade de pedidos que recebo, se fosse atender todo mundo, teria que largar trabalho,casa,marido etc e ficar praticamente 24h na net trabalhando de graça..ai eu ia viver de que né?Não dá! rs
Sobre o seu pedido, já estou providenciando a continuidade dos artigos sobre html e css há um tempo e esses elementos logo logo entrarão na lista desta série em artigos publicados. É que acabei de voltar de viagem de férias, e logo volto as atividades blogueiras, assim que me reorganizar.
Desculpe pela minha ignorância Clau, acabo de ler os termos e vi que estou totalmente errado em te pedir tal coisa. E lendo realmente você me convenceu não da para oferecer ajudar personalizada de graça para todo mundo, afinal você tem milhares de leitores já pensou se fosse ajudar todos desse tipo? rsrsrs. Então aqui fica o meu pedido de desculpa pela minha implicância.
Eu queria deixar além das minhas desculpas um sugestão de postagem; vi que seu blog é muito completo, na minha opinião o mais completo da categoria se me permite dizer mais senti falta de explicação da utulização de alguns termos para usuários avançados.
Ex; elemento id e class, div e span
Será que dava para fazer um tutorial sobre o uso desse elementos, sei que são usados para personalizar determinadas partes do template mais não usá-los bem ao certo e acho que seria de interesse de um grande número de blogueiros.
E ai o que acha?
Muito bom o tutorial… Estava querendo muito! MAs tenho uma Duvida… Como cenralizar a barra? Veja como ficou no meu blog.
Luis Henriques
Por favor, dá uma lida nos Termos de Uso do Blog.
E se enviar uma cópia do código fonte para seu e-mail você poderia me ajudar?
Luis Henriques
Tais recursos podem variar de template para template. Sendo assim, não tenho como te ajudar.
Oi Clau admiro muito seu trabalho. Sempre consigo implementar com perfeição todos os seus elementos, mais por obra do destino não estou conseguindo o mesmo com esse, quer dizer, implementar eu consigo mais ocorre um problema. Olha só como faço, eu pego o código do AddThis e insiro debaixo da linha post-footer-line-1 (não pus o código completo porque não é aceito nos comentários mais acho que da para entender), para ficar no rodapé do post:
Até ai tudo bem, o problema é que se uma pessoa clicar no botão do Twitter por exemplo aumento o número em todos os botões do Twitter na página inicial. Como faço para resolver isso, estou desesperado e agradeceria muito se pudesse me ajudar!
Excelente! acabei de fazer. Completíssimo, parabéns!
Lucas
Uma maneira de enviar os post automaticamnente no Facebook existe, mas no Dihiit não.
Se quiser saber como envirar seus posts automaticamente no Facebook , dá uma lida no tutorial:
"Criar uma página do blog no Facebook".
? Jão Bless ?
Ainda não existe essa possibilidade, pelo menos q eu saiba.
Clau s2
aki
será q vc teria uma solução para o que eu busco a tempos ???
queria compartilhar meus posts do blog automaticamente (auto-share) no orkut… (como no faceboock e no twitter)
Será possível ?
Há tempos busco isso !!!
Grato desde já Gata… s2
clau,existe algum jeito de enviar todos os posts (ao publicar) para o facebook Dihitt? seria muito ùtil para divulgar o blog.
Obrigada pelos comentários pessoal..
Mais tarde sai outro post com outras dicas de personalizações desta ferramenta 😉
Óptima dica, já conhecia, mas já não me lembrava. Vou aproveitar o código dos favoritos. Obrigado 🙂
Obrigado,Clau! ótima dica,simples e eficiente!Estou usando e adorando.
Beijo
Alguém ainda tem dúvida?
Acho que não né?O post tá completo! 🙂
Valeu Clau! 😉
comandoblogger
Essa ferramenta é muito boa, eu tb a uso há bastante tempo.
kaytros
Obrigada pela sugestão.
Quando quiser enviar sugestão de artigos, envie-a através do formulário de contato para Sugestões de Artigos
Max
Vc tá perdendo tempo em não usar essa ferramenta heim? Ela é ótima 🙂
Oi, Clau
Que coincidência esse post! Ainda ontem, estava tentando lembrar o motivo pelo qual chegam mensagens do AddThis pra mim…rs
Parece mentira, mas fiz o cadastro e por algum motivo não instalei no blog.
Vou esperar o próximo post para ver o que fazer a respeito, mas acho que é uma opção excelente de divulgação.
Obrigado por mais essa dica.
Bjs
Ola não sei se e o lugar certo mas vou fazer o pedido aqui, gostaria de saber como faço para importar um blog do wodpress para o blogger, são mais de 500 post….
se puder postar um tuto ou algo assim fico agradecido.
Excelente artigo Clau, já venho utilizando o AddThis a muito tempo nos meus blogs.
Estava pensando em escrever um post sobre essa ferramenta mais como você já postou hoje vou deixar para postar semana que vem 🙂
Att.
@JamisHenri