Share Buttons do Blogger oficialmente disponível

Quem usa o Blogger (Blogspot) para criar um blog e acompanha o [ Ferramentas Blog ] já viu sobre as novidades disponíveis e uma delas são esses botões chamados “Share Buttons” que servem para compartilhar seus links e posts por e-mail, Twitter, FaceBook, GBuzz e com outros blogs. Agora ele é oficial, mas alguns templates precisam de uma pequena adaptação para funcionar. Veja como ativar isso em seu blog.

Se você tiver problemas com esses botões e eles estiverem sumindo do seu layout, leia nosso tutorial ensinando a fazê-lo voltar a aparecer: Botões de Compartilhamento do Blogger estão sumindo: veja como resolver.

Já tratamos das novidades do Blogger em um vídeo-tutorial, que recomendo ser assistido para facilitar o entendimento de algumas coisas. Também já publiquei um tutorial exclusivo de como usar os botões de compartilhamento quando ainda não eram oficiais:

• Vídeo-tutorial sobre as novidades do Blogger (Blogspot)
• Novos botões de compartilhamento do Blogger Share-button

O Crazyseawolf também já publicou sobre isso. Veja como uma segunda opinião:

• Como colocar e ativar os botões de compartilhamento do Blogger

Esses novos botões agora já estão ativados automaticamente no Blogger para os Designers de Modelos, os novos templates padrões do Blogger. Mas para funcionar em qualquer Template – layout – mesmo os feitos por outras pessoas e no modelo antigo, você precisa adicionar um trecho de código.

Passo 1 – Verificar a existência dos códigos

A primeira coisa é verificar se o seu template tem no código-fonte as linhas de código que ativam esses botões.

Então abra o painel do Blogger e clique no menu “Design” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets”.

Agora procure por algumas linhas semelhantes às que seguem. Você não deve modificar nada, apenas identificar essas linhas em seu código:

<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' 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 + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' 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 + &quot;&amp;target=twitter&quot;' 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 + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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 + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
</b:if>
</b:includable>

Ao que parece o Blogger já adicionou a todos os templates ativos, mesmo os antigos, esses códigos. É bem provável que todos já tenham isso.

Se você encontrou esses código, ótimo, pode passar para o próximo Passo 2.

Mas se não tem essas linhas, então será preciso adicioná-las antes de continuar. Para isso, ainda no código-fonte de seu blog, procure pela seguinte linha:

<div class=’clear’/>

E imediatamente ABAIXO disso cole o código dos botões citado acima. Salve seu modelo para ver se não teve erros. Tudo certo, então passe para o Passo 2.

Passo 2 – Ativando os botões no Elementos da página

Agora clique no menu “Design” ~> “Elementos da página” e onde está a área dos posts chamada de “Postagens no Blog”, clique no link “Editar” (Edit).

Ao clicar no link “Editar”, aparecerá uma janela com as opções de configuração que afetam a forma com que seus posts são visualizados e os elementos de página que o compõem. Assim você já verá a opção “Mostrar botões de compartilhamento”, marque para ativar:

Salve e abra o seu blog para ver se os botões apareceram eu seu template. Se tier aparecido, ótimo, você conseguiu ativar os botões. Então é só testar e usar.

Mas se os botões ainda não apareceram, então precisa de mais algumas linhas de código que vamos mostrar no Passo 3.

Passo 3 – Adicionado restante dos códigos de ativação

O ideal é que esse botões apareçam junto ao texto de seu blog, quando abertos individualmente e logo abaixo do título. Assim se você quiser usar como uso aqui no  [ Ferramentas Blog ], volte ao código-fonte de seu blog no menu “Design” ~> “Editar HTML” e marque “Expandir modelos de widgets”

Agora procure pela seguinte linha ou algo semelhante:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Imediatamente ANTES dessas linhas e sem alterar nada, adicione o seguinte trecho de código:

<!-- Botoes Sharebutton Blogger inicio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float: right; margin: 5px 2px 10px 10px'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</div>
</b:if>
<!-- Botoes Sharebutton Blogger final -->

Salve o modelo para funcionar em seu blog.

Se você quiser colocar em outro lugar ou com outras funções, veja o trecho que destaquei em rosa-negrito. Só esse trecho é que é o responsável pela ativação e exibição dos botões. Onde forem colocados é que os botões vão aparecer. mas recomendo usar como sugeri – fica à sua escolha.

Outros posts e novidades do Blogger:

• Como trocar cores e fontes num Template do Blogger
• Novo menu “Design” e “Designer do modelo” agora é padrão do Blogger (Blogspot)
• Como criar Template para Blogger – Designer do Modelo