segunda-feira, 21 de junho de 2010

Como colocar e ativar os botões de compartilhamento do Blogger (atualizado 27/04/11)

Atualização 27/04/2011: Foi adicionado o botão Promova no Orkut. Fiz uma atualização no código abaixo! Leia mais aqui.
Atualização 24/06:
Os botões de compartilhamento estão disponíveis para todos os usuários do Blogger, conforme anunciado aqui no Blogger Buzz. De acordo com o anúncio, a equipe do Blogger planeja incluir mais serviços no futuro (quem sabe Digg, Myspace, Orkut(blergh!!), Yahoo Meme, entre outros). Seria interessante a possibilidade de podermos adicionar serviços além do que eles sugerem. Vamos esperar para ver.

Conforme eu já tinha descoberto antes, o Blogger in Draft adicionou mais uma funcionalidade aos seus usuários, os botões de compartilhamento, principalmente para o Twitter, Google Buzz e Facebook, como podem ver acima deste post.

Caso seu template não seja nativo do Blogger, você terá que incluir manualmente o código abaixo, abaixo da <div id='main-wrapper'>(vá em painel de controle >> Design >> Editar HTML >> marque expandir modelos de widgets, use control + F para localizar.)

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:post.sharePostUrl'>
      <a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&am<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block 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></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block 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></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block 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></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block 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></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
  </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block 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:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

Para ativar, vá no painel de controle do Blogger in Draft >> Design >> Page elements(elementos de páginas) e clique em Editar nas Postagens do Blog:

Marque a caixinha, reposicione onde você quer que os botões fiquem e clique em Editar.

Na ocasião em que publiquei a novidade, o código da ativação ainda não estava presente nos templates, mas ele já apareceu para todos que tem templates nativos do Blogger. Caso seu template seja nativo mas modificado ou não nativo, você deve incluir manualmente esse código. Graças ao @pizcos, do Pizcos Blog , ele me alertou no Twitter (Bendito Twitter, e ainda tem gente que "acha" que ele vai matar os blogs), sobre qual código deveria ser colocado no template.

Vá em Painel de controle >> Design >> Editar HTML >> Clique em expandir modelos de widgets e procure (control + F) por <p class='post-footer-line post-footer-line-3'> ou <div class='post-footer-line post-footer-line-3'> e cole imediatamente após o código abaixo:

<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>

E salve o seu template. Pronto. Os botões de compartilhamento já aparecem em cada post de seu blog.

Eu fiz uma modificação nesses botões, eu só queria que eles aparecessem apenas nos posts, e não na página inicial. Para tanto apliquei uma condicional, ficando assim o código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>
</b:if>

E acabei colocando-os acima dos posts, abaixo do título manualmente, já que nas opções de postagens, não consegui reposicioná-lo (culpa das inúmeras modificações que fiz no template, apesar dele ser nativo.). Se alguém estiver com esse problema, vá em Painel de controle >> Design >> Editar HTML >> Clique em expandir modelos de widgets e procure (control + F) por <div class='post-body entry-content'> e cole o código acima abaixo desta linha.


Para terminar, um bordão que nunca canso de dizer: "CHUPA WORDPRESS!!!"

Eu kibei este post... DE MIM MESMO! Logo estou perdoado, certo?

Agradeço ao @pizcos pela ajuda e ao @hordones pela citação antes feita. A Blogosfera é realmente um lugar de cooperação e de amizade! E eu só tenho a aprender com isso.

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google