¿Cómo crear un simple plugin de Twitter para WordPress?

En este artículo te vamos a mostrar cómo crear un plugin para WordPress, ya sabéis, el CMS más utilizado para desarrollar páginas web, que muestre las últimas actualizaciones de una cuenta de Twitter específica. Si, sé que existen MUCHÍSIMOS plugins para WordPress que muestren los últimos tuits de una cuenta ya definida, pero con esta práctica sabremos hacer dos cosas: manejar la API de Twitter y crear un plugin para WordPress. No está nada mal, ¿verdad?

Paso 1. Bájate los scripts

Antes de empezar a desarrollar el plugin, necesitamos algunas librerías de Javascript.

Paso 2. Crea la estructura de archivos y cópialos

Crea este directorio: /wp-content/plugins/tweetfeed-light, y copia los siguientes ficheros

/css
    style.css
 
/img
    buttons.png
    interface.png
    interface_dark.png
    twitter_bird.png
 
/js
    jquery.tweetable.min.js
    jquery-1.7.2.min.js

Paso 3. Datos básicos del plugin

Continua creando el archivo tweetfeed-light.php (el nombre de nuestro fichero principal del plugin) con el siguiente contenido.

/*
Plugin Name: Tweetfeed Light
Plugin URI: http://wp.tutsplus.com
Description: Show latest Tweets in sidebar for a given Twitter user 
Version: 1.0
Author: Adam Burucs
Author URI: http://wp.tutsplus.com
*/

Paso 4. La clase del plugin

Declaración básica de la clase de nuestro plugin.

class AB_Tweetfeed_Light {
}

Paso 5. Constructor

Es una buena idea poner la configuración y los requisitos iniciales en esta función. En esta sección haremos y definiremos lo siguiente:

  • ruta del plugin
  • shortcode
  • importar los scripts
  • importar estilos

El código para dichas tareas:

public function __construct() {
    // set plugin path
    $this->pluginUrl = WP_PLUGIN_URL . '/tweetfeed-light';
 
    // set shortcode
    add_shortcode('tweetfeed-light', array($this, 'shortcode'));
 
    // import scripts
    wp_enqueue_script('tweetable-script',   $this->pluginUrl . '/js/jquery.tweetable.min.js', array( 'jquery' ));
 
    // import style
    wp_enqueue_style('tweetable-style',     $this->pluginUrl . '/css/style.css');
}

Paso 6. Obteniendo los tuits

Con esto recuperaremos los últimos tuits de un usuario. Podemos también definir una variable para limitar el número de tweets que queremos recuperar.

public function loadTweets($user, $limit) {
 
    // render tweets to div element
    echo '<div id="tweets"></div>';
 
    // render javascript code to do the magic
    echo
    '<script type="text/javascript">
    jQuery(function(){
    jQuery("#tweets").tweetable({
    username: "' . $user . '",
    limit: ' . $limit . ',
    replies: true,
    position: "append"});
    });
    </script>';
 
}

Paso 7. Función shortcode

Este magnífico script nos ayudará a utilizar el plugin mediante un shortcode.

// render tweets with shortcode
public function shortcode($data) {
    return $this->loadTweets($data['username']);
}

Paso 8. Instanciando la clase

Creamos un objeto de la clase del plugin

// run plugin
$tweetfeed_light = new AB_Tweetfeed_Light();

Paso 9. Código final

Así es como quedaría el código de nuestro plugin una vez acabado:

/*
Plugin Name: Tweetfeed Light
Description: Show latest Tweets in sidebar for a given Twitter user
Version: 1.0
Author: Adam Burucs
*/
 
class AB_Tweetfeed_light {
public function __construct() {
    // set plugin path
    $this->pluginUrl = WP_PLUGIN_URL . '/tweetfeed-light';
     
    // set shortcode
    add_shortcode('tweetfeed-light', array($this, 'shortcode'));
     
    // import scripts
    wp_enqueue_script('tweetable-script',   $this->pluginUrl . '/js/jquery.tweetable.min.js', array( 'jquery' ));
     
    // import style
    wp_enqueue_style('tweetable-style',     $this->pluginUrl . '/css/style.css');
}
 
public function loadTweets($user, $limit) {
 
    // render tweets to div element
    echo '<div id="tweets"></div>';
 
    // render javascript code to do the magic
    echo
    '<script type="text/javascript">
    jQuery(function(){
    jQuery("#tweets").tweetable({
    username: "' . $user . '",
    limit: ' . $limit . ',
    replies: true,
    position: "append"});
    });
    </script>';
 
}
 
// render tweets with shortcode
public function shortcode($data) {
    return $this->loadTweets($data['user'], $data['limit']);
}
}
 
// run plugin
$tweetfeed_light = new AB_Tweetfeed_Light();

Paso 10. Uso del shortcode

Puedes utilizar este plugin escribiendo el shortcode [tweetfeed-light user="noprog" limit="10"] en donde quieras. Por ejemplo:

...
<div class="menu">...</div>
[tweetfeed-light user="noprog" limit="10"]
<div class="footer">...</div>
...

Muchas gracias a Adam Burucs, por la creación de este plugin y cedernos su divulgación.

Fuente: Adam Burucs

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
SIGUIENTE ARTÍCULO