Om du eller ditt företag har ett Twitter-konto är chansen stor att du vill marknadsföra det och visa dina senaste tweets från din webbplats. Eftersom många webbplatser – både personliga och alltmer affärsmässiga – är byggda på bloggprogram som WordPress, uppnås detta vanligtvis via ett plugin, som det finns många av där ute.
Men vad händer om du bara vill lägga till ditt live Twitter-flöde till en ”normal” webbsida? Twitter själv tillhandahåller ett antal HTML-widgets, men i den här artikeln ska jag visa dig hur lätt det är att uppnå med lite JavaScript, CSS och jQuery.
Om du inte har stött på det tidigare:
Vad är jQuery?
jQuery är ett snabbt och kortfattat JavaScript-bibliotek som förenklar genomgång av HTML-dokument, händelsehantering, animering och Ajax-interaktioner för snabb webbutveckling. Det är väldigt kraftfullt och gör livet mycket enklare när du skriver JavaScript. För att inkludera jQuery på din webbsida, lägg helt enkelt till följande i <head> taggar:
<script type="text/javascript" src="http://jqueryjs.google
code.com/files/jquery-1.3.2.min.js"></script>
Detta använder versionen som finns på Google Code, vilket gör att du slipper ladda ner filen.
Twitter API
Twitter själv tillhandahåller ett komplicerat API för att ge tillgång till alla möjliga saker. Mycket av denna komplikation uppstår kring autentisering, och nödvändigtvis så, men tack och lov för att helt enkelt hämta en ström av tweets krävs inte autentisering (så länge användaren i fråga inte har gömt sina tweets).
Först och främst erbjuder API:n många olika sätt att få en användarens status. Jag kommer inte att gå in på någon av dem förutom den som jag förespråkar, och det här är den jag kommer att prata om här: user_timeline.
user_timeline
Detta returnerar ett antal av de senaste statusar som lagts upp av användaren. Den kan returnera data i olika format: XML, JSON, RSS och Atom. Jag föredrar JSON, ett lätt datautbytesformat, så det här är det jag kommer att prata om.
Du kan använda ett antal parametrar, och en fullständig lista över vad de kan göra finns i Twitter API-beskrivningen för user_timeline. För närvarande kommer jag bara att använda några få relevanta.
Ge mig tweets!
För att hämta data för ett visst Twitter-konto (jag kommer att använda pcpro i detta exempel här) kallar du följande:
$.getJSON("http://twitter.com/statuses/user_timeline.json?
screen_name=pc_pro&count=10&callback=?",
function(tweetdata) {
// do some stuff here
});
Detta kommer att returnera de senaste 10 tweetarna från pc_pro-kontot i JSON-format i tweetdata variabel. Som standard ingår inte retweetade tweets i detta flöde, men för att inkludera dem, lägg till &include_rts=1 parametern ovan, och de kommer att returneras.
Naturligtvis måste vi nu förstå denna data, analysera den och faktiskt göra något med den.
På vår HTML-sida, definiera en <ul> och ge den id tweet-list. Det är här vi kommer att hålla våra tweets. Ovanstående kod utökas sedan för att göra följande:
$.getJSON("http://twitter.com/statuses/user_timeline.json?screen_name=pc_pro&count=1O&callback=?", function(tweetdata) {
var tl = $("#tweet-list");
$.each(tweetdata, function(i,tweet) {
tl.append("<li>“" + tweet.text + "”– " + tweet.created_at + "</li>");
});
});
Några förklaringar: var tl = $("#tweet-list"); tar en referens till <ul> element som vi skapade ovan. Vi behöver detta eftersom vi kommer att lägga till varje tweet till det.
$.each(tweetdata, function(i,tweet) {... är början på en jQuery-slinga, i det här fallet itererande genom varje objekt i tweetdata och förvara den tillfälligt i tweet. Följande rad lägger sedan till tweeten i en <li> Artikel. Den faktiska texten i tweeten finns i text datamedlem, och här sätter vi dubbla citattecken runt den, och tiden då den skapades finns i created_at datamedlem.
Detta kommer nu att visa de senaste 10 tweetarna i listformat på den relevanta HTML-sidan.
Men om det finns länkar i tweeten kommer de inte att vara klickbara, och det skapade datumet är lite långt och inte som Twitters standardtidslinjer som ”för ungefär en minut sedan” eller ”två timmar sedan”. Vi kan fixa detta med följande två funktioner urlToLink(); som vi kallar på tweet.text:
function urlToLink(text) {
var exp = /(b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
return text.replace(exp,"<a href="https://www.alphr.com/blogs/2010/09/13/adding-your-twitter-feed-to-your-website-with-jquery/">$1</a>");
}
och relTime(); som vi kallar på tweet.created_at:
function relTime(time_value) {
time_value = time_value.replace(/(+[0-9]{4}s)/ig,"");
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var timeago = parseInt((relative_to.getTime() - parsed_date) / 1000);
if (timeago < 60) return 'less than a minute ago';
else if(timeago < 120) return 'about a minute ago';
else if(timeago < (45*60)) return (parseInt(timeago / 60)).toString() + ' minutes ago';
else if(timeago < (90*60)) return 'about an hour ago';
else if(timeago < (24*60*60)) return 'about ' + (parseInt(timeago / 3600)).toString() + ' hours ago';
else if(timeago < (48*60*60)) return '1 day ago';
else return (parseInt(timeago / 86400)).toString() + ' days ago';
}
Så vi måste ändra ovanstående rad till följande:
tl.append("<li>“" + urlToLink(tweet.text) + "”– " + relTime(tweet.created_at) + "</li>");
Detta kommer att anropas när HTML-sidan laddas (eller så kan du ladda den någon annan gång, det är upp till dig självklart) och detta görs med jQuery genom att infoga koden inom:
$(document).ready(function() {
// code here
});
som i princip anropar koden när hela DOM har laddats.
Slutresultat
Jag har satt ihop ett exempel med all kod ovan, så att du kan se allt detta tillsammans och arbeta för dig själv. Dessutom kan du se koden för att se hur det går till. Det hela är också kommenterat, förmodligen överdrivet så, om du skulle köra fast.
Du kan givetvis även styla listan och dess innehåll med CSS, men jag lämnar det som en övning för läsaren.
*Uppdatering*
En av kommentarerna nedan frågade om att hämta de senaste statusarna från ett specifikt kontos lista. Jag har skapat ett snabbt exempel som hämtar och visar de senaste uppdateringarna från PC Pros ”personal” Twitter-lista. Du kan naturligtvis se källkoden.
Den största skillnaden är webbadressen som ingår i &.getJSON() samtal som borde vara:
http://api.twitter.com/1/account-name/lists/list-name/statuses.json?callback=?
var account-name är namnet på kontot, i det här fallet pc_pro, och list-name är namnet på listan, i det här fallet staff.
