Crear un widget de Twitter con la última API de Twitter

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Twitter hizo varios cambios cuando lanzaron 1.1 de su API. Uno de los cambios más notables es la introducción de la autenticación. Es decir, las aplicaciones deben autenticarse antes de poder enviar solicitudes a la API.

La autenticación es impulsada por OAuth, un protocolo abierto que permite la autorización segura en un método simple y estándar que permite a los usuarios aprobar la aplicación para actuar en su nombre sin compartir su contraseña.

En este tutorial, aprenderemos cómo interactuar mediante programación con la API de Twitter a medida que desarrollamos un widget de WordPress de la línea de tiempo de Twitter que muestra una lista de los últimos tweets realizados por un usuario de Twitter.

Aquí hay una vista previa del widget de línea de tiempo de Twitter que se construirá al final de este tutorial.

Para enviar solicitudes a la API de Twitter con éxito, debe crear una aplicación con autorización de OAuth porque no se permitirán las solicitudes no autorizadas.

Para crear una aplicación de Twitter, debe iniciar sesión en el panel del desarrollador de Twitter utilizando su cuenta de Twitter. El punto de crear una aplicación es darte a ti mismo (y a Twitter) un conjunto de claves.

Éstos incluyen:

la clave del consumidor
el secreto del consumidor
el token de acceso
el token de acceso secreto

Siga los pasos a continuación para crear una aplicación de Twitter y para generar las claves.

Inicie sesión en la cuenta de desarrollador de Twitter utilizando su cuenta de Twitter y navegue hasta la consola de administración de aplicaciones.
Haga clic en el botón Crear nueva aplicación para iniciar la creación de la aplicación de Twitter.
Rellene el formulario y haga clic en el botón Enviar para crear la aplicación.
Haga clic en la aplicación, navegue a la pestaña Permisos y cambie el nivel de Acceso a Lectura y Escritura.
Si desea hacer un uso decente de esta API, deberá cambiar su configuración a Lectura y Escritura si está haciendo otra cosa que no sea la recuperación de datos estándar utilizando las solicitudes GET.

Para obtener la clave y el secreto del consumidor de la aplicación, vaya a la pestaña Claves de la API.
Las claves de API y el secreto de API son la clave de consumidor y el secreto de consumidor, respectivamente.

Para obtener el token de acceso a la aplicación y los secretos del token, aún en la pestaña Claves de la API, desplácese hacia abajo y haga clic en el botón Crear mi token de acceso para crear los tokens de acceso.

Actualice la página y se le mostrarán los tokens de acceso a su aplicación.

Ahora tenemos la clave y el secreto del consumidor y también el token de acceso y las claves secretas. Estas credenciales de OAuth son autenticadas por Twitter al enviar solicitudes a la API.

La configuración del widget del widget de la línea de tiempo de Twitter que estamos codificando constará de campos de formulario que recopilarán y guardarán estas credenciales de OAuth en la base de datos para que el widget las reutilice.

Comencemos a codificar el complemento del widget de línea de tiempo de Twitter.

Desarrollo de widget de línea de tiempo de Twitter

El encabezado es lo primero que debe ingresar en el archivo del complemento es el encabezado del complemento.

<?php
/*
  Plugin Name: Twitter Tweets Widget
  Plugin URI: http://code.tutsplus.com
  Description: Displays latest tweets from Twitter.
  Author: Agbonghama Collins
  Author URI: http://tech4sky.com
 */

Crea una clase extendiendo la clase padre WP_Widget.

1	class Twitter_Tweets_Widget extends WP_Widget {
2	// ...

Dale al widget un nombre y una descripción a través del método mágico __construct ().

function __construct() {
    parent::__construct(
        'twitter-tweets-widget',
        __( 'Twitter Tweets Widget', 'twitter_tweets_widget' ),
        array(
            'description' => __( 'Displays latest tweets from Twitter.', 'twitter_tweets_widget' )
        )
    );
}

El método form () a continuación crea el formulario de configuración del widget que guardará las credenciales de OAuth en la base de datos para que el widget las reutilice más adelante.

public function form( $instance ) {

    if ( empty( $instance ) ) {
        $twitter_username = '';
        $update_count = '';
        $oauth_access_token = '';
        $oauth_access_token_secret = '';
        $consumer_key = '';
        $consumer_secret = '';
        $title = '';
    } else {
        $twitter_username = $instance['twitter_username'];
        $update_count = isset( $instance['update_count'] ) ? $instance['update_count'] : 5;
        $oauth_access_token = $instance['oauth_access_token'];
        $oauth_access_token_secret = $instance['oauth_access_token_secret'];
        $consumer_key = $instance['consumer_key'];
        $consumer_secret = $instance['consumer_secret'];

        if ( isset( $instance['title'] ) ) {
            $title = $instance['title'];
        } else {
            $title = __( 'Twitter feed', 'twitter_tweets_widget' );
        }
    }
    
    ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>">
            <?php echo __( 'Title', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'twitter_username' ); ?>">
            <?php echo __( 'Twitter Username (without @)', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'twitter_username' ); ?>" name="<?php echo $this->get_field_name( 'twitter_username' ); ?>" type="text" value="<?php echo esc_attr( $twitter_username ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'update_count' ); ?>">
            <?php echo __( 'Number of Tweets to Display', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'update_count' ); ?>" name="<?php echo $this->get_field_name( 'update_count' ); ?>" type="number" value="<?php echo esc_attr( $update_count ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'oauth_access_token' ); ?>">
            <?php echo __( 'OAuth Access Token', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'oauth_access_token' ); ?>" name="<?php echo $this->get_field_name( 'oauth_access_token' ); ?>" type="text" value="<?php echo esc_attr( $oauth_access_token ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'oauth_access_token_secret' ); ?>">
            <?php echo __( 'OAuth Access Token Secret', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'oauth_access_token_secret' ); ?>" name="<?php echo $this->get_field_name( 'oauth_access_token_secret' ); ?>" type="text" value="<?php echo esc_attr( $oauth_access_token_secret ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'consumer_key' ); ?>">
            <?php echo __( 'Consumer Key', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'consumer_key' ); ?>" name="<?php echo $this->get_field_name( 'consumer_key' ); ?>" type="text" value="<?php echo esc_attr( $consumer_key ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'consumer_secret' ); ?>">
            <?php echo __( 'Consumer Secret', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'consumer_secret' ); ?>" name="<?php echo $this->get_field_name( 'consumer_secret' ); ?>" type="text" value="<?php echo esc_attr( $consumer_secret ); ?>" />
    </p>
    <?php
    
}

A continuación se muestra una captura de pantalla de la configuración del widget creada por el método form () anterior.

Cuando los valores se ingresan en el campo del formulario de configuración, deben guardarse en la base de datos. El método update () desinfecta los valores del formulario del widget eliminando los datos maliciosos y luego guarda los datos desinfectados en la base de datos.

public function update( $new_instance, $old_instance ) {
    $instance = array();
    
    $instance['title']                      = ( ! empty( $new_instance['title'] ) )                     ? strip_tags( $new_instance['title'] ) : '';
    $instance['title']                      = ( ! empty( $new_instance['title'] ) )                     ? strip_tags( $new_instance['title'] ) : '';
    $instance['twitter_username']           = ( ! empty( $new_instance['twitter_username'] ) )          ? strip_tags( $new_instance['twitter_username'] ) : '';
    $instance['update_count']               = ( ! empty( $new_instance['update_count'] ) )              ? strip_tags( $new_instance['update_count'] ) : '';
    $instance['oauth_access_token']         = ( ! empty( $new_instance['oauth_access_token'] ) )        ? strip_tags( $new_instance['oauth_access_token'] ) : '';
    $instance['oauth_access_token_secret']  = ( ! empty( $new_instance['oauth_access_token_secret'] ) ) ? strip_tags( $new_instance['oauth_access_token_secret'] ) : '';
    $instance['consumer_key']               = ( ! empty( $new_instance['consumer_key'] ) )              ? strip_tags( $new_instance['consumer_key'] ) : '';
    $instance['consumer_secret']            = ( ! empty( $new_instance['consumer_secret'] ) )           ? strip_tags( $new_instance['consumer_secret'] ) : '';

    return $instance;
}

Encontré un Simple PHP Wrapper para la API de Twitter muy útil que hace que el envío y la recepción de la respuesta de la API sean fáciles, lo cual será utilizado por nuestro widget.

Descargue el contenedor PHP en el archivo comprimido de GitHub, extraiga e incluya el archivo TwitterAPIExchange.php que contiene la clase contenedora.

El siguiente método twitter_timeline () acepta lo siguiente como sus argumentos, lo que resulta útil cuando se realiza una solicitud a la API de Twitter.

$ username: nombre de usuario de Twitter
$limit: Número de tweets que se mostrarán en el widget
$ oauth_access_token: token de acceso OAuth de la aplicación de Twitter.
$ oauth_access_token secret: la aplicación OAuth acceso token secreto.
$ consumer_key: Aplicación de Twitter Clave del consumidor.
$ consumer_secret: Secreto del consumidor de la aplicación.

public function twitter_timeline( $username, $limit, $oauth_access_token, $oauth_access_token_secret, $consumer_key, $consumer_secret ) {
    require_once 'TwitterAPIExchange.php';

    /** Set access tokens here - see: https://dev.twitter.com/apps/ */
    $settings = array(
        'oauth_access_token'        => $oauth_access_token,
        'oauth_access_token_secret' => $oauth_access_token_secret,
        'consumer_key'              => $consumer_key,
        'consumer_secret'           => $consumer_secret
    );

    $url = 'https://api.twitter.com/1.1/statuses/user_timeline.json';
    $getfield = '?screen_name=' . $username . '&count=' . $limit;
    $request_method = 'GET';
    
    $twitter_instance = new TwitterAPIExchange( $settings );
    
    $query = $twitter_instance
        ->setGetfield( $getfield )
        ->buildOauth( $url, $request_method )
        ->performRequest();
    
    $timeline = json_decode($query);

    return $timeline;
}

El método utiliza PHP Wrapper para la API de Twitter para enviar solicitudes a la API de Twitter, guardar y devolver la respuesta (datos JSON de la línea de tiempo del usuario).

La API guardó la hora en que se crearon o crearon los tweets en una fecha y hora textual en inglés. P.ej. Thu Jun 26 08:47:24 +0000 2014

Para hacer que el tiempo de tweet sea más fácil de usar, creé el método tweet_time () que muestra el tiempo de las siguientes maneras.

Si el tiempo es inferior a tres segundos, regresa ahora mismo.
Menos de un minuto, vuelve hace x segundos.
Menos de dos minutos, regresa hace aproximadamente 1 minuto.
Menos de una hora, vuelve hace n minutos y así sucesivamente.

Aquí está el código para el método tweet_time ().

public function tweet_time( $time ) {
    // Get current timestamp.
    $now = strtotime( 'now' );

    // Get timestamp when tweet created.
    $created = strtotime( $time );

    // Get difference.
    $difference = $now - $created;

    // Calculate different time values.
    $minute = 60;
    $hour = $minute * 60;
    $day = $hour * 24;
    $week = $day * 7;

    if ( is_numeric( $difference ) && $difference > 0 ) {

        // If less than 3 seconds.
        if ( $difference < 3 ) {
            return __( 'right now', 'twitter_tweets_widget' );
        }

        // If less than minute.
        if ( $difference < $minute ) {
            return floor( $difference ) . ' ' . __( 'seconds ago', 'twitter_tweets_widget' );;
        }

        // If less than 2 minutes.
        if ( $difference < $minute * 2 ) {
            return __( 'about 1 minute ago', 'twitter_tweets_widget' );
        }

        // If less than hour.
        if ( $difference < $hour ) {
            return floor( $difference / $minute ) . ' ' . __( 'minutes ago', 'twitter_tweets_widget' );
        }

        // If less than 2 hours.
        if ( $difference < $hour * 2 ) {
            return __( 'about 1 hour ago', 'twitter_tweets_widget' );
        }

        // If less than day.
        if ( $difference < $day ) {
            return floor( $difference / $hour ) . ' ' . __( 'hours ago', 'twitter_tweets_widget' );
        }

        // If more than day, but less than 2 days.
        if ( $difference > $day && $difference < $day * 2 ) {
            return __( 'yesterday', 'twitter_tweets_widget' );;
        }

        // If less than year.
        if ( $difference < $day * 365 ) {
            return floor( $difference / $day ) . ' ' . __( 'days ago', 'twitter_tweets_widget' );
        }

        // Else return more than a year.
        return __( 'over a year ago', 'twitter_tweets_widget' );
    }
}

El siguiente es el método widget () que muestra la línea de tiempo de Twitter en el front-end de WordPress.

public function widget( $args, $instance ) {
    $title                     = apply_filters( 'widget_title', $instance['title'] );
    $username                  = $instance['twitter_username'];
    $limit                     = $instance['update_count'];
    $oauth_access_token        = $instance['oauth_access_token'];
    $oauth_access_token_secret = $instance['oauth_access_token_secret'];
    $consumer_key              = $instance['consumer_key'];
    $consumer_secret           = $instance['consumer_secret'];

    echo $args['before_widget'];

    if ( ! empty( $title ) ) {
        echo $args['before_title'] . $title . $args['after_title'];
    }

    // Get the tweets.
    $timelines = $this->twitter_timeline( $username, $limit, $oauth_access_token, $oauth_access_token_secret, $consumer_key, $consumer_secret );

    if ( $timelines ) {

        // Add links to URL and username mention in tweets.
        $patterns = array( '@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '/@([A-Za-z0-9_]{1,15})/' );
        $replace = array( '<a href="$1">$1</a>', '<a href="http://twitter.com/$1">@$1</a>' );

        foreach ( $timelines as $timeline ) {
            $result = preg_replace( $patterns, $replace, $timeline->text );

            echo '<div>';
                echo $result . '<br/>';
                echo $this->tweet_time( $timeline->created_at );
            echo '</div>';
            echo '<br/>';
        }

    } else {
        _e( 'Error fetching feeds. Please verify the Twitter settings in the widget.', 'twitter_tweets_widget' );
    }

    echo $args['after_widget'];
}

La clase de widget Twitter_Tweets_Widget finalmente se registra con el gancho widgets_init para que WordPress la reconozca. Cierre su clase con un cierre} y luego agregue el siguiente código para inicializar el

function register_twitter_widget() {
    register_widget( 'Twitter_Tweets_Widget' );
}

add_action( 'widgets_init', 'register_twitter_widget' );

Finalmente, hemos terminado de codificar el widget de línea de tiempo de Twitter.

Resumen

En este artículo, aprendimos cómo usar la API de Twitter en un proyecto del mundo real para crear nuestro propio widget WordPress de la línea de tiempo de Twitter. Aunque el tutorial debería ser relativamente sencillo, cubrimos temas como OAuth, claves y otros temas que pueden ser nuevos para aquellos de ustedes que trabajan con una API.

Si tiene alguna pregunta o sugerencia para mejorar el código, avíseme en los comentarios.