Assina meu Feed ai!
Google
 


30 dezembro 2007

Social BookMark e Votos Rec6 no novo Blogger

Andei fazendo umas mudanças no meu template, inclui os botões para alguns serviços de Social BookMarking (Delicious, Rec6, Blogblogs, technorati, euba, etc.) e o número de votos no Rec6.

Para isso, eu achei um post no blog da Nospheratt Blosque.com que explica direitinho como fazer. Só que na hora de alterar o template o Blogger acusou erro no XML e eu tive que fazer umas alterações para ele aceitar e acabei mudando um pouco os botões de BookMarking. Como compartilhar é a palavra de ordem, aqui vão os códigos, mas como já existe o post do Blosque.com vou me ater somente as alterações que precisei ok?:

Votos Rec6 para novo Blogger

Cole o código abaixo antes da linha <p><data:post.body/></p> do seu template<div class='rec6'>
<script expr:src='"http://rec6.via6.com/link.php?action=widget&amp;url=" + data:post.url' type='text/javascript'/>
</div>

Como os templates do Blogger são escritos em XML, alguns cuidados têm que ser tomados como o uso do código html &amp; ao invés do &, que é justamente o que estava dando problema.

Lembrando que essa dica vale para os templates do novo Blogger (que já não é tão novo assim), para os templates do Blogger Clássico o código é o disponibilizado no site do Rec6.

Botões de Social Bookmarking(Favoritos)

Bom, aqui eu não tive mais problemas, só troquei uns botões, converti o botão do Blogblogs para XML como o do Techoratim, assim ele pega a URL do Blog automaticamente e adicionei um target="_blank" no botão do Technorati. Olha ai, alterações negritadas.<b:if cond='data:blog.url != data:blog.homepageUrl'>

<span class='favoritos'>

Adicione aos Favoritos<br/>

<a expr:href='"http://www.blogblogs.com.br/my/gadgets/fave?url=" + data:blog.homepageUrl' rel='alternate' target='_blank' title='Adicionar ao BlogBlogs'><img alt='Adicionar ao Blogblogs' border='0' src='http://malcomtux.googlepages.com/blogblogs.png'/></a>

<a expr:href='"http://rec6.via6.com/link.php?url=" + data:post.url' target='_blank' title='Adicionar ao Rec6'><img alt='Adicionar ao Rec6' border='0' src='http://rec6.via6.com/imagens/botao_rec6_16x16.gif'/></a>

<a expr:href='"http://www.linkk.com.br/submit.php?url=" + data:post.url' target='_blank' title='Adicionar ao Linkk'> <img alt='Adicionar ao Linkk' border='0' src='http://malcomtux.googlepages.com/linkk.gif'/></a>

<a expr:href='"http://ueba.com.br/NovoLink?url=" + data:post.url' target='_blank' title='Adicionar ao Ueba'><img border='0' src='http://malcomtux.googlepages.com/Ueba.jpg'/></a>

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

<a expr:href='"http://del.icio.us/post?url=" + data:post.url' target='_blank' title='Adicionar ao Delicious'><img alt='Adicionar ao Delicious' border='0' src='http://images.del.icio.us/static/img/delicious.med.gif'/></a>

<a expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" + data:post.url + "&amp;title="+data:post.title' target='_blank'><img alt='Adicionar ao Google' border='0' height='16' src='http://malcomtux.googlepages.com/rackgoogle.png' width='16'/></a>

<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title="+data:post.title' target='_blank'><img alt='Adicionar ao Yahoo' border='0' height='16' src='http://malcomtux.googlepages.com/rackyahoo.gif' width='16'/></a>


</span>

</b:if>

Da maneira que está o código acima, os botões só aparecem na pagina do post, para que eles apareçam também no índice exclua a primeira e a ultima linha.

Os Botões do Google e do Yahoo eu peguei no blog do Gregori Pavan que fez uma versão com 30 botões.

Bom, com isso eu termino de compartilhar mais essa, espero que seja útil. Se alguém tiver alguma dúvida ou achou útil não esqueça deixar um comentário.

<atualização>
Como citado no posta da Nosphe, para o botão dos votos no Rec6 ficar flutuando canto esquerdo do post
.rec6 {
float: left; // Troque left por right para alinhar a direita
margin: 5px;
}

.rec6 img {
border: none;
}
De pendendo do template você pode precisar de ajustes, no meu por exemplo eu precisei zerar, além da borda da imagem, o espaçamento interno (padding), ficou assim
.rec6 {
float: right; // Escolhi alinhar a direita
margin: 5px;
}

.rec6 img {
border: none;
padding: 0px;
}
O CSS dos botões de favoritos(Social Bookmarking) ficou assim
.favoritos {
font-weight: bold;
}

.favoritos img {
border-width: 0px;
padding: 1px;
}
</atualização>

Fontes:

Botões de Social Bookmarking - Rec6, BlogBlogs, Linkk, Technorati, Digg e Outros - para Blogger Blogspot - Blosque.com
Botões de favoritos e compartilhamento (Social Bookmarking) - gregoripavan.blogspot.com

9 comments:

Marcio Melo disse...

Blza... vou colocar lá no meu Blog.

Valeu pela visita, vou assinar o feed do seu tb :P

André Simões disse...

Só faltou explicar a parte css dos botões.

Frank Marcel disse...

bacana essa dica! tive problema no link de favoritos, mas depois eu vejo oq foi!
abraço!

Malcomtux disse...

Valeu o toque André, vou corrigir!

Mister Frank, se precisar é só falar!

Anônimo disse...

eae cara, blz!?

gostei da dica dos favoritos, a partir de hoje passamos a usar no ZiunaNet!

Ah, e tem link pra você lá hoje!

Apareça!

www.ziunanet.com

Abraço!

Bruno Lopes disse...

Valeu. Finalmente consegui colocar corretamente o botão do Rec6 no meu blog.

MADRID disse...

Grande dica.Já conhecia, mas acabei perdendo a formatação uns meses atras,agora vou colocar de novo os botôes, muito bom cara.
Abraço.

Malcomtux disse...

Valeu pessoal! Atualize o post com os códigos css.

Quadrideko disse...

Valeu cara ! Suas dicas me ajudaram muito.
Um abração