logo

Un teletipo jQuery de Twitter (actualizado)

Introducción

En este tutorial, vamos a crear un ticker de Twitter jQuery, CSS y PHP que utiliza la API de búsqueda de Twitter. Mostrará los últimos tweets tuyos o de tus amigos. Para poder usar la nueva API v1.1 de Twitter, tendremos que usar un script de proxy PHP, que se comunicará con la API de forma segura por nosotros.

Originalmente, este tutorial se publicó en 2009 y usaba la API de búsqueda de Twitter, que solo funcionaba con JavaScript y no requería autenticación. Esto facilitó mucho las cosas, pero a partir del 11 de junio de 2013, Twitter descontinuó esta API. A continuación se muestra una versión actualizada del tutorial que utiliza un script PHP que se comunica con la nueva API v1.1 basada en OAuth. Para que funcione, deberá crear una aplicación de Twitter desde el sitio de desarrollo de Twitter.

Paso 0 - Crear una aplicación de Twitter

Todas las solicitudes a la API de Twitter deben firmarse con claves de API. La única forma de obtenerlos es creando una aplicación desde el sitio de desarrolladores de Twitter. Sigue estos pasos:

  1. Vaya a https://dev.twitter.com e inicie sesión con su nombre de usuario y contraseña de Twitter;
  2. Haga clic en el botón "Crear nueva aplicación" en la parte superior derecha;
  3. Complete los campos obligatorios y haga clic en "Crear". Después de crear la aplicación, tendrá acceso de solo lectura, lo cual está perfectamente bien en nuestro caso;
  4. En la página de la aplicación, haga clic en "Crear mi token de acceso". Esto permitirá que la aplicación lea datos de su cuenta como si fuera usted (solo lectura). Esto es requerido por algunos de los puntos finales de la API.

Esto le dará tokens de acceso, secretos de clientes y otras claves, que debe ingresar en proxy.php en el último paso del tutorial, para que funcione la demostración.

Paso 1 - XHTML

La parte XHTML es bastante sencilla.

demostración.html

<div id="twitter-ticker">
<!-- Twitter container, hidden by CSS and shown if JS is present -->

    <div id="top-bar">
    <!-- This contains the title and icon -->

    <div id="twitIcon"><img src="img/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
    <!-- The twitter icon -->

    <h2 class="tut">My tweets</h2>
    <!-- Title -->

    </div>

    <div id="tweet-container"><img id="loading" src="img/loading.gif" width="16" height="11" alt="Loading.." /></div>
    <!-- The loading gif animation - hidden once the tweets are loaded -->

    <div id="scroll"></div>
    <!-- Container for the tweets -->

</div>

El teletipo de Twitter funciona solo si JavaScript está presente y habilitado . Por eso lo ocultamos en el CSS y lo mostramos con jQuery. Esto asegurará que solo se muestre si funciona correctamente.

En el diseño utilicé un increíble icono de twitter de freakyframes.

Pasemos al CSS

Paso 2:CSS

Este es el lugar desde el que debe comenzar si planea modificar la demostración.

demostración.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* Resetting some of the page elements */
    margin:0px;
    padding:0px;
}

h2.tut{
    /* This is the "MY TWEETS" title */
    color:white;
    font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
    font-size:16px;
    padding:12px 0 0 58px;
    text-transform:uppercase;

    /* The CSS3 text-shadow property */
    text-shadow:2px 1px 6px #333;
}

#twitter-ticker{
    /* Styling the ticker */
    width:200px;
    height:300px;
    background:url(img/slickbg.png) no-repeat #f5f5f5;
    color:#666666;
    display:none;

    /* Rounded corners */
    -moz-border-radius:10px 10px 6px 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius:6px;

    text-align:left;
}

#tweet-container{
    /* This is where the tweets are inserted */
    height:230px;
    width:auto;
    overflow:hidden;
}

#twitIcon{
    /* Positioning the icon holder absolutely and moving it to the upper-left */
    position:absolute;
    top:-25px;
    left:-10px;
    width:64px;
    height:64px;
}

#top-bar{
    height:45px;
    background:url(img/top_bar.png) repeat-x;
    border-bottom:1px solid white;
    position:relative;
    margin-bottom:8px;

    /* Rounding the top part of the ticker, works only in Firefox unfortunately */
    -moz-border-radius:6px 6px 0 0;
}

.tweet{
    /* Affects the tweets */
    padding:5px;
    margin:0 8px 8px;

    border:1px solid #F0F0F0;
    background:url(img/transparent.png);

    width:auto;
    overflow:hidden;
}

.tweet .avatar,
.tweet .user,
.tweet .time{
    float:left;
}

.tweet .time{
    text-transform:uppercase;
    font-size:10px;
    color:#AAAAAA;
    white-space:nowrap;
}

.tweet .avatar img{
    width:36px;
    height:36px;
    border:2px solid #eeeeee;
    margin:0 5px 5px 0;
}

.tweet .txt{
    /* Using the text container to clear the floats */
    clear:both;
}

.tweet .user{
    font-weight:bold;
}

a, a:visited {
    /* Styling the links */
    color:#00BBFF;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

#loading{
    /* The loading gif animation */
    margin:100px 95px;
}

A continuación puede ver una explicación detallada del ticker de Twitter.

Ahora echemos un vistazo a la fuente de jQuery.

Paso 3:jQuery

La interfaz jQuery se comunicará con el script proxy.php. Debido a que PHP manejará la comunicación con la API de Twitter, la parte de jQuery será bastante sencilla.

Así es como funciona:

  1. El teletipo se carga;
  2. JS envía una solicitud de publicación a proxy.php con una serie de nombres de usuario de Twitter para mostrar (en la sección tweetUsers matriz);
  3. La función de devolución de llamada pasada a $.post() creará el marcado para los tweets y los presentará en el widget de Twitter;

Ahora aquí está el código que hace que esto suceda:

demostración.html

<!-- In the head section: -->
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="jScrollPane/jScrollPane.css" />

<!-- Before the closing body tag: -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jScrollPane/jScrollPane.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Primero, incluimos nuestro demo.css y jScrollPane.css . Estos le dan estilo al teletipo.

Posteriormente incluimos la biblioteca jQuery de la CDN de Google, la rueda del ratón complemento y jScrollPane complemento.

El último es script.js , que se muestra a continuación:

secuencia de comandos.js

$(function(){

    var tweetUsers = ['tutorialzine','TechCrunch','smashingmag','mashable'],
        container = $('#tweet-container');

    $('#twitter-ticker').slideDown('slow');

    $.post('proxy.php', {handles:tweetUsers}, function(response){

        // Empty the container
        container.html('');

        $.each(response.statuses, function(){

            var str = ' <div class="tweet">\
                        <div class="avatar"><a href="http://twitter.com/'+this.user.screen_name+'" target="_blank"><img src="'+this.user.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\
                        <div class="user"><a href="http://twitter.com/'+this.user.screen_name+'" target="_blank">'+this.user.screen_name+'</a></div>\
                        <div class="time">'+relativeTime(this.created_at)+'</div>\
                        <div class="txt">'+formatTwitString(this.text)+'</div>\
                        </div>';

            container.append(str);

        });

        // Initialize the jScrollPane plugin
        container.jScrollPane({
            mouseWheelSpeed:25
        });

    });

    // Helper functions

    function formatTwitString(str){
        str=' '+str;
        str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
        str = str.replace(/([^\w])\@([\w\-]+)/gm,'[email protected]<a href="http://twitter.com/$2" target="_blank">$2</a>');
        str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
        return str;
    }

    function relativeTime(pastTime){
        var origStamp = Date.parse(pastTime);
        var curDate = new Date();
        var currentStamp = curDate.getTime();

        var difference = parseInt((currentStamp - origStamp)/1000);

        if(difference < 0) return false;

        if(difference <= 5)              return "Just now";
        if(difference <= 20)         return "Seconds ago";
        if(difference <= 60)         return "A minute ago";
        if(difference < 3600)            return parseInt(difference/60)+" minutes ago";
        if(difference <= 1.5*3600)       return "One hour ago";
        if(difference < 23.5*3600)       return Math.round(difference/3600)+" hours ago";
        if(difference < 1.5*24*3600) return "One day ago";

        var dateArr = pastTime.split(' ');
        return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
    }   

});

Puede ver que en la línea 27 usamos el complemento jScrollPane. Crea una práctica barra de desplazamiento a la derecha de los tweets. Gracias a la mouseWheel plugin también es capaz de detectar y desplazar la página en los movimientos de la rueda del mouse.

Para cambiar las cuentas de twitter que se muestran en el teletipo, deberá modificar los tweetUsers matriz.

Si proporciona dos o más nombres de twitter, sus tweets se mostrarán juntos. Solo los 50 más recientes tweets de los últimos 7 días será devuelto.

Vale la pena señalar que Twitter pone un límite máximo a las URL de la API de búsqueda de 140 caracteres . Esto sería suficiente para unos 7 nombres de usuario de Twitter.

¡Ahora veamos cómo se comunica el script proxy.php con la API de Twitter!

Paso 4 - PHP

Como mencioné anteriormente, la versión original del ticker de Twitter usaba la antigua API de búsqueda, por lo que no había necesidad de un código del lado del servidor. Pero es un requisito para la nueva API que se basa en el protocolo OAuth. Para facilitar las cosas, vamos a utilizar una biblioteca PHP que hace que trabajar con la API v1.1 de Twitter sea muy fácil:codebird.php. Después de descargar la biblioteca e incluirla en la carpeta del script, estará listo para comenzar:

proxy.php

require_once ('codebird/codebird.php');

// Set a proper JSON header
header('Content-type: application/json');

/*----------------------------
    Twitter API settings
-----------------------------*/

// Consumer key
$twitter_consumer_key = '';

// Consumer secret. Don't share it with anybody!
$twitter_consumer_secret = '';

// Access token
$twitter_access_token = '';

// Access token secrent. Also don't share it!
$twitter_token_secret = '';

/*----------------------------
    Initialize codebird
-----------------------------*/

// Application settings
\Codebird\Codebird::setConsumerKey($twitter_consumer_key, $twitter_consumer_secret);

$cb = \Codebird\Codebird::getInstance();

// Your account settings
$cb->setToken($twitter_access_token, $twitter_token_secret);

/*----------------------------
    Handle the API request
-----------------------------*/

// Is the handle array passed?
if(!isset($_POST['handles']) || !is_array($_POST['handles'])){
    exit;
}

// Does a cache exist?

$cache = md5(implode($_POST['handles'])).'.cache';

if(file_exists($cache) && time() - filemtime($cache) < 15*60){
    // There is a cache file, and it is fresher than 15 minutes. Use it!

    echo file_get_contents($cache);
    exit;
}

// There is no cache file. Build it!

$twitter_names = array();

foreach($_POST['handles'] as $handle){

    if(!preg_match('/^[a-z0-9\_]+$/i', $handle)){
        // This twitter name is not valid. Skip it.
        continue;
    }

    $twitter_names[] = 'from:'.$handle;
}

$search_string = implode(' OR ', $twitter_names);

// Issue a request for the Twitter search API using the codebird library
$reply = (array) $cb->search_tweets("q=$search_string&count=50");
$result = json_encode($reply);

// Create/update the cache file
file_put_contents($cache, $result);

// Print the result
echo $result;

El script recibe los identificadores de Twitter que necesita para buscar en $_POST formación. A continuación, crea un archivo de caché válido durante 15 minutos (reduzca este valor si necesita más resultados en tiempo real) para minimizar las solicitudes que se realizan a la API de Twitter. Al final, imprime la respuesta como JSON para que la maneje el front-end.

¡Con esto, el ticker de Twitter está completo!

Conclusión

Hoy usamos la nueva API de Twitter para construir un práctico jQuery Ticker que mostrará sus últimos tweets en su blog o sitio. Eres libre de modificar y desarrollar el código de la forma que creas conveniente.