OEmbed plugin para jQuery

Estou fazendo alguns testes para um sistema que lê tweets para agregar conteúdos e pensei: como fazer para que quando um texto que contenha um link pro Twitpic (por exemplo) exiba a foto?

Primeiro passo: baixe a biblioteca jquery-oembed para o seu projeto.

Imagine que você tenha a seguinte marcação html:

<p class="post">Esse é o teste com <a href="http://twitpic.com/2qabs0">http://twitpic.com/2qabs0</a> sadsa dsaff adsfdsaf dsf sadsa dsaff adsfdsaf dsf sadsa dsaff adsfdsaf dsf sadsa dsaff adsfdsaf dsf</p>

Usando jQuery e essa biblioteca, você pode percorrer todos os p.posts e seus links e para cada um deles, jogar em uma div com classe imgarea o embed

$(" p.post a").each(function() {
   $("div.imgarea").oembed($(this).attr("href"));
});

Fontes que podem ser embedadas:

  • 5min
  • Amazon Product Images
  • Flickr
  • Google Video
  • Hulu
  • Imdb
  • Metacafe
  • Myspace Videos
  • Qik
  • Revision3
  • Screenr
  • Slideshare
  • Twitpic
  • Viddler
  • Vimeo
  • Wikipedia
  • WordPress
  • YouTube

Plugin para meta-tags – WordPress

Como vocês já devem ter percebido, tenho feito alguns posts aqui no O Desenvolvedor sobre o WordPress. Tenho usado ele em algumas soluções para trabalhos freelas onde consigo adaptá-lo para ser um CMS de rápida instalação, fácil manutenção e barata hospedagem e disponibilidade e é relativamente flexível.

Uma das coisas que eu senti falta em todos os temas que baixei, era a presença das meta-tags description e keywords. Achei estranho, mas entendi o porque: os elementos básicos de postagem do WP, post e page, não possuem esses campos. Fiquei pensando em como fazer um workaround – ou como um colega do trabalho fala, um contorno técnico.
Mas, uma coisa que eu aprendi depois de deixar a progração desktop em C e partir para web, é que reinventar a roda toda vez não é preciso. E, logicamente, deveria haver algum plugin para isso.

Voi-lá. Eis que achei o Another WordPress Meta Plugin.

Estou usando ele em dois projetos pessoais: meu site próprio e no Eu Comi! (esse surgiu numa idéia/bate-papo com o @gserrano). Já notei uma certa diferença na indexação das páginas e afins.
*quer saber mais sobre a importância das meta-tags? No And After há uma série de posts a respeito:

Voltando ao plugin, ele segue o padrão de instalação de todos outros do WP: faça download, descompacte na pasta plugins, ative pela interface de admin e faça uma alteração no arquivo de cabeçalho do seu tema. Tudo bem explicadinho no how-to do site do projeto.
Tendo isso sendo feito, toda vez que você criar um post ou page, verá dois campos logo abaixo do editor de conteúdo: um chamado keywords, e o outro description. Sem segredos!
 

Usando a Prototype – passo 4 – upload de arquivo sem post na tela

Segue abaixo um exemplo de como fazer upload de um arquivo, através de um formulário, sem precisar dar post na página.
Como funciona?
Um form normal de upload de arquivo que tem no onsubmit chamada a função javascript. Essa, por sua vez, cria um iframe em tempo de execução, muda o target do form para esse iframe e faz o upload do form.
O arquivo de destino (nesse caso usei um .php, mas independe de qual linguagem para gerenciar esse upload você quer usar) tem no onload uma chamada à função javascript do parent dele que faz informar na tela que o upload foi efetuado. Trocandando em miúdos, o upload é feito da mesma forma que sempre foi feito, e quando a página é carregada no iframe – é o momento em que o upload do arquivo foi feito e a página processada -, por javascript se faz atualizar a página pai.

Segue abaixo o código das duas páginas, comentado (usei a biblioteca Prototype para ajudar no javascript):

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo de upload</title>
<script src="http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
    function upload() {
        //cria um iframe, escondido
        var iframe = new Element("iframe", {name:"target", id:"iframe_upload"});
        //insere na página o iframe
        document.body.insert(iframe);
        //muda o target do form, apontando para o iframe
        $("form_upload").target = iframe.name;
        //mostra a mensagem
        $("message").update("aguarde, enviando arquivo...");
    }
   
    function closeIframe() {
        //atualiza a mensagem
        $("message").update("arquivo enviado com sucesso");
        //apaga o iframe
        $("iframe_upload").remove();
    }
</script>
<style type="text/css">
    iframe {display:none;}
</style>
</head>
<body>
<h1>Exemplo de upload</h1>
<form action="upload.php" method="post" enctype="multipart/form-data" id="form_upload" onsubmit="return upload();">
    <input type="file" name="arquivo" id="arquivo" />
    <input type="submit" value="enviar" />
    <span id="message"></span>
</form>
</body>
</html>

 

upload.php

<?php
//faz todo o processamento necessário no PHP para persistir o arquivo
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Upload - OK</title>
</head>
<!-- chama função javascript da página pai -->
<body onload="parent.closeIframe();">
</body>
</html>

Basicamente, isso é o que a maioria dos sites que têm formulários de upload estão fazendo; é o que chamam, por aí, de upload 2.0. Não sei se concordo muito com o termo usado, mas faz o mesmo efeito.
Vale ressaltar que muitas bibliotecas javascript fazem isso, inclusive com plugins bem maduros. Mas, de qualquer modo, vale a pena saber como funcionam esses plugins, entender qual a dinâmica e o conceito.
Em breve mostro outra forma de fazer upload com barra de progresso – tanto com uma linguagem server-side quanto usando Flash (e Action Script 3).