En este tutorial, vamos a crear un script de jQuery que recupere los tweets de una cuenta de usuario. Es rápido y fácil, vienen con enlaces, hashtags, alias parser, así como la fecha de publicación de cada tweet (calculado relativamente). Lo más importante, todo tendrá una clase definida, por lo que podrás darle estilo a través de CSS.
Para recuperar los tweets del timeline de un usuario vamos a utilizar la API statuses/user_timeline de Twitter. Para hacer que la autenticación OAuth sea indolora, utilizaremos una librería de terceros para PHP llamada Twitter for PHP.
Tendrás que iniciar sesión en Twitter y registrar una aplicación desde la página de Twitter Apps para obtener las consumer keys y las access tokens. Recuerda nunca revelar dichas claves publicamente. Recuerda que para seguir con el desarrollo de nuestro feed necesitamos: consumer key, consumer secret, access token y access token secret. Es muy sencillo de obtener y no tendrás problema alguno.
Vamos a utilizar el script de links/hashtag/alias para formatear los hashtag de Twitter. Así es como quedaría un tweet con texto y una imagen:
HTML
Necesitaremos una plantilla simple de HTML, enlazada a jQuery y al script de Twitter. También, un div con ID “jstwitter”, en el cual anexaremos todos los tweets desde el servidor de Twitter, ya procesados y analizados.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="twitter.js"></script>
</head>
<body>
<div id="jstwitter">
</div>
</body>
</html>
CSS
Hemos hecho un diseño rápido y limpio. Sin embargo, puedes dar estilo a los siguientes elementos:
- .twtr-hashtag: #abc
- .twtr-hiperlink: hipervínculo
- .twtr-atreply: #abc
- .time: tiempo relativo (hace 10 minutos)
body {
background:#bae0f6;
font-size:14px;
font-family: 'Helvetica', arial, sans-serif;
}
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#jstwitter {
width: 300px;
font-size: 15px;
color: #333333;
margin: 0 auto;
text-align:center;
}
#jstwitter .tweet {
margin: 0 auto 15px auto;
padding: 15px;
border-radius:3px;
background:#ffffff;
text-align:left;
box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
}
#jstwitter .tweet a {
text-decoration: none;
color: #13c9d0;
}
#jstwitter .tweet a:hover {
text-decoration: underline;
}
#jstwitter img {
display:block;
margin-bottom:5px;
max-width:100%;
}
#jstwitter .tweet .time {
font-size: 10px;
font-style: italic;
color: #666666;
display:block;
margin-top:3px;
}
Javascript
Ahora entraremos de lleno en el Javascript. Lo dividiremos en tres secciones:
- loadTweets: Esta es la encargada de recuperar los tweets. Nosotros utilizaremos AJAX para llamar a PHP Twitter API que devolverá los datos en formato JSON. Esta función los recupera y los procesa.
- timeAgo: Calculadora de tiempo relativo de Twitter
- ify: Convierte hashtags, alias y enlaces en hipervínculos.
JQTWEET = {
// Set twitter username, number of tweets & id/class to append tweets
user: 'noprog',
numTweets: 5,
appendTo: '#jstwitter',
// core function of jqtweet
loadTweets: function() {
$.ajax({
url: 'tweets.php',
type: 'post',
dataType: 'json',
data: {
q: JQTWEET.user,
count: JQTWEET.numTweets,
api: 'statuses/user_timeline'
},
success: function(data, textStatus, xhr) {
var html = '<div class="tweet">TWEET_IMGTWEET_TEXT<div class="time">AGO</div>';
// append tweets into page
for (var i = 0; i < data.length; i++) {
$(JQTWEET.appendTo).append(
html.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text))
.replace(/USER/g, data[i].user.screen_name)
.replace('AGO', JQTWEET.timeAgo(data[i].created_at))
.replace(/ID/g, data[i].id_str)
.replace('TWEET_IMG', (data[i].entities.media && data[i].entities.media.length ? '<img src="' + data[i].entities.media[0].media_url + '"/>': ''))
);
}
}
});
},
/**
* relative time calculator FROM TWITTER
* @param {string} twitter date string returned from Twitter API
* @return {string} relative time like "2 minutes ago"
*/
timeAgo: function(dateString) {
var rightNow = new Date();
var then = new Date(dateString);
if ($.browser.msie) {
// IE can't parse these crazy Ruby dates
then = Date.parse(dateString.replace(/( +)/, ' UTC$1'));
}
var diff = rightNow - then;
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
week = day * 7;
if (isNaN(diff) || diff < 0) {
return ""; // return blank string if unknown
}
if (diff < second * 2) {
// within 2 seconds
return "right now";
}
if (diff < minute) {
return Math.floor(diff / second) + " seconds ago";
}
if (diff < minute * 2) {
return "about 1 minute ago";
}
if (diff < hour) {
return Math.floor(diff / minute) + " minutes ago";
}
if (diff < hour * 2) {
return "about 1 hour ago";
}
if (diff < day) {
return Math.floor(diff / hour) + " hours ago";
}
if (diff > day && diff < day * 2) {
return "yesterday";
}
if (diff < day * 365) {
return Math.floor(diff / day) + " days ago";
}
else {
return "over a year ago";
}
}, // timeAgo()
/**
* The Twitalinkahashifyer!
* http://www.dustindiaz.com/basement/ify.html
* Eg:
* ify.clean('your tweet text');
*/
ify: {
link: function(tweet) {
return tweet.replace(/b(((https*://)|www.)[^"']+?)(([!?,.)]+)?(s|$))/g, function(link, m1, m2, m3, m4) {
var http = m2.match(/w/) ? 'http://' : '';
return '<a class="twtr-hyperlink" target="_blank" href="' + http + m1 + '">' + ((m1.length > 25) ? m1.substr(0, 24) + '...' : m1) + '</a>' + m4;
});
},
at: function(tweet) {
return tweet.replace(/B[@＠]([a-zA-Z0-9_]{1,20})/g, function(m, username) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';
});
},
list: function(tweet) {
return tweet.replace(/B[@＠]([a-zA-Z0-9_]{1,20}/w+)/g, function(m, userlist) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/' + userlist + '">@' + userlist + '</a>';
});
},
hash: function(tweet) {
return tweet.replace(/(^|s+)#(w+)/gi, function(m, before, hash) {
return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';
});
},
clean: function(tweet) {
return this.hash(this.at(this.list(this.link(tweet))));
}
} // ify
};
$(document).ready(function () {
// start jqtweet!
JQTWEET.loadTweets();
});
PHP
Desde que Twitter se traslado a REST 1.0, la implementación más segura es utilizar un lenguaje del lado del servidor ya que necesitas especificar la consumer key, consumer secret key y los access tokens. Además, debes estar autentificado con el fin de acceder a la API. Afortunadamente, contamos con una gran librería PHP para que nos resuelva todo el trabajo sucio.
Como dije anteriormente, vamos a utilizar Twitter for PHP. Este sería el código PHP, como ves, una implementación muy sencilla:
require_once 'twitter-php/twitter.class.php'; //Twitter OAuth Settings, enter your settings here: $CONSUMER_KEY = '...'; $CONSUMER_SECRET = '...'; $ACCESS_TOKEN = '...'; $ACCESS_TOKEN_SECRET = '...'; $twitter = new Twitter($CONSUMER_KEY, $CONSUMER_SECRET, $ACCESS_TOKEN, $ACCESS_TOKEN_SECRET); // retrieve data $q = $_POST['q']; $count = $_POST['count']; $api = $_POST['api']; // api data $params = array( 'screen_name' => $q, 'q' => $q, 'count' => 20, 'includes_rts' => true ); $results = $twitter->request($api, 'GET', $params); // output as JSON echo json_encode($results);
Fuente: queness.com