E as novidades do Blogger não param mesmo. Divulgar um blog nas redes sociais como o FaceBook, o Twitter e o Google Buzz, é questão de prioridade para qualquer blog. Agora o Blogger está prestes a disponibilizar botões padrão para compartilhar seus links segundo o modelo que já uso aqui no [ Ferramentas Blog ]. Veja como já usar em seu blog também.
ATUALIZAÇÃO: Este recurso já está oficialmente disponível no painel do Blogger. Recomendo que leia o novo tutorial para mais detalhes: Share Buttons do Blogger oficialmente disponível.
Essa novidade foi descoberta pelo Crazyseawolf do CrazyseaWolf’s Blog e pelo blog francês Le Blogger. Citei e comentei sobre essa e outras novidades do Blogger aqui:
Se você não percebeu ainda, há diversas novidades já disponíveis no Blogger, inclusive o novo menu “Design”, que já permite até mesmo você criar seu próprio template:
Usando os novos botões: Share-button
A primeira coisa a saber é se o seu blog já está preparado para receber o novo recurso. Ao que tudo indica, o Blogger já adicionou a todos os templates em uso, uma nova sequência de códigos. Para verificar o seu, abra o painel do Blogger, clique em “Design” ~> “Editar HTML” e marque a caixa de “Expandir modelos de widgets”, então procure pelas seguintes linhas:
<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
<a class='share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
<a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
<a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
</b:if>
</b:includable>
Caso encontre isso, significa que seu blog já está em condições de receber os novos botões. Agora o próximo passo é ver onde está a função do Blogger que habilita esse novo recurso.
Se você entrar no painel do seu blog pelo Blogger in Draft – o painel de testes de recursos do Blogger – e for até o novo menu “Desig” ~> “Elementos da página”, clique na opção “Editar” (edit) do “Postagens do blog”, como ilustra a imagem abaixo:
Vai abrir uma janela com todas as opções de configuração para exibições que envolvem a área de postagem, como mostro abaixo, e já é possível ver os novos ícones “share-button” (botões de compartilhamento):
Ao marcar essa opção, os ícones aparecem no “Organizar itens” para serem reposicionados como for de seu interesse.
Mas, mesmo depois de salvar para aplicar os novos botões, eles ainda não aparecem no seu blog, mesmo que seu blog já tenha os devidos códigos. Acontece que o Blogger ainda não liberou em definitivo essa funcionalidade.
Aí você pergunta:
Então como aparecem esses ícones funcionando aqui no [ Ferramentas Blog ] e no Le Blogger?
Como ativar os novos botões, então?
É que descobrimos uma forma de forçar o funcionamento dos ícones de compartilhamento e adicionar no topo das postagens. É uma “gambiarra” que qualquer um pode fazer, funciona sem conflitos e depois é só excluir, quando o original já estiver liberado.
AVISO: Propositadamente, o botão “Blog this” foi desabilitado e não ensino aqui como fazer funcionar para evitar plágios. Não aprovo esse recurso e não recomendo o seu uso em nenhum lugar, sob nenhuma condição.
1. A primeira coisa a fazer é habilitar o link de envio por email. Veja novamente a imagem acima: marque a opção “Mostrar links Enviar esta postagem”. Isso é importante para o envio por email funcionar.
2. Agora, vá ao menu “Desig” ~> “Editar HTML”, marque a caixa “Expandir modelos de widgets” e procure pelas seguintes linhas – ou algo bem semelhante a isso:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Não altere NADA aí. Imediatamente ANTES dessas linhas, cole o seguinte trecho, que já é o código dos botões devidamente prontos para funcionar em seu blog:
<!-- Botoes Sharebutton Blogger inicio -->
<b:if cond='data:blog.pageType == "item"'>
<div style='float: right; margin: 5px 2px 10px 10px'>
<a class='share-button sb-email' expr:href='data:post.emailPostUrl' expr:title='data:top.emailThisMsg' target='_blank'> <span class='share-button-link-text'>
<data:top.emailThisMsg/>
</span></a> <a class='share-button sb-facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' expr:title='data:top.shareToFacebookMsg' target='_blank'> <span class='share-button-link-text'>
<data:top.shareToFacebookMsg/>
</span></a> <a class='share-button sb-blog' expr:title='data:top.blogThisMsg'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a> <a class='share-button sb-twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url' expr:title='data:top.shareToTwitterMsg' target='_blank'> <span class='share-button-link-text'>
<data:top.shareToTwitterMsg/>
</span></a> <a class='share-button sb-buzz' expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title' expr:title='data:top.shareToBuzzMsg' target='_blank'> <span class='share-button-link-text'>
<data:top.shareToBuzzMsg/>
</span></a>
</div>
</b:if>
<!-- Botoes Sharebutton Blogger final -->
3. Agora é só salvar o modelo para ver funcionando em seu blog. Os ícones só irão aparecer quando você abrir individualmente um post/artigo, ficando alinhados do lado direito do primeiro parágrafo, em perfeito funcionamento.
Se você não quiser mais usar esses ícones, basta voltar ao código fonte e excluir essas mesmas linhas. Recomendo que faça isso quando o recurso oficial estiver disponível de fato.
Outros artigos importantes para seu Blog:
Percebi isso hoje. Muito legal, geralmente tinha-mos que por os botões de compartilhamento no final de cada postagem. Dava um pouco de trabalho. Tem também um novo modelo de layout, até bacana
Parabéns!
No meu blog está funcionando correctamente!
Só que o código:
<* class='post-body entry-content'>
<* style='clear: both;'/>
não estava assim no meu, mas estava:
<* class='post-body' expr:id='"post-" + data:post.id'>
Eu estou usando o Template Magazine do Dicas Blogger e funcionou perfeitamente.
P.S.: Onde tem "*" tem uma div.
Excelente dica Marcos!!! Sempre dividindo seu conhecimento conosco. Um verdadeiro divisor de águas esse novo recurso do Blogger, vindo de encontro com algumas de minhas reivindicações para divulgação das postagens.
Sim, o blogger está melhorando, acho que essa novidade foi muito boa mesmo, sempre é bom compartilhar nossos posts, parabéns pela explicação de como usá-lo e parabéns ao blogger.
Muito boa sua dica Marco, o FB sempre na frente.
Pra falar a verdade, não tem um dia que eu não acesse o FB.
E quanto ao que o João disse no comentário, o meu também esta com os códigos um pouco diferente dos do tutorial, mais nada que atrapalhe.
Aaaahhh, agora entendi porque os meus botõesinhos do "add this" sumiram qdo mudei o template!!!Acabei colocando o cód novamente, aí vi esse código "oculto" lá, mas vou ficar atenta a novidade!!Muito legal!!!Aliás o blogger está D+!!!E vcs são uma ótima consultoria p os clientes do blogger..rsrs
Hi,
Thanks for the Link.
I managed to use the real shareButtons and it's very simple to install, check out my post : http://www.leblogger.com/2010/06/boutons-partage-blogger-blogspot.html
E se o meu blog não aparece (b:includable id='shareButtons' var='post'>
) como é o caso do meu o que devo fazer?
Obrigada!
No me apareceu só que não tem funcionalidade nenhuma…seguir passo a passo, fiz tudo certo ! aparecem os botões más nao funcionam, será que foi pq mudei o design do meu blog, alías depois q mudei meus botoes de compartilhamento sumiram
@Eliane,
Se o seu não tem essas linhas, recomendo esperar que o Blogger torne esse recurso oficial.
.
@Jarbas,
Veja o tutorial acima para saber como adicionar os códigos. Siga os passos para tentar colocar os botões novamente em sua página.
Percebi hoje, e já utilizei a sugestão acima, muito obrigado.
Wellington Torrejais da Silva.
Oia eu de novo, já me perguntaram porque eu comento mais
em seu blog, e a minha reposta é:" e eu tenho culpa se o
marcos me completa"; brincadeirinha…..
e mais uma vez eu venho te agradecer pela postagem, e por dar
certo, beijos e mais sucesso!
Na verdade, os botões já estão ativos sim. Testei criar um novo blog, e eles aparecem e funcionam normalmente. Se trocar o template do meu, eles também aparecem. O problema é que trocar o template significa ajustar muitas outras coisas, e não quero fazer isso ainda.
Então, acho que não vai funcionar mesmo que o pessoal retire as linhas de código. Não sei porque no meu não está funcionando, mas se alguém souber e quiser dar o ar da graça, em agradeço.
Ps: Excelente Blog, volta e meia eu passo aqui para saber as 'novas', rsrsrs. Parabéns!
Oi Marcos, ótima dica, parabéns!
Segui os passos e obtive o resultado esperado, aconteceu exatamente o que vc falou, os botões foram liberados no topo da postagem.
Entretanto, de forma nativa, caso os botões estivessem disponíveis, eles deveriam estar no rodapé da postagem, certo? Há algo no código que possa ser mudado para que os botões apareçam no rodapé?
Achei que era uma pergunta pertinente. Eu particularmente acho que ficam melhor no rodapé, creio que há pessoas que podem preferir eles no fim da postagem. Desde já grato pela atenção.
Nesse caso, se mover os botões pelo "Editar" do "Postagens no Blog" não resolver, então você poderá mover o código para onde for mais adequando para o layout de seu blog.
O meu problema é o mesmo do Giordano: se eu mudar o Template para um do Blogger, funciona (mas teria que mudar taaaantas coisas).
Mas se colocar no Template atual, mesmo que os botões apareçam na caixa de edição, não funcionam =/ …. Não sei o que acontece, pois eles aparecem, eu assinalo, salvo, mas não vai.
Será que é por que uso um Template que não é Blogger?
Outra coisa, mesmo seguindo a risca seu tutorial, não funciona no meu. Será que esse Template é bloqueado pra isso?
Oi Marcos
antes no meu blog nao existia os botoes originais de compartilhamento, entao fiz a gambiarra que vc comenta acima, porem agora os botoes foram liberados e nao sei como excluir a gambiarra para que eles voltem a funcionar, esta acontecendo o seguinte.. qd clico num dos botoes aparece o codico reduzido como quero, porem qd posto ele fica enorme novamente, como se eu estivesse apenas copiado da barra e colado. Se puder me ajude? grata desde ja. (desculpe a falta de acentos, problemas com keybord)
abc Mi
@Sophi Mirelle,
Veja o tutorial e procure pelos códigos em seu template. Pode ser que seguindo o caminho inverso você consigo o que quer.
Muito bom, funcionou direitinho.
Dicas fabulosas.
Muito obrigado.
Pingback: Botoes de Compartilhamento do Blogger estão sumindo: veja como resolver | [ Ferramentas Blog ]
cara era exatamente o que eu estava atras
Boa noite Marcos.
Primeiro gostaria de parabenizar seu trabalho, ótimo seu blog, muito bom mesmo, meus parabens, continue assim!
Tenho uma dúvida a respeito dos Share-buttons. Tenho-os no meu blog, ativos e funcionando perfeitamente mas gostaria de adicionar mais um botão, para meu perfil no Myspace, como faço?
Abraços!
Infelizmente esses botões seguem um padrão do Blogger e não há como mudar nada neles.
. Marcos, muitoooooooo obrigada por essa sua postagem de utilidade pública para mim, risos, estava atrás dessa informação há dias e ninguém sabia o que me responder, até que encontrei susa postagem, valeu mesmo!
. excelente semana.
. fique com DEUS.
Muito boa dica!!
Valeu. Já inseri nos meus blogs.
Bjs.
Parabéns, só consegui por devido o seu site.