Como crear una aplicación de Twitter con PHP
Categorías: JQuery, Tutoriales, Twitter - Tags: PHP, tutorial jquery, twitterHace unos días les hable de como integrar Twitter anywhere en 5 minutos y luego les mostré un poco acerca de la nueva api javascript de @anywhere, incluso hace tiempo les explique como actualizar twitter a través de PHP + Oauth.
En este último articulo utilizaba una librería de PHP llamada twitteroauth.php que hoy voy a explicar un poco más , y les va a permitir junto con un poquito de JQuery crear una aplicación completa de twitter en PHP siempre que lo requieran.
1. Estructura HTML de la aplicación
Nuestra aplicación consta de un boton para hacer login a Twitter que solo aparece la primera vez que ingresamos.
Una vez echo login nos mostrará un formulario de texto donde escribiremos los tweets junto a un boton para enviar, tres pestañas en JQuery para cambiar del Timeline a los @Mentions y a los Mensajes directos.
Y por último el timeline.
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 | <div id="twitter-feed"> <span id="letras"></span> <form name="tweet_post" method="post" style="width: 400px; margin: 0pt auto;clear:right;"> <textarea rows="4" cols="49" name="tweet_txt" id="tweet_txt" onKeyUp="contar(this);"></textarea> <input type="hidden" name="reply_id" id="t_reply"/> <button id="tweet_submit" class="tweet_button">Submit</button> </form> <ul class="t_tab"> <li class="t_selected" id="#t_timeline">Timeline</li> <li id="#t_mentions">@Mentions</li> <li id="#t_messages">Messages</li> </ul> <div id="t_timeline" class="tab_content"> <ul> <li> <div class="foto"> <img src="" alt="" width="" /> </div> <a href="" title="">Nombre de usuario Twitter</a> <br/>Texto del tweet<br/> <div style="text-align:right"> <a href="#" onClick="javascript:">Reply</a> </div> </li> </ul> </div> <div style="clear: both;"></div> </div> |
Una vez realizada la estructura de nuestra aplicación vamos a llenarla con PHP y todos los valores necesarios
2. Estructura de archivos – Como funciona la aplicación
La aplicación funciona de la siguiente manera :
El usuario ingresa a index.php y hace click en conectar que lo lleva a redirect.php (aunque no se percata de ello) que es donde se obtiene las credenciales temporales, de aquí va a la página de Twitter donde se loguea con sus datos.
Una vez logueado es redirigido a callback.php( no se percata de ello) donde se verifica que las credenciales sean correctas y se envia de vuelta a la página principal.
En caso de que algo falle tanto en redirect.php o callback.php el usuario es enviado a clearsessions.php( no se percata de ello) que es donde se borran todas las sesiones y se envia el usuario a la página principal para que empieze el proceso nuevamente.
Como pueden ver para ojos del usuario será tan simple como boton de loguin , ingresar datos de su cuenta en twitter.com y vuelta a la aplicación ya funcionando.
Veamos todos los archivos involucrados
- index.php: Será la página principal donde enlazaremos nuestra hoja de estilos css, Jquery y donde se verá la estructura principal.
- twitter_init.php : Aca vamos a inicializar la librería de twitter y almacenar todo en la variable $twitter_content.
- callback.php: Archivo que recibe al usuario desde twitter
- redirect.php: Archivo que enviar al usuario a twitter
- clearsessions.php: Archivo que borra las sesiones en caso de error
- twitteroauth/config.php: Archivo de configuración con los datos de nuestro programa
- twitteroauth/twitteroauth.php: Librería twitteroauth
- twitteroauth/OAuth.php: Librería OAuth
3. La aplicación y los tres archivos importantes
Para nosotros los únicos archivos importante seran index.php , twitter_init.php y config.php. Los demás voy a obviarlos para no complicarlos, simplemente porque son archivos que no van a cambiar nunca, igualmente esta comentados paso por paso en el código.
index.php
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 | <? session_start();?> <!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=utf-8" /> <title>Como Crear una aplicación de Twitter con PHP + OAuth</title> <link href="estilo.css" rel="stylesheet" type="text/css" media="screen"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.t_tab li").click(function() //cada vez que se hace click en un li { $("ul.t_tab li").removeClass("t_selected"); //removemos clase active de todos $(this).addClass("t_selected"); //añadimos a la actual la clase active $(".tab_content").hide(); //escondemos todo el contenido var content = $(this).attr("id"); //obtenemos el atributo id $(content).fadeIn(); // mostramos el contenido return false; //devolvemos false para el evento click }); }); function replyTo(id,name){ $('#t_reply').val(id); $('#tweet_txt').val("@"+name+" ").focus(); return false; } function contar(input) { //Comprobamos que no pase de 140 caracteres y si pasa, que borre los sobrantes if (input.value.length >= 140) { input.value = input.value.substring(0,140); } //alamacenamos el resto var resto = 140 - input.value.length; //imprimimos los caracteres restantes en el span $('#letras').html(resto); } </script> <? include_once('twitter_init.php'); ?> </head> <body> <div id="header"> <h3>Como crear una aplicación de Twitter con PHP. Más tutoriales en <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3> </div> <div id="twitter-feed"> <? echo $twitter_content;?> <div style="clear: both;"></div> </div> </body> </html> |
Como pueden ver es muy sencillo, igualmente vamos a explicar un poco que es lo que vemos:
- Primero iniciamos con session_start() , esto lo usaremos para almacenar los tokens de Twitter en vez de usar los mismos siempre como hacíamos en mi tutorial de Actualizar twitter con PHP + Oauth, ya que ahora no serán nuestros tokens, sino que serán los de los diferentes usuarios que quieran usar nuestro programa
- Enlazamos nuestra hoja de estilo CSS
- Enlazamos a la última versión de JQuery
- Creamos la función JQuery para las pestañas
- Función que se encarga de escoger el atributo id en caso de que respondamos algún tweet y añade su @nombre al formulario
- Función que cuenta los caracteres restantes de nuestro tweet
- Incluimos twitter_init.php
- Y por último imprimos el resultado con
twitter_init.php
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <? require_once('twitteroauth/twitteroauth.php'); require_once('twitteroauth/config.php'); if (empty($_SESSION['access_token']) || empty($_SESSION['access_token']['oauth_token']) || empty($_SESSION['access_token']['oauth_token_secret'])) { $twitter_content='<div class="tweet_login"><a href="redirect.php"><img src="twitteroauth/images/lighter.png" alt="Sign in with Twitter"/></a></div>'; }else{ /* Recuperar los datos de la session. */ $access_token = $_SESSION['access_token']; /* Creamos el objeto twitterOauth. */ $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token['oauth_token'], $access_token['oauth_token_secret']); /* Verificamos credenciales. */ $content = $connection->get('account/verify_credentials'); /* Formulario */ $twitter_content='<span id="letras"></span> <form name="tweet_post" method="post" style="width: 400px; margin: 0pt auto;clear:right;"> <textarea rows="4" cols="49" name="tweet_txt" id="tweet_txt" onKeyUp="contar(this);"></textarea> <input type="hidden" name="reply_id" id="t_reply"/> <button id="tweet_submit" class="tweet_button">Submit</button> </form> '; /* Si hay un mensaje nuevo lo publicamos */ if($_POST['tweet_txt']){ /* En caso de ser respuesta, publicarlo como tal */ if($_POST['reply_id']!=''){ $connection->post('statuses/update', array('status' => $_POST['tweet_txt'],'in_reply_to_status_id' => $_POST['reply_id'] )); }else{ $connection->post('statuses/update', array('status' => $_POST['tweet_txt'])); } } /*Función que añade los links */ function twitify($string){ $t= preg_replace('/(http|https)(:\/\/)([^ ]+)/i', '<a href="$1$2$3">$1$2$3</a>', $string); $t= preg_replace('/@([^ :]+)/i', '<a href="http://twitter.com/$1">@$1</a>', $t); $t= preg_replace('/#([^ :]+)/i', '<a href="http://search.twitter.com/search?q=%23$1">#$1</a>', $t); return $t; } /* Pestañas */ $twitter_content.='<ul class="t_tab"> <li class="t_selected" id="#t_timeline">Timeline</li> <li id="#t_mentions">@Mentions</li> <li id="#t_messages">Messages</li> </ul>'; /* Obtenemos el timeline */ $t = $connection->get('statuses/home_timeline', array('count' => 40)); $twitter_content.='<div id="t_timeline" class="tab_content"><ul>'; foreach($t as $k=>$val){ $twitter_content.='<li> <div class="foto"> <img src="'.$val->user->profile_image_url.'" alt="'.$val->user->name.'" width="48px" /> </div> <a href="http://twitter.com/'.$val->user->screen_name.'" title="'.$val->user->name.'">'.$val->user->name.'</a> <br/>'.twitify($val->text).'<br/> <div style="text-align:right"> <a href="#" onClick="javascript: replyTo(\''.$val->id.'\',\''.$val->user->screen_name.'\');">Reply</a> </div> </li>'; } $twitter_content.='</ul></div>'; /* Obtenemos las menciones */ $t = $connection->get('statuses/mentions', array('count' => 20)); $twitter_content.='<div id="t_mentions" class="tab_content" style="display:none;"><ul>'; foreach($t as $k=>$val){ $twitter_content.='<li> <div class="foto"> <img src="'.$val->user->profile_image_url.'" alt="'.$val->user->name.'" width="48px" /> </div> <a href="http://twitter.com/'.$val->user->screen_name.'" title="'.$val->user->name.'">'.$val->user->name.'</a> <br/>'.twitify($val->text).'<br/> <div style="text-align:right"> <a href="#" onClick="javascript: replyTo(\''.$val->id.'\',\''.$val->user->screen_name.'\');">Reply</a> </div> </li>'; } $twitter_content.='</ul></div>'; /* Mensajes directos */ $t = $connection->get('direct_messages', array('count' => 20)); $twitter_content.='<div id="t_messages" class="tab_content" style="display:none;"><ul>'; foreach($t as $k=>$val){ $twitter_content.='<li> <div class="foto"> <img src="'.$val->sender->profile_image_url.'" alt="'.$val->sender->name.'" width="48px" /> </div> <a href="http://twitter.com/'.$val->sender->screen_name.'" title="'.$val->sender->name.'">'.$val->sender->name.'</a> <br/>'.twitify($val->text).'<br/> <div style="text-align:right"> <a href="#" onClick="javascript: replyTo(\''.$val->id.'\',\''.$val->sender->screen_name.'\');">Reply</a> </div> </li>'; } $twitter_content.='</ul></div>'; } ?> |
Expliquemos un poco que es lo que vemos:
- Incluyo las dos librerías necesarias para que todo funcione
- Compruebo si esta el usuario loguedo y muestro boton en caso negativo ( siempre almaceno todo en $twitter_content)
- En caso de estar logueado recupero los datos de la sesion.
- Creo el objeto twitterOauth
- Verifico las credenciales
- Creo el formulario
- Compruebo si se ha enviado un mensaje y si es en respuesta de algún otro. En caso afirmativo lo posteo en twitter
- La siguiente función es muy interesante ya que se encarga de añadir los links a los @usuarios ,#tags y url ya que cuando recuperamos un timeline de twitter este lo envía en texto plano ( sin código HTML como <a href>)
- Añado las pestañas para moverme por los diferentes timelines
- Y por último obtengo los tres timeline ( Timeline, menciones y mensajes directos)
config.php
1 2 3 | define('CONSUMER_KEY', 'Tu consumer key'); define('CONSUMER_SECRET', ' Tu consumer secret'); define('OAUTH_CALLBACK', 'Tu dirección donde tienes el archivo callback.php'); |
Como ven este archivo no tiene complicación alguna y se trata simplemente de configurar unos valores predeterminados. Para obtener el CONSUMER_KEY pueden leer mi tutorial de Twitter + PHP + OAuth
Y con todo lo visto anteriormente más un poco de CSS podemos crear una aplicación para Twitter echa en PHP
Les recomiendo ampliamente echar un vistazo a todos los archivos para entender mejor su funcionamiento. Un saludo y espero que les haya gustado.
Acerca del autor
by Damián Logghe
Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. Wordpress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.
Más Posts de Damián Logghe - Web
Sigueme:
Pingback: Bitacoras.com