logo

Muestre sus tweets favoritos usando PHP y jQuery (actualizado)

Si tiene una cuenta de Twitter, a menudo se encuentra buscando una manera de mostrar sus últimos tweets en su sitio web o blog. Esto es prácticamente un problema resuelto. Hay complementos de jQuery, clases de PHP y tutoriales que le muestran cómo hacerlo.

Sin embargo, ¿qué sucede si solo desea mostrar ciertos tweets que ha marcado explícitamente para mostrar? Como es el conjunto de características minimalistas de Twitter, proporciona una solución a este problema:los favoritos.

En este tutorial, escribiremos una clase de PHP que obtendrá, almacenará en caché y mostrará sus tweets favoritos en una hermosa interfaz CSS3. Utilizará la API OAuth v1.1 de Twitter y la biblioteca Codebird.

HTML

Puede ver el marcado de la página que usaremos como base a continuación. El #contenedor div contendrá los tweets (que generaremos en la sección PHP del tutorial).

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Display your Favorite Tweets using PHP and jQuery | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="container">
            <!-- The tweets will go here -->
        </div>

        <!-- JavaScript includes -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="assets/js/jquery.splitlines.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

Usaremos el complemento splitLines, que como sugiere su nombre, dividirá los tweets en divs separados, uno para cada línea de texto. Esto es necesario ya que es lo único que podemos aplicar relleno a las líneas individualmente (como ilustración, vea la demostración con JS deshabilitado). Sin embargo, la demostración aún conservará la mayor parte de su diseño sin ella.

En cuanto a la generación de los tweets, crearemos una clase de PHP que lo manejará por nosotros. Solo necesitaremos llamar a su método de generación dentro del #container div así:$tweets->generate(5) , que mostrará los 5 tuits más recientes que hayan gustado. Este método generará una lista desordenada con tweets:

Marcado de tweet

<ul class="tweetFavList">
<li>
    <p>The text of the tweet goes here</p>
    <div class="info">
        <a title="Go to Tutorialzine's twitter page" class="user"
            href="http://twitter.com/Tutorialzine">Tutorialzine</a>

        <span title="Retweet Count" class="retweet">19</span>

        <a title="Shared 3 days ago" target="_blank" class="date"
            href="http://twitter.com/Tutorialzine/status/98439169621241856">3 days ago</a>
    </div>

    <div class="divider"></div>

</li>

<!-- More tweets here .. -->

</ul>

El texto del tweet se mantendrá en un párrafo, con información adicional disponible en el .info división Ahora escribamos la clase de PHP.

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 index.php en el siguiente paso del tutorial, para que funcione la demostración.

PHP

Nombraremos nuestra clase FavoriteTweetsList . Tomará un conjunto de credenciales de Twitter como parámetro y creará una instancia interna de la biblioteca PHP de Codebird para comunicarse con la API de Twitter. Automáticamente accederá a los tweets favoritos del usuario logueado, que si seguiste los pasos del apartado anterior, eres tú.

Nuestra clase también admitirá el almacenamiento en caché de la respuesta a un archivo, de modo que se realice una solicitud solo una vez cada tres horas, lo que acelerará las cosas.

Lista de Tweets Favoritos.class.php

class FavoriteTweetsList{
    private $cb;
    const cache = "cache_tweets.ser";

    public function __construct($credentials){

        // Create an instance of the codebird class

        \Codebird\Codebird::setConsumerKey($credentials['twitter_consumer_key'], $credentials['twitter_consumer_secret']);

        $this->cb = \Codebird\Codebird::getInstance();

        // Your account settings
        $this->cb->setToken($credentials['twitter_access_token'], $credentials['twitter_token_secret']);

    }

    /* The get method returns an array of tweet objects */

    public function get(){

        $cache = self::cache;
        $tweets = array();

        if(file_exists($cache) && time() - filemtime($cache) < 3*60*60){

            // Use the cache if it exists and is less than three hours old
            $tweets = unserialize(file_get_contents($cache));
        }
        else{

            // Otherwise rebuild it
            $tweets = $this->fetch_feed();
            file_put_contents($cache,serialize($tweets));           
        }

        if(!$tweets){
            $tweets = array();
        }

        return $tweets;
    }

    /* The generate method takes an array of tweets and build the markup */

    public function generate($limit=10, $className = 'tweetFavList'){

        echo "<ul class='$className'>";

        // Limiting the number of shown tweets
        $tweets = array_slice($this->get(),0,$limit);

        foreach($tweets as $t){

            $id         = $t->id_str;
            $text       = self::formatTweet($t->text);
            $time       = self::relativeTime($t->created_at);
            $username   = $t->user->screen_name;
            $retweets   = $t->retweet_count;

            ?>

            <li>
                <p><?php echo $text ?></p>
                <div class="info">
                    <a href="http://twitter.com/<?php echo $username ?>" class="user"
                        title="Go to <?php echo $username?>'s twitter page"><?php echo $username ?></a>

                    <?php if($retweets > 0):?>
                        <span class="retweet" title="Retweet Count"><?php echo $retweets ?></span>
                    <?php endif;?>

                    <a href="http://twitter.com/<?php echo $username,'/status/',$id?>"
                        class="date" target="_blank" title="Shared <?php echo $time?>"><?php echo $time?></a>
                </div>

                <div class="divider"></div>

            </li>

            <?php
        }

        echo "</ul>";
    }

    /* Helper methods and static functions */

    private function fetch_feed(){

        // Create an instance of the Codebird class:
        return (array) $this->cb->favorites_list();
    }

    private static function relativeTime($time){

        $divisions  = array(1,60,60,24,7,4.34,12);
        $names      = array('second','minute','hour','day','week','month','year');
        $time       = time() - strtotime($time);

        $name = "";

        if($time < 10){
            return "just now";
        }

        for($i=0; $i<count($divisions); $i++){
            if($time < $divisions[$i]) break;

            $time = $time/$divisions[$i];
            $name = $names[$i];
        }

        $time = round($time);

        if($time != 1){
            $name.= 's';
        }

        return "$time $name ago";
    }

    private static function formatTweet($str){

        // Linkifying URLs, mentionds and topics. Notice that
        // each resultant anchor type has a unique class name.

        $str = preg_replace(
            '/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/i',
            '<a class="link" href="$1" target="_blank">$1</a>',
            $str
        );

        $str = preg_replace(
            '/(\s|^)@([\w\-]+)/',
            '$1<a class="mention" href="http://twitter.com/#!/$2" target="_blank">@$2</a>',
            $str
        );

        $str = preg_replace(
            '/(\s|^)#([\w\-]+)/',
            '$1<a class="hash" href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>',
            $str
        );

        return $str;
    }
}

De los métodos anteriores, generate() es con el que probablemente trabajará directamente. Se necesita la cantidad de tweets que se mostrarán y una clase opcional parámetro, que anula el atributo de clase predeterminado de la lista desordenada.

Ahora que tenemos la Lista de Tweets Favoritos clase en su lugar, simplemente necesitamos crear una instancia de un objeto, pasándole un conjunto de credenciales de Twitter, como este:

index.php

require "includes/FavoriteTweetsList.class.php";
require "includes/codebird/codebird.php";

$tweets = new FavoriteTweetsList(array(
    'twitter_consumer_key'      => '-- Your consumer key here --',
    'twitter_consumer_secret'   => '-- Your consumer secret here -- ',
    'twitter_access_token'      => '-- Your access token here --',
    'twitter_token_secret'      => '-- Your access token secret --'
));

jQuery

Como estamos usando splitLines jQuery plugin, ya tenemos la mayor parte del trabajo hecho por nosotros. Simplemente tenemos que recorrer los elementos de párrafo que contienen el texto de los tweets y llamar al complemento.

secuencia de comandos.js

$(function(){
    var width = $('ul.tweetFavList p').outerWidth();

    // Looping through the p elements
    // and calling the splitLines plugin

    $('ul.tweetFavList p').each(function(){
        $(this).addClass('sliced').splitLines({width:width});
    });
});

Esto dividirá el contenido del párrafo en líneas, cada una contenida en un div individual, que podemos diseñar.

CSS

Primero, diseñemos la lista desordenada y los elementos del párrafo.

estilos.css - 1

ul.tweetFavList{
    margin:0 auto;
    width:600px;
    list-style:none;
}

ul.tweetFavList p{
    background-color: #363636;
    color: #FFFFFF;
    display: inline;
    font-size: 28px;
    line-height: 2.25;
    padding: 10px;
}

/* Coloring the links differently */

ul.tweetFavList a.link      { color:#aed080;}
ul.tweetFavList a.mention   { color:#6fc6d9;}
ul.tweetFavList a.hash      { color:#dd90e9;}

Si echas un vistazo más de cerca al formatTweet() método estático en la clase de PHP, verá que estamos agregando un nombre de clase para cada tipo de hipervínculo:un enlace regular, una mención o un hash, por lo que podemos diseñarlos de manera diferente.

Cuando se carga la página, jQuery agrega segmentado como una clase a cada párrafo. Esta clase deshace algunos de los estilos aplicados a los párrafos de forma predeterminada como respaldo, para que podamos mostrar las líneas individuales correctamente.

estilos.css - 2

/* The sliced class is assigned by jQuery */

ul.tweetFavList p.sliced{
    background:none;
    display:block;
    padding:0;
    line-height:2;
}

/* Each div is a line generated by the splitLines plugin */

ul.tweetFavList li p div{
    background-color: #363636;
    box-shadow: 2px 2px 2px rgba(33, 33, 33, 0.5);
    display: inline-block;
    margin-bottom: 6px;
    padding: 0 10px;
    white-space: nowrap;
}

A continuación, diseñaremos los coloridos cuadros de información que contienen el nombre de usuario del autor , fecha de publicación y número de retuits .

estilos.css - 3

ul.tweetFavList .info{
    overflow: hidden;
    padding: 15px 0 5px;
}

/* The colorful info boxes */

ul.tweetFavList .user,
ul.tweetFavList .retweet,
ul.tweetFavList .date{
    float:left;
    padding:4px 8px;
    color:#fff !important;
    text-decoration:none;
    font-size:11px;
    box-shadow: 1px 1px 1px rgba(33, 33, 33, 0.3);
}

ul.tweetFavList .user{
    background-color:#6fc6d9;
}

ul.tweetFavList .retweet{
    background-color:#dd90e9;
    cursor:default;
}

ul.tweetFavList .date{
    background-color:#aed080;
}

Y finalmente le daremos estilo al divisor. Este es un solo div, pero gracias a :before /:after pseudo elementos, agregamos dos círculos más a la izquierda y a la derecha del mismo.

estilos.css - 4

/* Styling the dotted divider */

ul.tweetFavList .divider,
ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
    background-color: #777777;
    border-radius: 50% 50% 50% 50%;
    height: 12px;
    margin: 60px auto 80px;
    width: 12px;
    position:relative;
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
    margin:0;
    position:absolute;
    content:'';
    top:0;
    left:-40px;
}

ul.tweetFavList .divider:after{
    left:auto;
    right:-40px;
}

ul.tweetFavList li:last-child .divider{
    display:none;
}

¡Con esto nuestra lista de tweets favoritos está completa!

Terminado

Este ejemplo se puede usar para crear una sección de testimonios simple o para resaltar los tweets que cree que sus lectores encontrarán valiosos. Incluso puedes verlo implementado en la barra lateral de este mismo sitio.