Já faz algum tempo que eu queria colocar botões para incentivar os visitantes a divulgar meus posts no Digg e Delicious e Tweetmeme, mas nunca sobrava tempo para pesquisar plugins ou scripts para tal. Então resolvi fazer umas horinhas extras em casa hoje isso.

O resultado pode ser visto no painel lateral do blog, no Widget Share, onde coloquei botões para compartilhar no Digg, Tweememe e ainda um botão de Follow para o novíssimo Twitter do blog. Ainda falta o botão para o Delicious, mas este fica para mais tarde.

Para quem quiser fazer o mesmo, basta adicionar fragmentos HTML e JavaScript no seu tema do WP, ou dentro de um Text Widget, seguindo os tutoriais a seguir. O máximo que precisa ser configurado é o nome de usuário do twitter.

Botão Digg: http://about.digg.com/button
Botão Retweet: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/
Botão Follow: http://help.tweetmeme.com/2010/02/23/follow-button/

Como comentei acima, criei também um twitter para o blog, @SamuraiDio, e adicionei o plugin WP to Twitter. Agora cada novo post vai também aparecer no twitter, facilitando para quem quiser “seguir” o blog mas não costuma usar feeds.

[updated]

Por motivos de performance (criados com JavaScript os botões demoram alguns segundos a mais para serem exibidos) procurei por uma solução em PHP, e encontrei combinando os plugins Digg Digg e PHP Code Widget.

O primeiro é um plugin que adiciona botões para diversos serviços de compartilhamento, e o segundo é um Widget identico ao Text Widget do WP, mas que aceita também códigos PHP.

Para adicionar os botões no Widget, e não nos posts, eu desabilitei as exibições padrão do Digg Digg, e criei um PHP Code Widget com o seguinte código fonte:

<center><div id="dd_before" style="height:80px; width:190px;"><ul>
<li class="li_horizontal">
<?php digg_digg_generate('Normal'); ?>
</li>
<li class="li_horizontal">
<?php digg_digg_reddit_generate('Normal'); ?>
</li>
<li class="li_horizontal">
<?php digg_digg_twitter_generate('Normal','SamuraiDio'); ?>
</li>
</ul></div></center>

Os métodos digg_digg_*_generate() são fornecidos pelo plugin Digg Digg, e podem ser usados também em qualquer lugar do template.

Também desisti de usar o botão para o Delicious, e adicionei um para o Reddit.

Há alguns dias criei um plugin para jQuery, para desenhar medidores no estilo barômetros ou marcadores de velocidade, utilizando o elemento <canvas>.

Como um plugin requer uma atenção especial e atualizações periódicas, dediquei para ele uma página deste blog. E também o wave jQuery.canvasmetter, para o pessoal poder participar. Mais informações podem ser encontrados nestes.

Links:
página jQuery.canvasmetter
página de download do plugin jQuery.canvasmetter
wave jQuery.canvasmetter

Nesta última quinta-feira, dia 14, foi lançada a nova versão do jQuery, a biblioteca Javascript que promete (e cumpre) simplificar o desenvolvimento de scripts escrevendo-se muito menos linhas de código. A versão 1.4, foi lançada, intencionalmente, no dia 14 de Janeiro, por ser este o dia do aniversário da biblioteca.

Como comemoração pelo dia de lançamento, o time do jQuery colocou no ar um hot-site, 14 dias de jQuery, que divulgará a cada dia, uma das novas melhorias da versão 1.4, e ainda terá promoções para os desenvolvedores que usam e apoiam a biblioteca. Visite o site http://jquery14.com/ para maiores informações. O download da nova versão pode ser feito no site oficial: http://jquery.com.

Não vou me estender muito neste post, visto que estou alguns dias atrasado, e outros blogueiros já o fizeram. Então vou apenas adicionar alguns links blogs de alguns amigos que falaram sobre o lançamento. Não deixem de ler os posts, e baixarem a nova versão.

Links:

http://ruancarlos.com.br/Blog/jquery-1-4-e-lancado/

http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

Estive pesquisando hoje algumas técnicas novas de CSS, e me deparei com um recurso muito interessante, que nunca utilizei, e nunca reparei que fosse usado em lugar algum antes. Trata-se da possibilidade de utilizar CSS para adicionar contadores e auto-numeração para qualquer elemento HTML.

Qualquer designer CSS que se preze conhece a propriedades de numeração das listas (tags <li>), poucos mas sabem que os mesmos tipos de numerações podem ser adicionadas a qualquer conjunto de elementos, inclusive adicionando estilos personalizados aos contadores.

Veja o exemplo a seguir:

A lista acima, foi criada utilizando apenas elementos div, e os seguintes estilos:

div.list {
    counter-reset: my-list;     /* inicializa o contador */
}
div.list div {
    counter-increment: my-list; /* incrementa */
}
div.list div:before {
    content: counter(my-list) ". "; /* imprime */
}

A propriedade counter-reset inicializa a contagem com o identificador my-list a cada vez que um elemento <div> com a classe list é exibido. Já a propriedade counter-increment, incrementa este contador a cada elemento <div> “filho” do primeiro.

A partir daí, podemos utilizar os pseudo-elements :before, ou :after, para adicionar o valor do contador na propriedade content, utilizando a função counter(). A propriedade content, pode também receber qualquer string adicional, permitindo o uso de separadores diversos do contador para o conteúdo do elemento.

O fragmento HTML utilizado no exemplo acima está a seguir:

<div class="list">
    <div>foo bar</div>
    <div>foo bar</div>
    <div>foo bar</div>
</div>

As propriedades counter-reset e counter-increment aceitam também um segundo valor, numérico, usado, respectivamente, para definir o início da contagem (padrão 0) e o valor de incremento (padrão 1).

Veja o mesmo exemplo, iniciando o contador com -4, com incremento de 2:

div.list {
    counter-reset: my-list -4;  /* inicializa o contador */
}
div.list div {
    counter-increment: my-list 2;   /* incrementa */
}

A função counter() também aceita um segundo parâmetro, definindo o tipo de contador utilizado. Todos os tipos usados na propriedade list-style-type dos elementos <ul>, <ol> e <li> são suportados.

Para finalizar, vamos alterar os estilos e separadores dos nossos contadores, utilizando também um tipo diferente:

div.list div:before {
    content: "[" counter(my-list, lower-alpha) "]";
    font-family: monospace;
    padding: 0 10px 0 0;
    font-weight: bold;
    color: red;
}

…e o resultado:

Embora eu tenha utilizados elementos <div> nos meus exemplos, contadores podem ser adicionados a qualquer lista de elementos, incluindo as linhas ou colunas de uma tabela, por exemplo.

Todas as propriedades acima fazem parte das recomendações da W3C para CSS nível 2, que podem ser encontradas em http://www.w3.org/TR/CSS2/generate.html, e são suportadas pelos navegadores Firefox 3.0, MSIE 8, Google Chrome 2.0, Safari 3.0 e Opera 9.0, ou superiores.

Fonte: http://www.w3.org/TR/CSS2/generate.html