<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule">

<channel>
	<title>Mahadeva &#187; twitter api</title>
	<atom:link href="http://www.patriciomolina.com/tag/twitter-api/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.patriciomolina.com</link>
	<description>Blog de Patricio Molina</description>
	<lastBuildDate>Mon, 06 Feb 2012 04:26:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<creativeCommons:license>http://creativecommons.org/licenses/by-sa/2.5/ar/</creativeCommons:license>		<item>
		<title>Mostrando búsquedas de Twitter en una página web con jQuery</title>
		<link>http://www.patriciomolina.com/2009/09/mostrando-busquedas-de-twitter-en-una-pagina-web-con-jquery/</link>
		<comments>http://www.patriciomolina.com/2009/09/mostrando-busquedas-de-twitter-en-una-pagina-web-con-jquery/#comments</comments>
		<pubDate>Fri, 25 Sep 2009 05:53:43 +0000</pubDate>
		<dc:creator>Pato</dc:creator>
				<category><![CDATA[Programación]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[twitter api]]></category>
		<category><![CDATA[twitter search]]></category>

		<guid isPermaLink="false">http://www.patriciomolina.com/?p=107</guid>
		<description><![CDATA[El programa consta de dos partes: el contenedor de resultados y el script. Contenedor de resultados Se trata del elemento HTML donde se mostrarán los resultados de una búsqueda. Los términos de búsqueda se establecen en el atributo title. Por &#8230; <a href="http://www.patriciomolina.com/2009/09/mostrando-busquedas-de-twitter-en-una-pagina-web-con-jquery/">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>El programa consta de dos partes: el contenedor de resultados y el <em>script</em>.</p>
<p><strong>Contenedor de resultados</strong></p>
<p>Se trata del elemento HTML donde se mostrarán los resultados de una búsqueda. Los términos de búsqueda se establecen en el atributo <tt>title</tt>.</p>
<p>Por ejemplo, si quisiéramos mostrar los resultados del <em>tag</em> <a href="http://search.twitter.com/search?q=%23obama">#obama</a>:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;twitter_search&quot; title=&quot;#obama&quot;&gt;&lt;/div&gt;</pre></td></tr></table></div>

<p>Podés crear todos los contenedores que quieras en la misma página, en el lugar que desees:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;twitter_search&quot; title=&quot;#python&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;twitter_search&quot; title=&quot;#jquery&quot;&gt;&lt;/div&gt;</pre></td></tr></table></div>

<p><strong>El <em>script</em></strong></p>
<p>Son las instrucciones <a href="http://es.wikipedia.org/wiki/JavaScript">JavaScript</a> del programa que se encargará de todo el trabajo: obtendrá los términos de búsqueda, solicitará los resultados a través de la <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">API de Twitter</a> y mostrará los resultados en el navegador.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// Number of tweets to show for each column</span>
<span style="color: #003366; font-weight: bold;">var</span> MAX_RESULTS <span style="color: #339933;">=</span> <span style="color: #CC0000;">20</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">function</span> twitter_search<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> url <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://search.twitter.com/search.json?callback=?'</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">// Iterating over the different search columns</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.twitter_search'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> container <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">// Search terms are specified in the 'title' attribute</span>
		<span style="color: #003366; font-weight: bold;">var</span> search <span style="color: #339933;">=</span> container.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'title'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>search<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">// Showing column title</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>container.<span style="color: #660066;">siblings</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'h1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				container.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prepend</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;h1&gt;'</span> <span style="color: #339933;">+</span> search <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/h1&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #003366; font-weight: bold;">var</span> since_id <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>container.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">// Retrieve results since this id</span>
				since_id <span style="color: #339933;">=</span> container.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">':first'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #006600; font-style: italic;">// Request the results</span>
			$.<span style="color: #660066;">getJSON</span><span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'q'</span><span style="color: #339933;">:</span> search<span style="color: #339933;">,</span> <span style="color: #3366CC;">'since_id'</span><span style="color: #339933;">:</span> since_id<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">// Processing those results, if any</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>data.<span style="color: #660066;">results</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i <span style="color: #000066; font-weight: bold;">in</span> data.<span style="color: #660066;">results</span>.<span style="color: #660066;">reverse</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						<span style="color: #003366; font-weight: bold;">var</span> r <span style="color: #339933;">=</span> data.<span style="color: #660066;">results</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// Creating the result container</span>
						<span style="color: #003366; font-weight: bold;">var</span> div <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div id=&quot;#'</span> <span style="color: #339933;">+</span> r.<span style="color: #660066;">id</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot;&gt;&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// Don't show this element now</span>
						div.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// Adding some styles through .twitter_result</span>
						div.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'twitter_result'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// Adding user's image</span>
						div.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;img src=&quot;'</span> <span style="color: #339933;">+</span> r.<span style="color: #660066;">profile_image_url</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; alt=&quot;'</span> <span style="color: #339933;">+</span> r.<span style="color: #660066;">from_user</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; /&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// Adding username</span>
						div.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;a href=&quot;http://twitter.com/'</span> <span style="color: #339933;">+</span> r.<span style="color: #660066;">from_user</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot;&gt;'</span> <span style="color: #339933;">+</span> r.<span style="color: #660066;">from_user</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/a&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// Adding tweet</span>
						div.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;span&gt;'</span> <span style="color: #339933;">+</span> r.<span style="color: #660066;">text</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/span&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// Adding corners</span>
						div.<span style="color: #660066;">corner</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// Adding this result to the main container</span>
						container.<span style="color: #660066;">prepend</span><span style="color: #009900;">&#40;</span>div<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #006600; font-style: italic;">// Effect</span>
						div.<span style="color: #660066;">slideDown</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'slow'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
				<span style="color: #009900;">&#125;</span>
				<span style="color: #006600; font-style: italic;">// Removing old tweets</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>container.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> MAX_RESULTS<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #006600; font-style: italic;">// Negative index</span>
					to_remove <span style="color: #339933;">=</span> MAX_RESULTS <span style="color: #339933;">-</span> container.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span>
					container.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span>to_remove<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideUp</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// Initial search </span>
	twitter_search<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">// Refresh the results every 5 seconds</span>
	setInterval<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;twitter_search();&quot;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">5000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Acá pueden ver una demostración funcional del <em>script</em>: <strong><a href="http://www.patriciomolina.com/samples/twitter_search/">Twitter Search + jQuery</a></strong> (actualizado marzo de 2010).</p>
<p><strong>Aclaraciones de la demo</strong>:</p>
<ul>
<li>Casi no hay consumo de <em>bandwidth</em> de nuestro servidor, porque estoy usando <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">jQuery 1.3.2 desde Google</a> y es el navegador del usuario quien se encarga de hacer el <em>request</em> de búsqueda a la API de Twitter</li>
<li>En la demo los resultados se actualizan automáticamente cada 5 segundos (<tt>setInterval("twitter_search();", 5000)</tt>)</li>
<li>Sigo una estructura <a href="http://es.wikipedia.org/wiki/FIFO">FIFO</a> (gracias al parámetro <tt>since_id</tt> de la API). Esto significa que iré agregando nuevos resultados en la cabecera mientras remuevo los más antiguos</li>
<li>La demo es <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.patriciomolina.com%2Fsamples%2Ftwitter_search%2F;accept=text%2Fhtml%2Capplication%2Fxhtml%2Bxml%2Capplication%2Fxml%3Bq%3D0.9%2C*%2F*%3Bq%3D0.8;accept-language=en-us%2Cen%3Bq%3D0.5;accept-charset=ISO-8859-1%2Cutf-8%3Bq%3D0.7%2C*%3Bq%3D0.7">XHTML 1.0 Transitional</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.patriciomolina.com/2009/09/mostrando-busquedas-de-twitter-en-una-pagina-web-con-jquery/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

