segunda-feira, 24 de setembro de 2007

Botões de favoritos e compartilhamento (Social Bookmarking)

Eu já tinha visto em vários blogs icones no rodapé dos posts com link direto para favoritos (yahoo, netscape, technorati, blogblogs...) e compartilhamento de post (rec6, linkk, digg...), mas não sabia como colocar no meu blog. Foi que eu achei o blog http://net-dinheiro.blogspot.com e lá achei o código para 8 links e a explicação de como instalar.

Como sou novo aqui no blogger, fiquei analisando o código, e lembrei que existiam mais do que aqueles 8 links. E comecei a montar um "rack" maior, por enquanto com 30 botões, que facilitam e agradam a uma grande maioria.

Coloquei no meu blog, testei e agora vou divulgar aqui pra que outras pessoas possam usar.

O código só funciona para BLOGGER (blogspot, modelo novo), não funciona no wordpress ou outros!

Os botões são para BlogBlogs, Technorati, Google Bookmarks, Yahoo, Ma.gnolia, Stumbleupon, Blinklist, Furl, Simpy, Spurl, Reddit, Segnalo, Bluedot, Ueba, Rec6, Linkk, Linkto, Websapiens, Ouvi dizer, Do melhor, Jasabia, Eu curti, Subindo, Linkloco, No clique, Med News, Blogosfera, Do tipo, Fixolas e Planet News.

Então vamos a explicação de como instalar no seu blogger:

1º - Logado no blogger, clique na guia "Modelo" e depois "editar HTML";

2º - Faça um backup, porque se der algum erro é só voltar o modelo salvo. Clique em "Baixar modelo completo" e salve o arquivo;

3º - Depois marque a caixa "Expandir modelos de widgets";

4º - No código localize a parte "<p class='post-footer-line post-footer-line-3'/>";

5º - Clique aqui, uma nova janela abrirá, com um código. Selecione tudo, cole no bloco de notas, e salve no seu computador.

6º - A primeira alteração no código (no bloco de notas) deve ser feita. Somente no primeiro parágrafo, a parte do Blogblogs, você deve digitar o endereço do seu blog a mão. Coloque na parte em vermelho o endereço do seu blog.

Exemplo:

<a href='http://www.blogblogs.com.br/my/gadgets/fave?url="endereço do seu blog"' rel=...

Atenção observe que no final da palavra blog tem duas aspas, uma dupla e outra simples. Tire as aspas duplas (mantenha a simples ' ) e não use a barra (/) no final do endereço. No meu caso fica assim:

<a href='http://www.blogblogs.com.br/my/gadgets/fave?url=http://gregoripavan.blogspot.com' rel=...

7º - Copie todas essas imagens e suba para o seu servidor. Para salvar clique com o botão direito do mouse e depois "Salvar imagem como...".

8º - Pegue o endereço correto de cada imagem para inserir no código (bloco de notas). Onde está escrito "endereço da imagem aqui", em vermelho.

Exemplo:

<a expr:href='"http://technorati.com/faves?add=" + data:blog.homepageUrl' target='_blank'><img src='endereço da imagem aqui' alt='Adicionar ao Technorati' border='0' width='16' height='16' /></a>

No meu caso ficaria assim:

<a expr:href='"http://technorati.com/faves?add=" + data:blog.homepageUrl' target='_blank'><img src='http://gregoripavan.googlepages.com/racktechnorati.gif' alt='Adicionar ao Technorati' border='0' width='16' height='16' /></a>

9º - Depois de fazer as alterações no código, salve, selecione e copie. No blogger, abaixo da tag "<p class='post-footer-line post-footer-line-3'/>", cole todo o código do bloco de notas.

Exemplo:

<p class='post-footer-line post-footer-line-3'/> <span class='favoritos'> <center> Adicione aos Favoritos Compartilhe<br/> <a href='http://www.blogblogs.com.br/my/gadgets/fave?url=http://gregoripavan.blogspot.com' rel='alternate' target='_blank'><img src='blogblogs.png' alt='Adicionar ao Blogblogs' border='0' width='16' height='16' /></a> ...

10º - Clique no botão laranja "Salvar modelo", e pronto!

Dicas:

Observe que cada botão está em um parágrafo e começa com "<a expr..." e termina com "...</a>. Se você não quiser usar algum dos 30 botões é só apagar a parte correspondente.

Se você não quer que esses botões no rodapé de cada post apareça na pagina inicial, adicione no começo a tag "<b:if cond='data:blog.url != data:blog.homepageUrl'>" e no final feche com "</b:if>".

Exemplo:

<p class='post-footer-line post-footer-line-3'/> <b:if cond='data:blog.url != data:blog.homepageUrl'> <span class='favoritos'> <center> Adicione aos Favoritos Compartilhe<br/> <a href='http://www.blogblogs.com.br/my/gadgets/fave?url=URLDOSEUBLOG' rel='alternate' target='_blank' title='Adicionar ao BlogBlogs'><img alt='Adicionar ao Blogblogs' border='0' src='http://blogandopordinheiro.googlepages.com/blogblogs.png'/></a>

...

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url' target='_blank' title='Adicionar ao StumbleUpon'><img alt='Adicionar ao StumbleUpon' border='0' src='http://blogandopordinheiro.googlepages.com/stumbleupon.gif'/></a> </center> </span> </b:if>

Também pode ser mudado a parte onde está escrito "Adicione aos Favoritos Compartilhe", você pode colocar o texto que quiser.

No código falta ainda o diHitt porque deu um problema e ainda não consegui resolver. Colocarei em breve.

Se souber de mais algum deixe um comentário que eu adicionarei ao código.




Um comentário:

  1. Holá amigo, fiz todos os procedimentos corretos mas na hora de salvar minha alteração dá essa mensagem:
    "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Element type "a" must be followed by either attribute specifications, ">" or "/>"."

    Você saberia oque pode ser ?

    ResponderExcluir

Para fazer um comentário, o leitor deve fornecer seu nome e endereço de e-mail. O conteúdo publicado neste espaço é público. Os comentários são de responsabilidade exclusiva do autor e não reflete necessariamente a opinião do dono do blog, seus associados e/ou prestadores de serviços.

O leitor pode optar por não preencher esses dados básicos, mas o moderador reserva-se no direito de não publicar ou retirar o comentário do ar. Não há manipulação, de nenhum tipo, no texto deixado pelo leitor. Todos os leitores que fizerem comentários, inserindo nome e e-mail ou não, terão o número do seu IP registrado.