Como crear una aplicación de Twitter con PHP

Categorías: JQuery, Tutoriales, Twitter - Tags: , ,

Hace 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&oacute;n de Twitter con PHP. M&aacute;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

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:
TwitterFacebookLinkedIn

  • Pingback: Bitacoras.com

  • http://www.sedajuliaca.com dozarli

    hola amigo disculpa segui todo tu explicacion y no me resulta hasta ahora esta es la web http://www.sedajuliaca.com/frank se logea y todo pero se activan las ventanas para poder escribir mensajes por favor ayudeme

  • Liliana

    Hola, por alguna razon no me esta autenticando en el archivo redirect.php cuando realiza la validacion
    switch ($connection->http_code) {
    case 200:

    el http_code me esta retornando un cero, tendre algun error en la configuracion de la aplicacion en twitter o que puede estar pasando ??

  • http://www.donaorgamos.com Zarith

    Me guataria que me apoyen con lo siguiente :)

    Yo tengo uan Radio Online y necesito qeu se actualize mi twitter cada vez que cambia la cancion , para ello antes lo hacia con un BAT de DOS desde la Pc de transmision pero con los cambios que ha tenido twitter quedo obsoleto…

    El tema es el siguiente dele el localhost se envie aun TXT al server
    me gustaria que cuando alguien se logue desde la pagian usando este codigo envie la informacion del archivo TXT y que se envie cada vez que cambia la cancion podria ya que el archivo se actualiza cada vez que la cancion cambia y se muestra con AJAX en la page.

    si se obviara el dodigo del formulario y se varia por leer un TXT y ques e envies eria genial

    haber quien me hecha un cabel con ello :)

  • http://www.webrecurso.com Carlos Luna

    Es muy interesante tu tutorial, he estado investigando sobre aplicaciones para Twitter y llegue a tu web, está muy entendible :) de pura casualidad no tienes algún tutorial o algo parecido como esto pero para que al recibir un SMS este sea publicado en Twitter, ya que he estado buscando y no encuentro nada bueno, algo parecido como Twitea.me :) saludos y estaré probando tu aplicación para ver como funciona :)

  • FABIO MASSARO

    NO PODRIAS SUBIR UN VIDEO CON TODO ESTO PARA VERTE PASO A PASO

  • dikson

    Saludos, quisiera saber ¿si existe una forma de entrar a twitter sin que me pida usuario y contraseña?

  • carlos

    Trato de correrlo en un servidor local pero no puedo…….

    • http://twitter.com/netovs @netovs

      En un servidor local no va a funcionar a menos que tengas instalada la librería cURL de PHP.

  • http://aolinex.com aolinex

    Este post estuvo tan bueno que me tome la molestia de hacer clic en toda la publicidad de tu sitio. Gracias, Damian.

  • miguel

    Hola, por alguna razon no me esta autenticando en el archivo redirect.php cuando realiza la validacion
    switch ($connection->http_code) {
    case 200:

    el http_code me esta retornando un cero, tendre algun error en la configuracion de la aplicacion en twitter o que puede estar pasando ??

    • http://twitter.com/gasparbelandria @gasparbelandria

      hola, me sucede lo mismo, ya lo resolviste?

  • http://twitter.com/gasparbelandria @gasparbelandria

    hola chif,

    bueno ya resolvi el problema del http_code=200,

    pero ahora me sucede lo siguiente: el autentica crea las variables de sesion pero cuando se esta ejecutando el callback, este me dirige al index.php aunque ya este autenticado, tengo que darle click nuevamente al boton de twitter para que vaya a redirect y reconozca la autenticacion,

    es decir, el archivo callback no me esta reconociendo la autenticacion, tengo que cargar manualmente redirect, sabes a que se puede dar este caso?

    saludos.

  • http://www.comunicacionweb.com.mx Nestor Velazquez

    Hola, estoy utilizando tu app y m ffuincina de mil maravillas simplemente, necesito saber como hacer que el usuario que usa esta app inmediatamente siga a otro usuario.

  • http://twitter.com/Valente17mx @Valente17mx

    Gracias!!! #asiomasfacil entendible y facil de aplicar

  • http://www.canalescape.cl TecnoFury

    estoy tratando de poner para que se pueda mandar directo pero no puedo :| no me toma una funcion para hacerlo :|

    • http://www.canalescape.cl TecnoFury

      Ya lo logre xD! jejeje lo que te quería preguntar si hay alguna forma de mostrar la hora en que te mandaron una mención y la hora en el TimeLine, para saber a que hora pasaron las cosas :s o hace cuanto tiempo atrás :|

  • Pau

    Vuelve al Index.php pero con la página en blanco, qué es?

  • lalala

    m pasas justo igual

  • fernando

    Hola, yo utilicé el método post status… usando twitteroauth.php y OAuth.php. Ya tengo la app y funciona todo, pero tengo una duda… ¿Cómo hago la app pública?

    • http://blog.timersys.com Damian

      No entiendo a que te refieres. Cuelgala en tu server y comparte el link para que la use otra gente :D

  • Yuzzel

    Hola que tal, puedes hacer la app de facebook tambien? tanto el muro como el chat?

    • masquewordpress

      sería cuestión de probar. La verdad nunca jugue con la api de facebook. Lamentablemente no tengo tiempo ahora mismo

  • Mario_vasquezs

    Buenas Noches .

    Todo se ve muy bien , pero :
     /masquew/redirect.php was not found on this server.

    Que va en este archivo ?
    y en callback .php 
    De antemano , gracias .

  • Mao_0627

    cuando lo ejecuto me sale Could not connect to Twitter. Refresh the page or try again later

  • http://emiliotudela.betaid.org/ Emilio Tudela

    Excelente! Muchas gracias: he creado http://tuitealo.mediaweblabs.com ahora sólo falta el diseño :)

  • Nessroman

    Primero que nada estoy leyendo tu artículo que es muy interesante, ya que quiero hacer una aplicación donde los usuarios eligen una cosa y le dan tuitear. 

    El problema es que ya tengo la interfaz en JQuery, seleccionas el item, abre un DIALOG(JQuery) con el tuit, y le doy tuitear pero siempre manda los tuits a mi timeline aunque no esté logueado!! … 
    Se supone que la aplicación cuando le doy tuitear debería preguntar el LOGIN del usuario y redireccionarlo si no está logueado.

    Pero no lo hace !! Lo probé con mi cuenta de twitter y ni si quiera he iniciado sesión, corro el PHP que envía el tuit y lo publica en mi timeline ! Sin preguntarme credenciales ni nada !!

    Que debe estar mal ?? Agradecería su ayuda al respecto. Saludos.