Personalizar el sidebar: Mostrar últimos tweets

Wordpress

Personalizar el sidebar en WordPress

Integrar los últimos tweets puede ser una buena manera para comunicarte con los visistantes y mantener un contenido reciente. Twitter tiene una API para obtener y usar datos. Sin embargo, Twitter no es infalible y es muy común que a la hora de obtener datos vaya lento. Por esa razón es importante usar JavaScript para que obtenga los datos de la API sin perjudicar a la carga de la página en caso de que la API falle.

Por qué usar JavaScript para comunicarse con la API de Twitter?

  • La conexión con la API sucede en el lado del cliente quitándole carga al servidor.
  • De hacerse de forma correcta, no afecta a la carga de la página.
  • Los datos pueden ser procesados y añadidos a la página cuando la conexión sea un éxito.

Concretamente usaremos la librería jQuery.

1 – Llamar a la librería jQuery

Para llamar a la librería de jQuery es preciso ir a functions.php y añadir el siguiente código. Esto hará que la librería se llame desde la sección <head> cuando hagas la llamada wp_head(). Puede que tu tema ya lo tenga implementado, en ese caso puedes saltarte este paso.

PHP
1
2
3
4
5
6
if(!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"), false, '1.3.2');
wp_enqueue_script('jquery');
}

2 – Cargar el script

Este script será el que contiene el código necesario para usar la API. Es recomendable que lo pongas al final del <body>.

XHTML
1
2
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/twitter.js">
</script>

La ruta del script sería donde la carpeta del tema en una carpeta llamada js.

3 – El plugin

Lo que hace es comunicarse con Twitter y coger los últimos tweets. Luego remplaza las URL en links reales, hash tags en links de búsqueda y @replicas en links de perfil. Código por Chris Coyier

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
(function($){
$.fn.lastTwitterMessage = function(username){
var $base = this;
if(!username || username == "") return this;
            var url = "http://twitter.com/statuses/user_timeline.json?callback=?";
            $.getJSON(url,{count:10,screen_name:username
},
function(data){
if(data && data.length >= 1){
try{
var item = null;
for(var i = 0; i < data.length; i++){
if(/^@/i.test(data[i].text)) continue;
item = data[i]; break;
           }
            if(!item) return;
var $tweet = $("<p></p>").text(item.text);
$tweet.html(
$tweet.html().replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1">$1</a>')
.replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>')
.replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>')
)
$tweet.append(" &nbsp;<a href='http://twitter.com/" + username + "'>(&#8734;)</a>&nbsp; ").wrapInner("<span>");
$base.empty().append($tweet).show();
} catch(e) {
            
            };
};
});
return this;
};
})(jQuery);

4 – Llamar al plugin

Hay dos formas de hacerlo. Una usando otro archivo javascript y ponerlo justo después de la llamada del javascript twitter. La otra sería pegando el código directamente en el mismo sitio.

JavaScript
1
2
3
4
$(function() {
$("<div id='tweet'></div>").hide().appendTo("#sidebar")
.lastTwitterMessage('GuidaCode');
});

Este código lo que hace es añadir una div con id tweet al final del div sidebar pero, estará oculto y llamará al plugin que hemos creado usando el nombre de usuario de Twitter como parámetro. Solamente se mostrará si la consulta del plugin fue realizada correctamente(mirar última línea del plugin).

Y hasta aquí cómo integrar los últimos tweets en el sidebar, espero que os haya gustado. Buen finde 🙂