Integración de Twitter

Twitter Search API

Luego de una reu de trabajo con el equipo de @VivaCityPE 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 -> @twitterapi

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 @ryanfaerman

Está basado en el desarrollo de David Billingham @slawcup que luego trabajó Aaron Brazell @TechnoSailor 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 @carhartl.

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 @willmayo

			<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
@AdagioPaCuerdas

3 pensamientos en “Integración de Twitter”

    1. Pablo:

      Aquí para apoyarte en lo posible. Te comento que ahora se hace también atractiva la integración del API de streaming de Twitter, eso quiere decir que Twitter envía un mensaje a tu aplicación para que se actualice en el momento del update.

      Saludos.

      Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s