Esses botões servem para as pessoas compartilhar o conteúdo de seu artigo(postagem), se elas gostarem e acharem que amigos possam gostar também, fazendo isso elas estarão divulgando seu blog/site.Os códigos podem ser pegos no twitter e no Facebook, mas o principal problema que eu enfrentei foi na organização dos elementos na página, e, no botão do facebook era necessário colocar o endereço Url do blog, mas, para cada pessoa que Curtia(clicava) no botão de um post(artigo) o resultado mostrado na conta dele era um link dizendo que ele havia gostado do blog e não daquele post, sendo assim, se aquele visitante quisesse retornar ou compartilhar aquele artigo ele não conseguiria, pois na conta dele só tinha o link da página inicial do blog.
Entenda alguns detalhes dos botões Curtir e Twitar
Para o botão do Facebook adaptei um javascript que irá usar window.location.href para 'pegar' a Url da página em que o visitante está e usar essa Url para criar o botão curtir, assim, se um visitante quiser curtir várias páginas(artigos ou posts) de seu blog/site ele poderá, se fosse colocar a Url da página inicial, ele só poderia curtir aquela página, mesmo estando em outra.Próximo aos códigos abaixo estão as imagens dos botões e mais ou menos como os botões ficam no local onde são colocados, as imagens são uma ilustração do botão, e, esse poderá ficar levemente diferente dependendo do navegador ou se os sites Facebook e Twitter fizerem alguma alteração.
O facebook tem dois tipos de botões, um mais azulado e outro escuro, o escuro é mais indicado para páginas com fundo escuro, mas, acho que, já que o botão do Twitter é azul claro, seria mais interessante usar os modelos claros para ambos porque eles irão combinar um com o outro, e, dizem que preto combina com tudo, sendo assim, os botões azuis podem ficar melhor e as pessoas vão perceber ele melhor, é mais chamativo e muitos já estão acostumados.
Atenção: Você deve fazer uma modificação fácil no código do botão do Twitter, você poderá escolher um dos códigos abaixo, o que tem formato de botão que lhe agrada, e pode mudar a palavra foitestado pelo seu nome de usuário do Twitter, com cuidado para não retirar as aspas, aí, quando o visitante de seu blog twitar, o seu nome de usuário do Twitter aparecerá no tweet dele, por exemplo, se você twitar esse post(usando o botão), o texto do seu tweet ficaria mais ou menos assim:
Os seguidores dele verão o nome de usuário que você quiser(o seu ou de seu blog) e poderão clicar e lhe seguir se quiserem, aí você que é o dono do blog poderá conseguir mais seguidores para seu Twitter, mas, isso nem sempre acontece, poucos clicam e alguns visitantes de seu blog, ao twitar, poderão apagar esse trecho para caber mais palavras... Mas, é uma pequena chance, e você não deve desperdiçar nada.
Outra coisa, ao visitante clicar no botão do Twitter abrirá uma nova página e o Twitter se encarregará de colocar o título do artigo e uma Url curta que, se acessada irá retornar para o artigo de seu blog. Algumas vezes, raramente, o twitter 'não confia' naquele site/blog ou artigo e não permite essa ação, isso pode ocorrer no começo e depois de algum tempo passar, pode ocorrer mais com Url longa, com alguns caracteres 'especiais' na Url de seu blog ou com blogs/sites que ele(o sistema) ainda desconhece.
Quem quiser dar uma margem(distancia) de folga entre os botões e outros elementos de sua página, vou explicar bem abaixo, depois dos códigos.
Atualização, quem quiser Código pra colocar botão +1 do Google, Orkut, Twitar e Curtir em blogs e sites, clique
Códigos para blog/site que irá gerar botão Curtir no Facebook e tweet
Próximo aos códigos tem uma ilustração(imagem) dos botões, para testar o funcionamento use o botão acima.
No blogger, esses códigos são adicionados como gadget, Html/JavaScript, clique
Em páginas de sites o código vai em qualquer local entre as tags
<body></body> Mas para testar ele deve estar numa página na web.
Botão Curtir escuro e tweet, vertical, esquerdo
Modelo do botão Curtir Facebook escuro(dark) e tweet, quadrado vertical e do lado esquerdo, para blogs e sites<div style='width:55px;float:left;margin:1px 4px 2px 3px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&layout=box_count&action=like&colorscheme=dark&font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='width:55px;overflow:hidden;height:65px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div><a class='twitter-share-button' data-count='vertical' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>
Botão Curtir e tweet, vertical, esquerdo
Modelo do botão Curtir Facebook claro e tweet, quadrado vertical e do lado esquerdo, para blogs ou site<div style='width:55px;float:left;margin:1px 4px 2px 3px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&layout=box_count&action=like&font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='width:55px;overflow:hidden;height:65px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div><a class='twitter-share-button' data-count='vertical' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>Botão Curtir escuro e tweet, vertical, lado direito
Modelo do botão Curtir Facebook escuro(dark) e tweet, quadrado vertical e do lado direito, para blog e sites<div style='width:55px;float:right;margin:1px 4px 2px 3px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&layout=box_count&action=like&colorscheme=dark&font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='width:55px;overflow:hidden;height:65px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div><a class='twitter-share-button' data-count='vertical' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>Botão Curtir e tweet, vertical, lado direito
Modelo do botão Curtir Facebook claro e tweet, quadrado vertical e do lado direito, para blog e sites<div style='width:55px;float:right;margin:1px 4px 2px 3px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&layout=box_count&action=like&font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='width:55px;overflow:hidden;height:65px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div><a class='twitter-share-button' data-count='vertical' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>
Botões Curtir e Tweet na Horizontal
Modelo do botão Curtir Facebook escuro e tweet padrão, estreito(horizontal) e do lado esquerdo, para blog e sites<div style='width:205px;float:left;margin:1px 4px 2px 3px;height:20px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&layout=button_count&action=like&colorscheme=dark&font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='float:left;width:90px;overflow:hidden;height:20px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div style='float:left;width:110px;'><a class='twitter-share-button' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>
<div style='width:205px;float:left;margin:1px 4px 2px 3px;height:20px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&layout=button_count&action=like&font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='float:left;width:90px;overflow:hidden;height:20px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div style='float:left;width:110px;'><a class='twitter-share-button' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div><div style='width:205px;float:right;margin:1px 4px 2px 3px;height:20px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&layout=button_count&action=like&colorscheme=dark&font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='float:left;width:90px;overflow:hidden;height:20px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div style='float:left;width:110px;'><a class='twitter-share-button' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div><div style='width:205px;float:right;margin:1px 4px 2px 3px;height:20px;'><script type="text/javascript"><!--
urlb=window.location.href;
document.write("<iframe src='//www.facebook.com/plugins/like.php?href="+urlb+"&layout=button_count&action=like&font=arial' scrolling='no' frameborder='0' allowtransparency='true' style='float:left;width:90px;overflow:hidden;height:20px;'></iframe>");
//--></script><script src='//platform.twitter.com/widgets.js' type='text/javascript'></script><div style='float:left;width:110px;'><a class='twitter-share-button' data-via='foitestado' href='//twitter.com/share' rel='nofollow' title='tweet'></a></div></div>Afastar os botões de outras coisas
Nos códigos acima, eu coloquei uma margem, mas, ela é tão fina que quase não faz diferença, deixei assim porque não sei qual será a necessidade de cada um, sendo assim, talvez você terá que entendê-la e aumentar um pouco.O código responsável pela margem é:
margin:1px 4px 2px 3px;
Essa margem não se aplica ao botão individualmente, mas sim, a volta deles, é que os dois botões estão dentro de uma mesma DIV, e, a margem se aplicará a essa div, para os botões horizontais, a div tem uma largura de 205px e, só para constar, as margens laterais são somadas a essa largura. A div com botões verticais tem 55px de largura, somando as margens laterais que eu coloquei fica 62px.
No código de margem acima:
1px O primeiro valor é para o topo.
4px O segundo valor é a lado direita
2px O terceiro valor é a base
3px O quarto e último valor é para o lado esquerdo
No código de margem, os espaços e caracteres devem ser respeitados.
Sabendo disso, você pode alterar apenas os números para aumentar ou diminuir as margens e, assim fazer com que eles fiquem mais distantes ou perto de outras coisas.
Talvez observando a imagem abaixo fica mais fácil entender o lado que cada número representa.
Clique para aumentar
- Colocar botão Web Slice e Feed no blog ou site
- Mudar frase do botão do gadget seguidores
- Colocar gadget do blogger no seu blogspot
- Mudar a aparência do gadget de inscrição do blogger
- Gadget classificar com estrelas, votar, avaliar post no blogger
- Mudar cores de fonte e fundo de Reações e gadget de Votar com estrelas
- Encurtar links com novo serviço do Google Shortener
- Baixar Toolbar pra encurtar URL e enviar pro Twitter
26 comentários:
oi, eu queria perguntar como remove as postagens lado a lado, eu baixei um template, mais ele estava com "read more" ai eu consegui remover mais estou com esse problema das postagens lado a lado,o link é http://donmadrugatest.blogspot.com/,
as postagens estao baguçadas e etc, esse é o modelo de testes, obrigado e desculpe postar aqui, é que nao tem nenhuma forma de contato.
att synce.
Don Synce
Se você colocou um código para isso acontecer, você deve remover o mesmo, ou preferencialmente pegar uma cópia desse modelo antes de ter adicionado o código para isso.
Se seu modelo já estava assim ficará muito difícil mudar ele, porque ele já pode ser criado para ter essa estrutura e o que a pessoa fez é difícil saber e, modificações em cima do mesmo pode bagunçar mais ainda.
Olhei seu template e ele parece estar com um código que não parece apropriado para o blogger, talvez ele use JavaScript para criar algo, mas vi no Css classes que não estão em uso, assim como Ids e classes no Html que mostram que pode haver um problema.
Para mudar um modelo é preferível pegar um do blogger, se você usar um template baixado da web ele pode vir com alguns problemas. Além disso o blogger oferece a opção de personalizar sem uso de códigos, para quem tem pouca prática com códigos é preferível fazer isso e só usar códigos em últimos casos.
Olá, coloquei o botão em meu blog. Porém eu gostaria que ele só aparecesse quando um visitante lesse o artigo. No caso ele está aparecendo no home também.
Yohan Assal
Eu não vejo um problema nisso, vejo uma oportunidade para a pessoa que visita a HomePage do blog Curtir ou Twittar ela também, assim é mais uma chance de seu blog ser divulgado por um visitante.
Estou pensando em um código só para o post, mas é muito mais complicado de explicar e para colocar no blog e, infelizmente, no momento estou com pouco tempo para fazer isso.
Oi, eu quero apenas um link (javascript) que envie a pessoa p/ uma janela (outra página) para dar o share, eu ja consegui para o facebook, mas não consigo p/ o twitter... abre sempre na mesma janela que o meu site e isso não é o que quero... rs... será que pode me ajudar? Segue o código para o facebook para quem quiser:
javascript:var d=document,f='http://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1281707146&u='+e(l.href)+'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)
Sítio da Vitória
O código acima para twitar abre em nova página ou janela, porém, alguns navegadores podem ser configurados para links não abrirem em outra página, aí é uma opção do usuário.
No código acima, a parte referente ao Twitter começa com(não copie esse abaixo):
<script src='//platform.twitter.com
E termina com essa parte:
href='//twitter.com/share' rel='nofollow' title='tweet'></a></div>
Mas cuidado, se copiar apenas ele para não levar o fim do código da div que coloquei, tem duas divs, uma que faz parte do código do Twitter e outra que é parte do código que personalizei.
Era exatamente isso que eu estava procurando, o like do facebook que funcionasse pra cada post diferente, que não pegasse tudo (ou ele fica só repetindo), mas não deu certo =\ Eu to usando o modelo antigo (em html) no blogspot. Esse código só serve em xml?
Outra coisa, sabe como fazer (a mesma coisa) pro botão compartilhar?
Se puder me dar esse help te agradeço mto! :)
Priscila Nunes
Testei o código em páginas Html e funcionou, talvez tente novamente, as vezes o blogger modifica alguns caracteres ao salvar quando usa determinado navegador.
Quanto ao botão de compartilhar a que você se refere eu não sei qual o código dele.
Só sei que, para esse botão acima do Facebook é possível mudar o nome curtir para Recomendar, porém, ficará complicado e difícil para quem tem pouca prática com uso de códigos, para isso, basta substituir:
action=like
por:
action=recommend
Mas, se fizer isso terá que aumentar algumas larguras em mais uns 120 pixels, são duas larguras, os valores para elas encontram-se logo após esse trecho de código style='width:
E, também ter o cuidado de fazer isso só na parte do código que é referente ao Facebook e a Div que 'cerca'(contém) os botões, nos códigos acima, é referente ao Facebook e essa Div todo código que está acima desse trecho:
</iframe>");
//--></script>
Sendo assim, acima desse trecho de código você terá que ver as larguras e somar a elas mais 120 para cada, isso porque o botão ficará mais largo.
Estou com problema
tipo no site tem
categoria
Cinema
Loja de Sapatos
etc..
só que é inserido tudo pelo painel
e a div é usada para tdo o cadastro
e quando curto 1 cinema
ai entro na loja pra curti, já fica curtido automaticamente
eu queria o curtir e twitter em post separados!
Eduardo
Não sei se eu entendi, mas acho que você quer que abra em nova janela para as pessoas digitarem algo, infelizmente não encontrei esse código, e, acho que muitas pessoas preferem o botão de curtir como ele é, até acho que o fato de muitas pessoas terem curtido esse post e poucas enviado ele para o twitter reforça minha opinião.
Você terá que tentar uma busca na web por coisas como: link para curtir ou link para compartilhar no facebook, ou botão para enviar para facebook.
Você também pode visitar a página do Facebook que indiquei no inicio do post e ver no menu lateral se tem uma opção, porém, achei aquilo meio inútil.
ola testei no meu e aparece só o botão do twitter, sabe me dizer por que?
abraço
Dj Robson Michel
Se você colocou o código corretamente o botão do facebook também deveria aparecer, talvez se seu blog não for publico ele não apareça.
Mas onde devo colar esse código para divulgar cada post separadamente? Ao final de cada postagem...
Aguardo
Deborah
No blogger, esses códigos são adicionados como gadget, Html/JavaScript, clique e veja como.
Depois de adicionar, você retorna ou vai em >blogger, >Design e Elementos da página, aí, você pode identificar o gadget(são uns quadros) e pode arrastar ele com o mouse para um local meio alto em elementos da página, alguns modelos ele até encaixa em cima da área de postagem do blog. Pode ver essa imagem, clique, é meio pesada...
Mas eu não quero por na lateral, somente no final de cada postagem...
Deborah
Aí ficará muito difícil, se quiser fazer terá que mexer no HTML do blogger, não aconselho porque nem sempre sai exatamente como quer e depois é difícil de desfazer, mas se quiser fazer, é bom fazer uma cópia de seu código antes e praticar em um blog de testes, porque nesses casos, um caracter errado vai dar um erro grande.
Terá que alterar o código acima para o blogger aceitar.
Tem dois caracteres no código acima que devem ser alterados, observe com cuidado, os caracteres que deixei em verde(no post) deverão ser alterados, sendo assim, no código acima, precisará:
Substituir <!-- por <!--
Substituir //--> por //-->
E depois ir em blogger.com >Design >Editar HTML e marcar a opção Expandir modelos de widgets, baixar seu modelo completo, depois localizar o código abaixo e colocar acima ou abaixo de um desses códigos que mostrarei abaixo, depois salvar e ver onde ficou, um deles deixa um pouco mais acima e outro um pouco mais abaixo.
<div class='post-footer-line post-footer-line-1'>
ou
<div class='post-footer-line post-footer-line-2'>
ou
<div class='post-footer-line post-footer-line-3'>
Muito cuidado, precisa ser antes ou depois de um desses, nem um caracter a mais e nem um a menos depois deles.
Oi, gostaria de saber se no botão do facebook tem como retirar a contagem. Como vou implantá-lo agora no meu site, não queria que aparecesse.
Alex
Não sei porque tirar a contagem de envio para o Facebook, perde toda a graça, mesmo assim, se quiser vai precisar alterar um pouco os códigos, com muita atenção, qualquer caracter errado pode dar erro...
Se você pegou o código para os botões que ficam na horizontal(estreito e largo), pode substituir width:90px; por width:55px;
Se você vai usar os botões verticais, pode substituir height:65px; por height:20px; e no código para o botão vertical, substitua também box_count por button_count
Para colocar no site não sei, você usa Html para criar ele? nesse caso você deve escolher um local apropriado entre as tags <body></body> e no caso do blogger eu deixei um link nesse post logo acima de onde comecei mostrar os códigos, "gadget, Html/JavaScript"
Muito bom mesmo!!
Olha só, eu coloquei o script e funcionou perfeitamente a parte do twitter. ele ta pegando o link, mas para o facebook ele nao pega a url inteira
por exemplo:
tenho essa pagina:
http://gecascavel.org.br/index.php?subaction=showcomments&id=1307496897&archive=&start_from=&ucat=5&
quando clico no curtir e verifico no meu facebook o link que aparece é esse:
http://gecascavel.org.br/index.php?subaction=showcomments
ele nao identifica a id do post
sabe o que pode estar acontecendo?
Lucas
O problema não me parece ser com o código acima, mas sim a forma que o Facebook interpreta a sua Url, me parece que ele simplesmente ignora tudo o que vier após esse caracter & &
Sendo assim não sei o que fazer, talvez exista uma solução em Php para isso, já que suas páginas usam essa linguagem para gerar Url e acessar o conteúdo, mas você terá que buscar algo na web.
A contagem do número de pessoas que "curtem" a minha fan page no facebook está doida, ou seja, hora aparecem que tem 4 pessoas curtindo a página, hora aparece que tem 342 pessoas curtindo, que é o número total e real de pessoas no momento. Alguém sofre com esse mesmo problema? Alguém poderia me ajuda nisso?
Segue abaixo a fan page caso ajude:
https://www.facebook.com/Petit.Priere.Joias?ref=ts
Muito obrigado desde já!
abs,
Matheus
Esse post é muito muito bom. Parabéns.
Gostaria de saber qual o código para colocar o botão do orkut alinhado com os do facebook e twitter. Já tentei e não consigo. Ele fica sempre desalinhado, em uma linha à parte.
Carlos Romero
Vou estudar isso, mas ainda poderá levar uns vinte dias, uma vez que tenho outras coisas em andamento e já com atraso.
O botão do facebook simplesmente não aparece quando colocado no HTML, e quanto ao Twitter não teria como fazer a msm formúla? Pq estando na home e clicando em share do twitter de qualquer postagem a url divulgada é a da home e não do post clicado.
Grato desde já
Marcos
Da forma como está, ambos vão pegar a Url da página que está sendo acessada, pode existir outras maneiras, o twitter não pode ser da mesma maneira porque ele usa seu próprio Script para obter a Url acessada e gerar o iframe com o botão e a contagem, pode existir outras maneiras, teria que visitar o Twitter e procurar
Carlos Romero
Como eu havia dito, quem quiser códigos como esses acima com botão de enviar para o Orkut, clica aqui
Postar um comentário