Como colocar o Twitter no seu blog (quase sem programar)

Essa semana tive que implementar em um box com os últimos tweets de determinada conta, em um blog para um cliente da MM Café.

A solução mais simples que encontrei foi consumir os dados da API do twitter através do javascript mesmo. Para isso busquei uma solução pronta e a melhor que encontrei foi o Twitterjs. Script extremamente simples de usar, você pode fazer o download da última versão no Google Code ou utilizar o hotlink direto, como no exemplo abaixo:

<script 
 
src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"
 
type="text/javascript">
</script>

Com o script linkado na sua página tudo o que você precisa é chamar a função que irá requisitar os tweets e passar as configurações desejadas.

Um exemplo simples, que será explicado após o código:

getTwitters("myTweets", { 
id: "andafter",
count: 10,
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: "<li> %text% <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a></li>"
});

No exemplo acima eu vou exibir no meu elemento html com id "myTweets" os últimos 10 tweets do @andafter em forma de lista. O html é simples:

<ul id="myTweets"> <li>Aguarde, carregando tweets...</li> </ul>

Pronto!

Agora vamos a algumas explicações, primeiro das configurações quando você chama a função:

Opções de configuração

Agora vou explicar as configuração quando você chama a função:

  • id: seu user no twitter
     
  • count: quantidade de tweets exibidos
     
  • clearContents: se for true, limpa o elemento html que carregará os tweets
     
  • enableLinks: true/false – deixa os links do tweet clicáveis
     
  • ignoreReplies: true/false – exibir ou não os seus replys para outras pessoas

  • template: o HTML que irá exibir o tweet, neste item que irão as variáveis do tweet , que são explicadas mais a frente neste post
     
  • prefix: mensagem exibida antes de cada tweet (no caso de não usar template)
     
  • timeout: Millisegundos antes de executar a ação do "onTimeout"
     
  • onTimeout: função executada quando o tempo setado acima acaba
     
  • newwindow: true/false – define se os links dos tweets irão ou não abrir em uma nova janela (ou aba)
     
  • callback – Função chamada quando completa a requisição e exibição dos tweets. Esta função não é chamada em caso de timeout.

 

Variáveis do template

Abaixo a explicação das variáveis que você pode usar para exibir seus tweets (no item "template" da configuração):

  • text – a mensagem do tweet
     
  • id – id do tweet
     
  • time – tempo "amigável" da postagem, ex: 2 hours ago
  • created_at – tempo da criação
     
  • user_name – Nome do usuário
     
  • user_screen_name – Username
     
  • user_id – ID do usuário
     
  • user_profile_image_url – Avatar do user
     
  • user_url – Url do user
     
  • user_location – Localização do user
     
  • user_description – Bio do user

 

 

 E o resultado, já apresentei lá em cima, segue um exempo um pouco diferente:

getTwitters("myTweets", { 
id: "andafter",
count: 10,
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: "<li> %text% <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a></li>", timeout: 15, onTimeout: function(){ alert("No momento o twitter não está respondendo."); }
});

Sorteio no Twitter com PHP

Semana passada ganhei cinco seriais do Mind Meister Premium (um aplicativo web para construção de mapas mentais) para distribuir e dois deles resolvi distribuir no Twitter.

Questionado pelo @fefurst sobre os próximos prêmios, falei que não sabia como iria fazer o sorteio e ele, monstrinho programador que é, prontamente respondeu que "ia dar uma olhadinha na API do Twitter".

Dito e feito, na mesma manhã ele me envia a primeira versão de um script em PHP (já viu as novidades do PHP 5.3?)que utiliza a API Serch do Twitter procurando por uma mensagem específica (a da promoção, que você pode setar no script) para sortear entre os participantes…

 

Features

  1. Configuração da frase a ser buscada
  2. Pode sortear vários participantes
  3. Lista todos os tweets que estão participando
  4. Não sorteia o responsável pela promoção
  5. Não sorteia mais de uma vez um usuário
  6. Elimina RT´s duplicados
  7. Permite filtrar a data inicial e final dos tweets que participarão do sorteio

 

O código

Agora está na versão 0.3, tudo na agilidade do Furst para publicar um código bonitinho e corrigir alguns bugs. O código está como deve ser: enxuto e fácil de entender, não ousei nem adicionar mais comentários, pois está bastante legível.

 

 

<?php
/*
 * Sorteio no twitter... :D v. 0.3 RC1
 *
 * Auhor: Felipe Furst
 * email: [email protected]
 *
 */
// login de onde origina o sorteio
$login = "gserrano";
// início do perído para avaliação de RT
$data_inicio = strtotime("2009-11-13 08:00");
// fim do perído para avaliação de RT
$data_fim = strtotime("2009-11-18 12:00");
// msg q foi retwitada, atenção as vezes alguém pode retwitar uma msg e ela icar cortada, interessante colocar um código junto da msg ou cortar alguma palavras do final
$rt_string = "@gserrano";
// número de pessoas para sortear
$num_premios = 2;
// ------------------ a partir daqui não se mexe -----------------------
// ------------------ a partir daqui não se mexe -----------------------
// ------------------ a partir daqui não se mexe -----------------------
// ------------------ a partir daqui não se mexe -----------------------
$str = Array("á", "à", "â", "ã", "ä", "é", "è", "ê", "ë", "í", "ì", "î", "ï", "ó", "ò", "ô", "õ", "ö", "ú", "ù", "û", "ü");
$rep = Array("a", "a", "a", "a", "a", "e", "e", "e", "e", "i", "i", "i", "i", "o", "o", "o", "o", "o", "u", "u", "u", "u");
$rt_string = str_replace($str, $rep, strtolower($rt_string));
$search_str = "{$login}";
if(strlen($rt_string) > 0) {
	$temp = explode(" ", $rt_string);
	foreach($temp as $t) {
		$search_str.="+{$t}";
	}
}
$page=1;
$sorteio = Array();
echo "Sorteio de {$num_premios} pr&ecirc;mios.<br><br>";
echo "Twittadas:<br>";
while(true) {
	$twtr_search = "http://search.twitter.com/search.atom?q={$search_str}&rpp=100&page={$page}"; // busca todos os registros possíveis ...
	$str_xml = file_get_contents($twtr_search);
	$xml = new SimpleXMLElement($str_xml);
	$page++;
	if($page > 1500) // a api do twitter só retorna 1500 páginas
		break;
	if(count($xml->{"entry"}) > 0) {
		foreach($xml->{"entry"} as $e) {
			if(strtotime($e->{"published"}) <= $data_fim && strtotime($e->{"published"}) >= $data_inicio) { // tem que estar dentro da data do sorteio
				if(array_search(utf8_decode($e->{"author"}->{"name"}), $sorteio) === false) { // verifica se o cara retwittou mais de uma vez para não aumentar a chance de vitória
					echo date("m.d.y H:i:s", strtotime($e->{"published"})). " - ";
					echo utf8_decode($e->{"author"}->{"name"}).": ".str_replace(Array("<b>", "</b>"), "", utf8_decode($e->{"content"}))."<br>";
					if(strrpos($e->{"author"}->{"name"}, $login) === false) { // não sorteia quem proporciona o sorteio
						$sorteio[] = utf8_decode($e->{"author"}->{"name"});
					}
				}
			}
		}
	}
	else {
		break;
	}
}
if(!empty($sorteio)) {
	echo "<br><br>Sorteado(s):";
	for($i=0; $i<$num_premios; $i++) {
		if(empty($sorteio)) {
			echo "<br><br>sobraram ".($num_premios-$i)." pr&ecirc;mios.";
			break;
		}
		srand(strtotime("now"));
		$randval = rand(0, count($sorteio)-1);
		echo "<br>O vencedor do pr&ecirc;mio n&uacute;mero ".($i+1)." &eacute;: {$sorteio[$randval]}";
		unset($sorteio[$randval]); // não sortei o cara mais de uma vez ...
		$sorteio = array_values($sorteio); // refaz o vetor eliminando a posição nula do maluco removido
	}
}
else {
	echo "<br><br>Não houve twittadas para o sorteio.";
}

 

 

Testei ele aqui e está funcionando perfeitamente. Com essa base dá para implenetar mais coisas, como um reply automático para os vencedores, adicionar periodicamente os concorrentes em um BD para gerar uma "lista" de quem está participando da promoção (caso ela dure vários dias, por exemplo)… criatividade, programadores deste mundo!

 

A base está aí, valeu @fefurst!

Exiba seus últimos twits no seu blog

Quer mostrar suas últimas mensagens enviadas no Twitter (não sabe ainda o que é o Twitter?) no seu site/blog? Sem nenhuma programação server-side?

Simples. O próprio pessoal do Twitter desenvolveu uma biblioteca javascript na qual você só precisa inserir o username (o usuário não pode ter as mensagens privadas) e dizer quantas mensagens quer exibir.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
            <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nome_do_usuario.json?callback=twitterCallback2&amp;count=quantidade"></script>

Troque o nome_do_usuario pelo username do Twitter e o quantidade pela quantidade de mensagens.

Feito isso, crie uma lista ul com o id igual a twitter_update_list.

<ul id="twitter_update_list">
</ul>

É onde as mensagens serão exibidas!

Interpretando XML com Jquery

Estudando jQuery para o desenvolvimento de novas ferramentas para o And After (a nova Vitrine Buscapé) resolvi publicar um artigo exemplificando como ler XML com jQuery.

Primeiro devo deixar claro que meu relacionamento com Javascript é bem tímido, o pouco que sei são aprendizados recentes mas o jQuery tem ajudado muito por facilitar bastantes as coisas. Sei que o Chris vai dizer que Prototype apresenta mais vantagens, mas testei rapidamente as duas bibliotecas sem saber quase nada de Javascript e a que teve mais efetividade no desenvolvimento foi jQuery, que optei por estudar.

"Instalando" o jQuery

O primeiro passo para utilizar a biblioteca é fazer com o que o usuário carregue ela, não baixe ela no seu servidor, o Google Ajax Libraries faz isso e traz duas vantagens principais:

  1. Economia de banda no seu servidor
  2. Maior chance de usar o cache do usuário, diminuindo o tempo e carregamento
  3.  
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
//1 - carrega bibliotecas prototype e scriptaculous 
google.load("jquery", "1.2.6");
</script>

 

Biblioteca colocada na página, podemos agora passar para o próximo passo.

 

XML

Aqui está a estrutura do XML que utilizei para o exemplo, utilizei este feed, que exibe os resultados da busca no Twitter pelo meu username (@gserrano), mas poderia ser resultados do Flickr, do Google, do feed do seu blog ou de um relatório de um aplicativo web.

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns:google="http://base.google.com/ns/1.0" xml:lang="en-US" xmlns:openSearch="http://a9.com/-/spec/opensearch/1.1/" xmlns="http://www.w3.org/2005/Atom" xmlns:twitter="http://api.twitter.com/">
  <id>tag:search.twitter.com,2005:search/gserrano</id>
  <link type="text/html" rel="alternate" href="http://search.twitter.com/search?q=gserrano"/>
  <link type="application/atom+xml" rel="self" href="http://search.twitter.com/search.atom?q=gserrano"/>
  <title>gserrano - Twitter Search</title>
  <link type="application/opensearchdescription+xml" rel="search" href="http://search.twitter.com/opensearch.xml"/>
  <link type="application/atom+xml" rel="refresh" href="http://search.twitter.com/search.atom?q=gserrano&amp;since_id=1011974184"/>
  <updated>2008-11-18T23:30:00Z</updated>
  <openSearch:itemsPerPage>15</openSearch:itemsPerPage>
  <link type="application/atom+xml" rel="next" href="http://search.twitter.com/search.atom?max_id=1011974184&amp;page=2&amp;q=gserrano"/>
  <entry>
    <id>tag:search.twitter.com,2005:1011974184</id>
    <published>2008-11-18T23:30:00Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011974184"/>
    <title>@chrisloki parab&#233;ns pra ti, #odesenvolvedor com um crescimento de 50% na visita&#231;&#227;o no &#250;tlimo m&#234;s! :D</title>
    <content type="html">&lt;a href="http://twitter.com/chrisloki"&gt;@chrisloki&lt;/a&gt; parab&#233;ns pra ti, &lt;a href="/search?q=%23odesenvolvedor"&gt;#odesenvolvedor&lt;/a&gt; com um crescimento de 50% na visita&#231;&#227;o no &#250;tlimo m&#234;s! :D</content>
    <updated>2008-11-18T23:30:00Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011974184.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011941353</id>
    <published>2008-11-18T23:06:02Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/chrisloki/statuses/1011941353"/>
    <title>@gserrano parab&#233;ns o/ uhu!</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; parab&#233;ns o/ uhu!</content>
    <updated>2008-11-18T23:06:02Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/61066338/ble_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011941353.atom"/>
    <author>
      <name>chrisloki (Chris Benseler)</name>
      <uri>http://twitter.com/chrisloki</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011934314</id>
    <published>2008-11-18T23:01:16Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011934314"/>
    <title>a natureza &#233; fascinante, animais disfar&#231;ados de folha. ah, sapecas! http://tinyurl.com/5q8c88</title>
    <content type="html">a natureza &#233; fascinante, animais disfar&#231;ados de folha. ah, sapecas! &lt;a href="http://tinyurl.com/5q8c88"&gt;http://tinyurl.com/5q8c88&lt;/a&gt;</content>
    <updated>2008-11-18T23:01:16Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011925155</id>
    <published>2008-11-18T22:54:46Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011925155"/>
    <title>um culto ao ego, #andafter teve um crescimento de 15% nas visitas no &#250;ltimo m&#234;s. (olhando as novidades do google analyctics).</title>
    <content type="html">um culto ao ego, &lt;a href="/search?q=%23andafter"&gt;#andafter&lt;/a&gt; teve um crescimento de 15% nas visitas no &#250;ltimo m&#234;s. (olhando as novidades do google analyctics).</content>
    <updated>2008-11-18T22:54:46Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011912798</id>
    <published>2008-11-18T22:46:14Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/bpinaud/statuses/1011912798"/>
    <title>@gserrano Voc&#234; foi um dos pioneiros a falar das buscas no iSofa.tv. Por isso te adicionei. Obrigado. Abra&#231;os.</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; Voc&#234; foi um dos pioneiros a falar das buscas no iSofa.tv. Por isso te adicionei. Obrigado. Abra&#231;os.</content>
    <updated>2008-11-18T22:46:14Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/52836833/BPeoLeao_normal.JPG"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011912798.atom"/>
    <author>
      <name>bpinaud (Bruno Pinaud)</name>
      <uri>http://twitter.com/bpinaud</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011871230</id>
    <published>2008-11-18T22:17:19Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/bpinaud/statuses/1011871230"/>
    <title>@gserrano Obrigado, cara, muito legal saber que voc&#234; est&#225; curtindo. Tem mais de 300 canais aguardando pra entrar no menu novo. Avise qqc.</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; Obrigado, cara, muito legal saber que voc&#234; est&#225; curtindo. Tem mais de 300 canais aguardando pra entrar no menu novo. Avise qqc.</content>
    <updated>2008-11-18T22:17:19Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/52836833/BPeoLeao_normal.JPG"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011871230.atom"/>
    <author>
      <name>bpinaud (Bruno Pinaud)</name>
      <uri>http://twitter.com/bpinaud</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011868941</id>
    <published>2008-11-18T22:15:50Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/oPadreVoador/statuses/1011868941"/>
    <title>@gserrano hahaha, tomara o/ que melhore ai e que eu descanse aqui ;D</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; hahaha, tomara o/ que melhore ai e que eu descanse aqui ;D</content>
    <updated>2008-11-18T22:15:50Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/60831933/opvlogovp0_normal.png"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011868941.atom"/>
    <author>
      <name>oPadreVoador (oPadreVoador)</name>
      <uri>http://twitter.com/oPadreVoador</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011861566</id>
    <published>2008-11-18T22:10:40Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011861566"/>
    <title>que acharam do photobucket do wall-e? eu adoro os backrounds do photobucket.</title>
    <content type="html">que acharam do photobucket do wall-e? eu adoro os backrounds do photobucket.</content>
    <updated>2008-11-18T22:10:40Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011857210</id>
    <published>2008-11-18T22:07:39Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011857210"/>
    <title>@oPadreVoador que assim seja! mas eu nem deveria descansar. &#233; que simplesmente n&#227;o rolou produ&#231;&#227;o, vamos ver se a noite melhora. :D</title>
    <content type="html">&lt;a href="http://twitter.com/oPadreVoador"&gt;@oPadreVoador&lt;/a&gt; que assim seja! mas eu nem deveria descansar. &#233; que simplesmente n&#227;o rolou produ&#231;&#227;o, vamos ver se a noite melhora. :D</content>
    <updated>2008-11-18T22:07:39Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011857210.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011847664</id>
    <published>2008-11-18T22:01:28Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011847664"/>
    <title>@bpinaud bem vindo! e parabens pelo isofa, &#243;tima alternativa para minhas madrugadas. :D</title>
    <content type="html">&lt;a href="http://twitter.com/bpinaud"&gt;@bpinaud&lt;/a&gt; bem vindo! e parabens pelo isofa, &#243;tima alternativa para minhas madrugadas. :D</content>
    <updated>2008-11-18T22:01:28Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011847664.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011843370</id>
    <published>2008-11-18T21:58:46Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011843370"/>
    <title>Acho mto ruim quando algu&#233;m tenta promover uma coisa pr&#243;pria sem dizer que tem liga&#231;&#227;o com aquilo. S&#243; passa desconfian&#231;a.</title>
    <content type="html">Acho mto ruim quando algu&#233;m tenta promover uma coisa pr&#243;pria sem dizer que tem liga&#231;&#227;o com aquilo. S&#243; passa desconfian&#231;a.</content>
    <updated>2008-11-18T21:58:46Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011820041</id>
    <published>2008-11-18T21:43:32Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/oPadreVoador/statuses/1011820041"/>
    <title>@gserrano hoje foi meu dia de correria, ser&#225; que amanh&#227; eu descanso? *-*</title>
    <content type="html">&lt;a href="http://twitter.com/gserrano"&gt;@&lt;b&gt;gserrano&lt;/b&gt;&lt;/a&gt; hoje foi meu dia de correria, ser&#225; que amanh&#227; eu descanso? *-*</content>
    <updated>2008-11-18T21:43:32Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/60831933/opvlogovp0_normal.png"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011820041.atom"/>
    <author>
      <name>oPadreVoador (oPadreVoador)</name>
      <uri>http://twitter.com/oPadreVoador</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011815993</id>
    <published>2008-11-18T21:40:49Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011815993"/>
    <title>Ontem o dia foi uma correria do capeta, a&#237; pra compensar hj eu n&#227;o fiz NADA.</title>
    <content type="html">Ontem o dia foi uma correria do capeta, a&#237; pra compensar hj eu n&#227;o fiz NADA.</content>
    <updated>2008-11-18T21:40:49Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011776936</id>
    <published>2008-11-18T21:15:30Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011776936"/>
    <title>que tal servir aperitivo num ralo pra banheiro? http://tinyurl.com/5obmlo</title>
    <content type="html">que tal servir aperitivo num ralo pra banheiro? &lt;a href="http://tinyurl.com/5obmlo"&gt;http://tinyurl.com/5obmlo&lt;/a&gt;</content>
    <updated>2008-11-18T21:15:30Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
  <entry>
    <id>tag:search.twitter.com,2005:1011521172</id>
    <published>2008-11-18T18:32:52Z</published>
    <link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011521172"/>
    <title>@chrisloki "eu sei que n&#227;o, mas vou fazer" &#233; o que diferencia homens de meninos. gogo! :D</title>
    <content type="html">&lt;a href="http://twitter.com/chrisloki"&gt;@chrisloki&lt;/a&gt; &amp;quot;eu sei que n&#227;o, mas vou fazer&amp;quot; &#233; o que diferencia homens de meninos. gogo! :D</content>
    <updated>2008-11-18T18:32:52Z</updated>
    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/62939563/gserrano2_normal.jpg"/>
    <link type="application/atom+xml" rel="thread" href="http://search.twitter.com/search/thread/1011521172.atom"/>
    <author>
      <name>gserrano (Guilherme Serrano)</name>
      <uri>http://twitter.com/gserrano</uri>
    </author>
  </entry>
</feed>
 

 

Interpretar XML com jQuery

 Aqui está o código que ao carregar a página identifica qual XML será lido, busca pelos dados "entry" no XML e gera um loop entre eles, exibindo a mensagem que está no XML.

 

<script type="text/javascript">
        $(function(){
        $("#tweets").fadeOut("fast");
            $.ajax({
                 type: "GET",
                 url: "search.xml",
                 dataType: "xml",
                 success: function(xml) {
                 
                    $(xml).find("entry").each(function(){
                         var link =  $(this).find("link").attr("href");
                         var texto = $(this).find("content").text();
                         $("<li></li>")
                             .html(texto + " <a href=´" + link + "´>Ver tweet</a>")
                             .appendTo("#tweets");
                     }); //close each(
                    $("#tweets").fadeIn("slow");
                }
             }); //close $.ajax(
        });
</script>

 

Neste caso utilizei a requesição utilizando a função ".ajax" do jQuery, em meus testes não consegui fazer retornar direto da busca, portanto seria necessário utilizar programação server-side como ASP ou PHP para gerar o XML para o Javascript. Não é a melhor solução se você precisa ler XML externo. Uma forma melhor de fazer isto é utilizar seu servidor como Proxy através do Isapi Rewrite (para quem utiliza IIS) e acredito que deve ser possível com htaccess. Se alguém tem alguma dica melhor, estou aqui mais para aprender do que para ensinar, comenta aí! 🙂

Talvez uma estudada em XML-RPC resolva este problema para ler o XML externo, se não me engano eu já fiz isso só com jQuery, mas acho que estava utilizando JSON e não XML como resposta.

A função .ajax carrega o arquivo search.xml (o xml que utilizei no exemplo) e chama a função para a leitura. Chamei um loop para cada "entry" encontrado no meu XML, portanto "entry" é cada linha que eu gostaria de ler (no caso, cada tweet retornado pela busca).

Busquei apenas duas variáveis, o link para o tweet original:

var link =  $(this).find("link").attr("href");

Que no XML está como o atributo href, na linha abaixo:

<link type="text/html" rel="alternate" href="http://twitter.com/gserrano/statuses/1011776936"/>

E recuperei também o texto do tweet, que são as duas únicas variáveis que utilizei para o exemplo. Dentro do loop eu criei elementos de lista <li></li>, onde adicionei as variáveis e no final utilizei o .appendTo para inserir cada elemento da lista dentro do elemento com ID tweets que deve estar no HTML.

 A função fade é opcional, utilizei apenas porque sou designer para suavizar a visualização no carregamento da lista.

HTML

Como explicado acima, depois de montar a lista o script procura o elemento com o id tweets, portanto a única coisa necessária no HTML do documento é uma lista <ul> ou <ol> com o id correto.

<ol id="tweets"></ol>

É isso, qualquer sugestão ou dúvida comente, como eu disse: estou muito mais apto a aprender do que a ensinar por aqui, mas espero ter ajudado. 🙂

Veja o exemplo funcionando.

Primeiros Jogos Olímpicos na web 2.0 e na China – paradoxo

E semana passada começaram os Jogos Olímpicos de Pequim. Ou melhor, os Jogos da Vigésima Nona Olimpíada.
A primeira Olimpíada nessa era pós-boom da web 2.0. Não é a primeira na época da Internet (acho que desde 1996 já tínhamos a web, e ela sendo usada como meio de disseminação das notícias relacionadas). Mas, certamente, essa é a primeira vez em que o conteúdo não é mais gerado – apenas – pela mídia especializada, pelo jornalismo convencional.
Estamos na era do jornalismo colaborativo, do microblogging, da distribuição de vídeos e fotos em real time através do uso de celulares de última geração, e tudo mais que a web 2.0 proporciona.

Por exemplo, você pode ver pela web a transimssão dos jogos pelo JustIn, ou acompanhar os posts que a tag #olympicgames pelo Twitter com as últimas informações, procurar no Youtube pelos últimos vídeos postados pelos usuários (com aquela imagem EMOcionante feita das arqubancadas) ou ainda ir no Google e fazer uma procura usando o nome do esporte junto com olimpíadas para ver os resultados mais atuais; por exemplo, para saber sobre futebol procure por "futebol olimpíadas". Ou ainda quem usa redes sociais (Facebook, Orkut, Netvibes, etc…) pode adicionar gadgets feitos exclusivamente para que você tenha as últimas notícias sobre os Jogos.

As possibilidades são inúmeras; conteúdo colaborativo está aí, é o futuro.
E chega atá a ser engraçado – talvez uma piada poética – que esses Jogos, os primeiros nessa nova era, estão ocorrendo num país onde a Internet sofre censura. Aliás, não só a Internet, como qualquer forma de manifestação popular: desde protestos até o simples ato de informar algo boca-a-boca. Mas, a vida é de paradoxos, e a partir da quebra deles é que grandes mudanças ocorrem 🙂

Aliás, esse post é, basicamente, motivado por não estarmos mais presos às transmissões da Globo com o Galvão ou da Band com o Luciano do Valle; podemos escolher de onde pegar as informações 🙂