Utilizando el API de Twitter con JavaScript

   Una de las cosas que tiene el twitter es su documentación con respecto al código que debemos usar, pues sus métodos están bien documentados pero no sus códigos. Muchos dicen que no se puede utilizar el API 1.1 del Twitter desde Javascript, esto es cierto al mismo tiempo que es falso. Hace algún timepo publicaba en el blog como Jugar con el API en PHP, de allí partimos...

   Para utilizar JS con el API debemos crear una respuesta, bien sea en json, html/txt, archivo separado por comas, array, como queramos, en este ejemplo lo explicare con JSON. En la entrada explico como obtener los Tweets, así que no entrare en detalles con respecto a eso, lo que debemos hacer es lo siguiente:

 - Crear un método del lado del servidor (PHP) que nos retorne los tweets utilizando el API.
 - Cargar del lado del cliente (JS) esos datos y mostrarlos.

   Básicamente (y por decirlo así) utilizaremos PHP como un proxy para nuestra conexión al Twitter, ahora vamos a ello, partiendo de lo explicado en la entrada anterior utilizaremos ese mismo script y lo modificaremos un poco:

require_once('twitteroauth.php');
 
$consumerKey    = 'MI_CONSUMER_KEY';
$consumerSecret = 'MI_CONSUMER_KEY_SECRET';
$oAuthToken     = 'MI_CONSUMER_TOKEN';
$oAuthSecret    = 'MI_CONSUMER_TOKEN_SECRET';
 
$conexion = new TwitterOAuth($consumerKey, $consumerSecret, $oAuthToken, $oAuthSecret);

$tweets = $conexion->get("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=NOMBRE_DE_USUARIO&count=5");
 
// Creamos el JSON
echo json_encode($tweets);

   Ahora solo nos resta cargarlo desde el html, mostrando los tweets en un contenedor (DIV), utilizando JQuery:

<script>
$.ajax({
    url: 'twitter-api.php',
    type: 'GET',
    success: function(response) {
   var tweets = $.parseJSON(response);
   var tweetsHTML = [];
   for (var i=0; i<tweets.length; i++){
  var username = tweets[i].user.screen_name;
  var tweet = tweets[i].text;
  tweetsHTML.push('<span><b>'+status+'</b>: '+tweet+'</span>');
   }
   document.getElementById('tweets').innerHTML = tweetsHTML.join('<br/>');
 },
});
</script>
<div id="tweets"></div>

   Y el ejemplo lo podemos ver funcionando en la página principal del blog, justo debajo del slider.

   NOTA: El script debemos colgarlo en cualquier servidor que maneje PHP.

Recibe notificaciones por correo