Rec6 - Código de número de pontos é horrível

Olá povo.

Lá estava eu tentando inserir aquele código do Rec6 para exibir o número de votos de determinada notícia em meu blog.

<script language="JavaScript"
src="http://www.syxt.com.br/rec6/link.php?action=widget&url=http://elmicox.blogspot.com" 
type="text/javascript"></script>

Bom, de primeira já achei que o botão não ficaria bem com o visual da minha página. Mas fazer o quê né? Não havia outra opção a escolher. Então decidi colocar ele ao lado dos outros botões de indicação na minha página.

Tudo beleza, até eu perceber que o botão é anti-social. Não gosta de ficar na mesma linha que outros elementos e cria uma nova linha só pra ele.
Ah, aí já é pegar pesado demais. Quer dizer que, além de ter que colocar um botão totalmente estranho ao layout, ele ainda tem que ficar ocupando um bloco de 90px de altura só pra ele??

Nãaao. Isso eu não aceito. Está na hora de eu usar meus "poderes sobrenaturais" no JavaScript (modéstia mico) e pegar diretamente o número de votos pra fazer meu próprio botão customizado (não, não tentei customizar o botão usando apenas CSS. Iria ser muito trabalho. Logo, logo verão o motivo).

Editado 24-01-07: Feito, peguei o número de votos apenas com JavaScript e mostrei como posicionar usando CSS.

Falei: "vou pegar o código gerado, entrar nos filhos usando DOM e capturar o valor". Tudo seria uma tarefa simples até eu ver isto:

<div style="font-family: Trebuchet MS, Tahoma, Verdana, Arial; background-image:url(http://www.syxt.com.br/rec6/imagens/pontos_bg.gif); background-repeat:no-repeat; text-align:center;width:57px;height:80px;padding:3px 2px 3px 2px; line-height:normal;" valign="top"> <div style="color: #ffc317; font-size: 21px; margin: 0; padding: 0"> <a href="http://www.syxt.com.br/rec6/link.php?nv=1&url=http://elmicox.blogspot.com" style="text-decoration:none; color: #ffc317;font-size: 21px; "> 0 </a> </div> <div style="color: #ffc317; font-size: 12px; margin: 0; padding: 0"> Pontos </div> <div style="margin: 10px 0px 0px 0px; color: #A5A5A5;"> <a href="http://www.syxt.com.br/rec6/link.php?url=http://elmicox.blogspot.com"> <img src="http://www.syxt.com.br/rec6/imagens/botao_subir.gif" border="0" /> </a> </div> </div>

Gostou? Pois é. É este belo código que é printado na sua página pra que aquele belo botão apareça, com o perdão da ironia. O código também não é identado.

O meu serviço com JavaScript e DOM iria virar uma complicação até chegar ao valor que eu queria. Mas bora lá. Mão na massa mico. Com alguns childNodes eu consigo chegar até o valor que está dentro do primeiro <A>, mas terei problemas com interpretações em alguns navegadores. Assim que eu tiver novidades sobre isso posto pra vocês.

Não, não é uma crítica destrutiva. Avisarei ao pessoal da Syxt (rec6) e proponho algumas soluções:

• Dar outras opções visuais de botão (skin) pra que leigos possam escolher o tipo de botão sem precisar mexer no CSS ou JavaScript.
• Para ter um html mais "bonito", simplificar o código acima para umas 2 ou 3 tags apenas. Sem excesso de divs. É possível sim.
• Para os não-leigos, fornecer uma página que retorne diretamente a pontuação de determinada notícia sem códigos HTML adicionais, apenas o número de pontos.
• Incluir o parametro "titulo" no link da indicação pra, caso seja a primeira indicação, o usuário não ter que digitar o título na mão.

Gostou desta postagem? Então aproveita e vota nela ai :-)

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.