Rec6 - Pegando o número de votos de qualquer postagem

Posted by admin at Abril 2nd, 2007

Opa pessoal,

Lembram-se da minha reclamação do botão do Rec6 com código feio?

Pois é. O tópico ficou 1 dia e meio em primeiro lugar no Rec6, mandei mensagem para os caras do syxt, mas nada de alguém mostrar alguma solução (como escolha de skins para o botão, ou uma página para recuperar o valor diretamente, ou pelo menos, um código menos feio). Daí, nós mortais, temos que nos virar pra resolver a questã. hehehee

Implantei a solução no meu blog, quase que eu esqueço de falar pra vocês aqui comé que foi, mas lembrei: pegando o número de votos do seu post de qualquer post no Rec6 via JavaScript.

Bora ao trabalho.

Bom, primeiramente identei este belo código gerado pelo script do Rec6:

<div style=”font-family: Trebuchet MS, Tahoma, Verdana, Arial;
background-image:url(http://rec6.via6.com/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://rec6.via6.com/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://rec6.via6.com/link.php?url=http://elmicox.blogspot.com”>
<img src=”http://rec6.via6.com/imagens/botao_subir.gif” border=”0″ />
</a>

</div>
</div>

Fica melhor assim né?

<div style="font-family: Trebuchet MS, Tahoma, Verdana, Arial;
  background-image:url(http://rec6.via6.com/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://rec6.via6.com/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://rec6.via6.com/link.php?url=http://elmicox.blogspot.com">
      <img src="http://www.syxt.com.br/rec6/imagens/botao_subir.gif" border="0" />
    </a>
  </div>
</div>

Agora já fica fácil perceber que pra pegar o número de votos via JavaScript é só pegar o innerHTML da primeira tag A.
Pero
antes, agente tem que colocar uma div ao redor do script, para nomeá-la e ser possível chegar ao código gerado do script do Rec6.

Ficará assim:

  <div id="cod_syxt">
    <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=<$BlogItemPermalinkUrl$>" type="text/javascript"></script>
  </div>
  <!-- pegando a quantidade de pontos no Rec6 e jogando na var ptos -->
  <script>ptos = document.getElementById("cod_syxt").getElementsByTagName("a")[0].innerHTML;</script>

Veja que eu coloquei uma div ao redor do script (chamada cod_syxt). Daí todo código javascript gerado pelo Rec6 ficará aí dentro. Depois é só buscar o primeiro elemento A e guardar na variável chamada "ptos".

Como usar a variável "ptos"? Ué, do jeito que você quiser.
Por exemplo, assim:

<p>Olá, tenho <script>document.write(ptos)</script> pontos no Rec6. <a href="link_do_rec6">Clique aqui</a> para aumentar meus pontos</p>

Beleza né? Sem mexer com PHP ou com plugin (é claro que existem ótimos plugins para o Wordpress do Rec6 se quiser usar).

Se ainda quiser, também pode mexer ou ocultar o código gerado do Rec6 via CSS.
Por exemplo:

#cod_syxt { display: none; /* oculta o botão do rec6, mas a variável ptos continua valendo */}

Ou

#cod_syxt { width: 63px; margin: 4px 10px; float: left; /* coloca o botão à esquerda do texto */}

(Perceba que se pode pegar a quantidade de votos de qualquer link, é só mudar o link.)

Se procura dicas sobre como inserir o código do Rec6 no wordpress ou blogger, veja este post.

Dúvidas, erros ou comentários posta ae :)

Posted in bookmarks, dicas| 1 Comment | 

Indicar o post do blog em bookmark social

Posted by admin at Abril 2nd, 2007

Postado também no: fórum iEvolution.

Olá povo.

Nesta postagem ensinarei uma forma rápida de inserir botões/links de indicação da sua postagem em sites como Digg, del.icio.us, rec6 e TutoCle. (Assim como há no final dos meus posts)

Editado 27/11/06: A pedido nos comentá estou adicionando o LinkBlog e favorit0br (que nome!).

Após inovar colocando no Fórum iEvolution este sistema de indicação decidi escrever este post.

Sim, sei que nos sites dos caras eles devem ensinar a fazer isso, porém nos sites que eu pesquisei ví que só ensinam de forma genérica (para o site todo) e com aquelas imagenzinhas chatas. Não ensinam especificamente para usuários do blogger ou wordpress.

Bom, basicamente é só você fazer um link para a página de recepção dos links do site de bookmark passando como parâmetro a URL e o título que você quer. (obs.: O rec6 ainda não tem suporte para receber o título, mas eu já inclui na esperança de que eles corrijam a mancada futuramente Graças ao comentário do Anônimo descobri que o Rec6 usa ‘titulo’ ao invés de ‘title’ - editei os códigos).

Exemplo para o blogger:

Adicionar esta página no
<a href=’http://tutocle.com/post?url=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>’ target=’_blank’>TutoCle,</a>
<a href=’http://del.icio.us/post?v=4&partner=fb&url=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>’ target=’_blank’>Del.icio.us,</a>
<a href=’http://digg.com/submit?phase=2&partner=fb&url=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>’ target=’_blank’>Digg,</a>
<a href=’http://rec6.via6.com/link.php?url=<$BlogItemPermalinkUrl$>&titulo=<$BlogItemTitle$>’ target=’_blank’>Rec6,</a>
<a href=’http://www.linkblog.com.br/novoPost.jsp?acao=voltar&link=<$BlogItemPermalinkUrl$>&titulo=<$BlogItemTitle$>’ target=’_blank’>LinkBlog,</a>
<a href=’http://favorit.0br.com.br/bookmarks/?action=add&address=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>’ target=’_blank’>Favorit0br,</a>

Exemplo para o Wordpress:

Adicionar esta página no

<a href=’http://tutocle.com/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>’ target=’_blank’>TutoCle,</a>

<a href=’http://del.icio.us/post?v=4&partner=fb&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>’ target=’_blank’>Del.icio.us,</a>

<a href=’http://digg.com/submit?phase=2&partner=fb&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>’ target=’_blank’>Digg,</a>

<a href=’http://rec6.via6.com/link.php?url=<?php the_permalink(); ?>&titulo=<?php the_title(); ?>’ target=’_blank’>Rec6,</a>

<a href=’http://www.linkblog.com.br/novoPost.jsp?acao=voltar&link=<?php the_permalink(); ?>&titulo=<?php the_title(); ?>’ target=’_blank’>LinkBlog,</a>

<a href=’http://favorit.0br.com.br/bookmarks/?action=add&address=<?php the_permalink(); ?>&title=<?php the_title(); ?>’ target=’_blank’>Favorit0br,</a>

//Pessoal do Wordpress, não tenho muita habilidade com o mesmo, por isso me corrijam aí nos comentários a respeito de qualquer erro cometido.

Prontim, espero ter ajudado. :)

Posted in blogger, bookmarks, dicas, wordpress| No Comments | 

Rec6 - Botão de número de votos já mandando o título

Posted by admin at Abril 2nd, 2007

Opa.

Sei que estou falando demais nesse Rec6 mas, olhando minha postagem anterior, ví que dava pra fazer um upgrade que ia auxiliar a toda comunidade que tem o botão de número de votos do Rec6 no seu site.

Bom, no capítulo anterior (heheh postagem anterior), vimos que não precisamos ficar presos ao layout oferecido pelo script do Rec6 e aprendemos também a guardar em uma variável JavaScript a quantidade de votos de qualquer link no Rec6.

Mas, ví que, ao clicar no link do botão oferecido pelo script, só vai a URL da página para a indicação, não vai o título automaticamente. O que dá trabalho a nosso visitante que indica o post (ou a nós mesmos quando somos nós que indicamos). Temos que escrever toooodo o título (ou usar a técnica milenar do Ctrl+C Ctrl+V).

Chega de blablablá, o truque consiste apenas em alterar o href dos 2 links presentes no botão, via JavaScript. Simples não? Por que o mico não pensou nisso antes? Mico burro.

O script deles gera um botão sem o parâmetro ‘titulo’, nosso script adiciona ao link do botão o atributo ‘titulo’. É claro que pra fazer isto cada botão precisa estar dentro de algo (div) que tenha um nome único (ID). Mão na massa:

<div class="cod_syxt" id="cod_syxt_js">
 <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=http://sua_url" type="text/javascript"></script>
</div>
<script>
 links_rec6 = document.getElementById("cod_syxt_js").getElementsByTagName("a");
 ptos = links_rec6[0].innerHTML;
 links_rec6[0].href = links_rec6[0].href + "&titulo=" + "Seu Titulo";
 links_rec6[1].href = links_rec6[1].href + "&titulo=" + "Seu Titulo";
</script>

Se você tiver mais de um botão na mesma página, tem que usar alguma coisa pra dar um nome diferente pra cada div pai dos botões. Eu usei os IDs das postagens. Veja abaixo.

Pro pessoal do Blogger:

<div class="cod_syxt_css" id="cod_syxt_js_<$BlogItemNumber$>">
 <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=<$BlogItemPermalinkUrl$>" type="text/javascript"></script>
</div>
<script>
 links_rec6 = document.getElementById("cod_syxt_js_<$BlogItemNumber$>").getElementsByTagName("a");
 ptos = links_rec6[0].innerHTML;
 links_rec6[0].href = links_rec6[0].href + "&titulo=" + "<$BlogItemTitle$>";
 links_rec6[1].href = links_rec6[1].href + "&titulo=" + "<$BlogItemTitle$>";
</script>

Não sei muito de WordPress mas arrisquei aqui:

<div class="cod_syxt_css" id="cod_syxt_js_<?php the_ID(); ?>">
 <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=<?php the_permalink(); ?>" type="text/javascript"></script>
</div>
<script>
 links_rec6 = document.getElementById("cod_syxt_js_<?php the_ID(); ?>").getElementsByTagName("a");
 ptos = links_rec6[0].innerHTML;
 links_rec6[0].href = links_rec6[0].href + "&titulo=" + "<?php the_title(); ?>";
 links_rec6[1].href = links_rec6[1].href + "&titulo=" + "<?php the_title(); ?>";
</script>

Veja esse negócio funcionando ao passar o mouse sobre o botão que tem aqui no meu blog (aproveita e clica heheh). Veja na barra de status que, além do parâmetro ‘url’, agora também temos o parâmetro ‘titulo’.

Bugs? Grita nos comentários ae. Té. (Agora acho que já acabaram minhas postagens sobre Rec6).

Posted in blogger, bookmarks, dicas, wordpress| No Comments | 

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

Posted by admin at Janeiro 24th, 2007

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 :-)

Posted in bate-papo, bookmarks| No Comments |