Share Buttons do Blogger oficialmente disponível

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

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.

novo-blogger-share_buttons

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:

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

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”.

design-editar-html-widgets-blogger

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).

editar-share-blogger

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:

add-share-button-compartilhamento-blogger

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:

13 Comentários

  1. Na verdade ainda prefiro o do Add This… Da para personalizar melhor, mas claro, daqui uns dias o Ferramentas Blog já lança as personalizações…
    Parabéns Marcos, sempre de olho em tudo o que rola de novo no Blogger.

    Responder

  2. Adorei a novidade.Acabei de ativar no blog.Uma pessoa inteligente sempre segue outra mais inteligente pra aprender .Valeu.

    Responder

  3. Oi, gostei da dica. Ativei no meu blog mas as imagens q posto ficam em cima das ferramentas. Então, como faço para colocá-la no fim dos posts?

    Responder

  4. Não precisa me responder mais, não. Meti a cara, digo o mouse e colei o código abaixo do trecho indicado e deu certo: a barra de ferramentas está abaixo nos posts 😀 😀 😀

    Valeu pela dica.

    Responder

  5. Esse código que você usa no seu blog pra alinhar a direita, desativa as funções do recurso no meu template.

    Mas tirando isso esta tudo normal…

    Inclusive a condição pra não aparecer na homepage. =)

    Responder

  6. Pingback: 5 dicas para aumentar o número de visitantes de seu blog | Quero Criar um Blog

  7. Parabéns pelo site e pelo post.
    seguinte:. estou querendo colocar um background-color na area do shareButtons que está meio apagada etc.
    será que é possível.
    abraço
    Charles Dale

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.