Integración de Twitter

Luego de una reu de trabajo con el equipo de surgieron algunos puntos a realizar relacionados a Desarrollo Web:

– Mejoramiento de la Ficha de Registro: La del WordPress MU + BuddyPress y la funcionalidad de establecer la contraseña al momento del registro.
– Temas personalizados para blogs: Búsqueda de temas gráficos para WordPress de acuerdo al público objetivo del sitio web. Su correspondiente colocación y habilitación para los miembros del sitio web.
– Optimización de Comentarios: Funcionalidad de responder a un comentario en particular.
– Integración de Twitter: Algo como una página de Twitter Trending Topics.

Amamos Twitter y este artículo trata el cuarto punto de esa lista de tareas: la Integración de Twitter.

En nuestro caso, le estamos dando una personalidad al sitio web por lo que los Trending Topics se deben filtrar para ajustarse a esa proyección. Resulta, entonces, más adecuado que la gente de Social Media (Community Manager) y Contenidos (Editores) constituyan el puente para los Trending Topics que consumirá la aplicación.

Trending Topic es el tema, tiene un contexto en tiempo y espacio. En la web nos interesa principalmente los temas que tratan los twiteros peruanos.

Una vez identificado el tema debemos descubrir la fórmula que nos proporcione los twits que deseamos. Twitter Search es la herramienta básica para esta tarea.

Y blah.. blah… blah… nos podemos enredar un montón.
K.I.S.S. = Keep It Simple, Stupid!

Si los temas ya los seleccionan entonces sólo requiero la fórmula de búsqueda básica: Una palabra clave (keyword), tal vez, con algún operador (‘AND’,’OR’) para el caso de dos o más keywords.

Y listo! Ahora la automatización. Que nuestra aplicación utilize el Twitter Search. Para ello emplea una interfaz para aplicaciones (API) en este caso es el API de Twitter Search. Observación: el API de Twitter es otro, es el que permite realizar updates, replies, follow, etc. Aquí la gente a cargo del API ->

Twitter tiene una Wiki acerca de su API, allí podemos encontrar la documentación acerca del API y Bibliotecas (Librería? Ese no es el lugar donde comprar los libros?)para reutilizar en nuestros desarrollos o emplear directamente.

Utilicé el PHP Twitter Search API de Ryan Faerman

Está basado en el desarrollo de David Billingham que luego trabajó Aaron Brazell para crear el PHP Twitter.

El ‘framework’ que he creado invoca al TwitterSearch y construye una estructura de etiquetas (texto a mostrar) y fórmulas de búsqueda (queries).

<?php

	require 'TwitterSearch.php';

	$terms = array (
		'vivacitype' => array(
			'label' => 'Dicen de VivaCity.PE',
			'query' => 'vivacitype OR vivacity.pe'
		),
		'sismo' => array(
			'label' => 'Sismo',
			'query' => 'sismo OR temblor'
		),
		'chilcano' => array(
			'label' => 'Semana del Chilcano',
			'query' => 'chilcano'
		),
	);

?>

Para darle mayor orden trabajo con tabs gracias al Tabs – jQuery plugin for accessible, unobtrusive tabs. Gracias a Klaus Hartl .

Se construyen los espacios para cada consulta y sus resultados. Los tabs se forman con cada elemento de lista y su espacio correspondiente.

		<div id="container">

			<ul>
				<?php
					foreach ($terms as $key => $term) {
						echo'<li><a href="#section-'.$key.'"><span>'.$term['label'].'</span></a></li>';
					}
				?>
			</ul>

				<?php
					foreach ($terms as $key => $term) {
						echo '<div id="section-'.$key.'">';
						echo $term['label'];
						echo '<br /><br />';

						$search = new TwitterSearch($term['query']);
						$search->user_agent = 'VivaCity.PE-TwitterSearch:franco.cedillo@gmail.com';
						$results = $search->results();

						foreach($results as $result){
								echo '<div class="twitter_status">';
								echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
								$text_n=toLink($result->text);
								echo $text_n;
								echo '<div class="twitter_small">';
								echo '<strong>De:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
								echo '<strong>at:</strong> '.$result->created_at;
								echo '</div>';
								echo '</div>';
						}

						echo '</div>';
					}
				?>

		</div>

Se ha resaltado la línea de código que hace el trabajo sobre la el elemento de id=container.

		<script src="jquery.tabs/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
		<script src="jquery.tabs/jquery.history_remote.pack.js" type="text/javascript"></script>
		<script src="jquery.tabs/jquery.tabs.pack.js" type="text/javascript"></script>

		<link rel="stylesheet" href="jquery.tabs/jquery.tabs.css" type="text/css" media="print, projection, screen">
		<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
		<!--[if lte IE 7]>
		<link rel="stylesheet" href="jquery.tabs-ie.css" type="text/css" media="projection, screen">
		<![endif]-->

		<script type="text/javascript">
			$(function(){
			  $('#container').tabs();
			});
		</script>

Como cereza en el poste tenemos el último twit mostrado de una manera agradable. Gracias a

CSS Speech Bubbles de Will Mayo

			<div id="VivaCityPE-last-twit">

				<?php

					$search = new TwitterSearch('from:VivaCityPE');
					$search->user_agent = 'VivaCity.PE-TwitterSearch:franco.cedillo@gmail.com';
					$results = $search->results();
					$result = $results[0];
					$text_n = toLink($result->text);

				?>

				<div class="bubble">
					<div class="rounded">
						<blockquote>
							<p><?php echo $text_n; ?></p>
						</blockquote>
					</div>
					<cite class="rounded">
						<strong>Twit m&aacute;s reciente</strong>
					</cite>
				</div>

			</div>

Twitter en VivaCity.PE

Nos vemos Twiterers!!!
Franco Cedillo