1 de junho de 2011

Como compartilhar os post do blogger no Facebook



Já aprendemos como colocar um botão de Retweet no template do Blogger para os visitantes divulgarem os posts no Twitter. Hoje, também por meio da instalação de um botão, iremos fazer com que os posts sejam divulgados em outra rede social muito importante, o Facebook. Como veremos no decorrer do post, a instalação é fácil, rápida e indolor.


Primeiramente, através da ajuda da Wikipedia, vou falar um pouco sobre o que é o Facebook, apesar de acreditar que a maioria já tenha uma noção do que se trata essa rede social, considerada a maior da internet. Deixa para trás nomes de peso como o Myspace, o Twitter e até mesmo - acredite se quiser - o Orkut.


Facebook é um website de relacionamento social lançado em 4 de fevereiro de 2004. Foi fundado por Mark Zuckerberg, um ex-estudante de Harvard. Inicialmente, a adesão ao Facebook era restrita apenas aos estudantes da Universidade Harvard. O website possui mais de 120 milhões de usuários ativos, a posição do Facebook no ranking de tráfego de visitantes do Alexa, subiu do 60º lugar para 7º lugar. É ainda o maior site de fotografias dos Estados Unidos, com mais de 60 milhões de novas fotos publicadas por semana, ultrapassando inclusive sites voltados à fotografia, como o Flickr. Fonte: Wikipedia

Depois dessa pequena explicação, vamos colocar a mão na massa.

A Implementação desse widget seguirá os mesmos procedimentos que utilizamos na instalação do botão para Retweet, ou seja, escolher um dos modelos, copiar o código correspondente (ele está logo abaixo da figura usada como exemplo) e em seguida colocar este código no local indicado.

1 - Botão a direita do post:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Versão Compacta

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

2 - Botão a esquerda do post:

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Versão Compacta

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Agora vamos aprender a colocar o botão de envio no template

Entre na sua conta do Blogger. Vá até a aba Painel e entre na guia Layout. Em seguida, clique em Editar HTML e marque a opção Expandir modelos de widgets (Resumindo: Painel → Layout → Editar HTML → Expandir modelos de widgets).

Com a ajuda do Ctrl+F encontre o código: <div class='post-header-line-1'/>

Cole o código referente ao botão escolhido logo abaixo do código mencionado no parágrafo anterior. Clique em visualizar, se não for acusado nenhum erro e estiver conforme você imaginou, Clique em salvar.
Dependendo do modelo de template, o código <div class='post-header-line-1'/> pode sofrer uma pequena variação, ficando semelhante a este <div class='post-header-line-1'>. Isso não altera em nada o procedimento de instalação do widget, ou seja, cole o código referente ao botão escolhido abaixo dele.

Pronto. O botão está instalado.

Até a próxima.

Via: Blogger Widgets | Imagem: CCH

15 comentários:

  1. Idenaldo,

    há tempos que desejava usar a versão compacta deste recurso, que julgo ser a melhor para compartilhar.

    Encontrei aqui! \O/

    ResponderExcluir
  2. Oi desculpe mas não consegui achar esse editar HTML, como faço?

    ResponderExcluir
  3. OBS.: O "EDITAR HTML" É NA ABA "MODELO"!!!

    EXCELENTE POSTE PARABÉNS!!!
    MUITO ÚTIL!!!
    VLW MESMO!!!

    ResponderExcluir
  4. Não consegui colocar o botão.
    Na primeira tentativa eu colei a descrição do botão acima do código e salvei, em vez de primeiro visualizar, depois tentei concertar mas só aparece a mensagem de error em XML 500.Acho que modifiquei sem querer algum pequeno detalhe..sou totalmente amadora...socorro
    obrigada

    ResponderExcluir
    Respostas
    1. Vou tentar ajudar, 1-anote em um papel ou no bloco de notas exatamente o código do seu botão,2- Com a ajuda do Ctrl+F encontre o código: (Tag) no html do seu layout, 3- apague o código referente ao seu botão que se encontra logo em seguida(abaixo) da (Tag), espero que solucione, obs? 1 sempre quando for modificar o html que não for da postagem faça um backup no próprio word ou bloco de notas e guarde o código como era antes de você alterar, qualquer problema é só apagar o com erro e colar o backup; segundo sempre trabalhe com o (copia e cola) quando for mexer em html em um nível amador qualquer detalhe pode dar erro! só mexe em código sem essas precauções programador ou imprudente...boa sorte!
      http://teligaformiga.blogspot.com.br/

      Excluir
  5. Valeu mesmo em tava me matando aqui achando que tinha q colocar um por um.

    ResponderExcluir
  6. Ola Idenaldo... uma pergunta: o que representa o número que aparece ao lado do botão compartilhar?

    ResponderExcluir
  7. oi, aqui tudo funcionava bem,eu participava do site, era so clicar abria a minha pagino do meu blog , a eu era incluido .Qualquer postagem do blog , eu compartilhava para o facebook , e corria todo na hora.. hoje eu consigo compartilhar para o orkut e o facebook , nao vai.
    vc pode me ajudar .....

    ResponderExcluir
  8. Tentei várias vezes e não funcionou! Várias alterações do template que já tentei fazer e nenhuma delas funciona! Parece que o blogger agora ignora qualquer mudança nos templates

    ResponderExcluir
  9. Ja tentei milhoes de vezes e esse botão nao aparece! =[

    ResponderExcluir
  10. Muito Bom esse post...parabéns e bem explicadinho!
    Curti muito!

    ResponderExcluir
  11. Muito bom. É um dos poucos que funcionam certinho pra compartilhamento do post de uma forma individual.

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.