Hvis du eller din virksomhed har en Twitter-konto, er chancerne for, at du gerne vil promovere den og vise dine seneste tweets fra din hjemmeside. Da mange hjemmesider – både personlige og i stigende grad forretningsmæssige – er bygget på blogsoftware som WordPress, opnås dette normalt via et plugin, som der er mange af derude.
Men hvad hvis du blot vil tilføje dit live Twitter-feed til en "normal" webside? Twitter selv leverer en række HTML-widgets, men i denne artikel vil jeg vise dig, hvor nemt det er at opnå med en lille smule JavaScript, CSS og jQuery.
Hvis du ikke er stødt på det før:
Hvad er jQuery?
jQuery er et hurtigt og kortfattet JavaScript-bibliotek, der forenkler HTML-dokumentgennemgang, hændelseshåndtering, animering og Ajax-interaktioner for hurtig webudvikling. Det er meget kraftfuldt og gør livet meget nemmere, når du skriver JavaScript. For at inkludere jQuery på din webside skal du blot tilføje følgende i tags:
Dette bruger den version, der er hostet på Google Code, hvilket sparer dig for at skulle downloade filen.
Twitter API
Twitter selv giver en kompliceret API for at give adgang til alle mulige ting. Meget af denne komplikation opstår omkring autentificering, og det nødvendigvis, men heldigvis blot for at hente en strøm af tweets, kræves der ikke godkendelse (så længe den pågældende bruger ikke har skjult deres tweets).
Først og fremmest giver API'en mange forskellige måder at opnå en brugerens status. Jeg vil ikke gå ind på nogen af dem udover den, jeg går ind for, og det er den, jeg vil tale om her: bruger_tidslinje.
bruger_tidslinje
Dette returnerer en række af de seneste statusser, som er indsendt af brugeren. Det kan returnere data i forskellige formater: XML, JSON, RSS og Atom. jeg favoriserer JSON, et let dataudvekslingsformat, så det er det, jeg vil tale om.
Du kan bruge en række parametre, og en komplet liste over, hvad de kan, findes på Twitter API-beskrivelsen for bruger_tidslinje. Indtil videre vil jeg kun bruge nogle få relevante.
Giv mig tweets!
For at hente dataene for en bestemt Twitter-konto (jeg vil bruge pcpro i dette eksempel her) kalder du følgende:
$.getJSON("http://twitter.com/statuses/user_timeline.json?
screen_name=pc_pro&count=10&callback=?",
function(tweetdata) {
// do some stuff here
});
Dette vil returnere de sidste 10 tweets fra pc_pro-kontoen i JSON-format i tweetdata variabel. Som standard er retweetede tweets ikke inkluderet i dette feed, men for at inkludere dem skal du tilføje &include_rts=1 parameter ovenfor, og de vil blive returneret.
Selvfølgelig er vi nu nødt til at forstå disse data, analysere dem og faktisk gøre noget med dem.
På vores HTML-side skal du definere en og giv den id tweet-list. Det er her, vi holder vores tweets. Ovenstående kode udvides derefter til at gøre følgende:
$.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("
});
});
Nogle forklaringer: var tl = $("#tweet-list"); griber en henvisning til element, som vi oprettede ovenfor. Vi har brug for dette, da vi vil tilføje hvert tweet til det.
$.each(tweetdata, function(i, tweet) {... er starten på en jQuery-løkke, i dette tilfælde iteration gennem hvert element i tweetdata og gemmer den midlertidigt i tweet. Den følgende linje tilføjer derefter tweetet i en vare. Selve teksten i tweetet er indeholdt i text datamedlem, og her sætter vi dobbelte anførselstegn omkring det, og tidspunktet det blev oprettet er indeholdt i created_at data medlem.
Dette vil nu vise de sidste 10 tweets i listeformat på den relevante HTML-side.
Men hvis der er links indeholdt i tweetet, vil de ikke være klikbare, og den oprettede dato er lidt lang og ikke som Twitters standardtidslinjer såsom "for cirka et minut siden" eller "to timer siden". Vi kan løse dette med følgende to funktioner urlToLink(); som vi kalder på tweet.text:
function urlToLink(text) {
var exp = /(b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
return text.replace(exp,"$1");
}
og relTime(); som vi kalder 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 skal ændre ovenstående linje til følgende:
tl.append("
Dette vil blive kaldt, når HTML-siden er indlæst (eller du kan indlæse den på et andet tidspunkt, det er selvfølgelig op til dig), og dette gøres ved hjælp af jQuery ved at indsætte koden i:
$(document).ready(function() {
// code here
});
som grundlæggende kalder koden, når hele DOM er blevet indlæst.
Slutresultat
Jeg har sammensat et eksempel ved at bruge al koden ovenfor, så du kan se alt dette sammen og arbejde for dig selv. Plus du kan se koden for at se, hvordan det gøres. Det hele er også kommenteret, sandsynligvis overdrevent, hvis du skulle sidde fast.
Du kan selvfølgelig også style listen og dens indhold med CSS, men det vil jeg efterlade som en øvelse til læseren.
*Opdatering*
En af kommentarerne nedenfor spurgte om at hente de seneste statusser fra en specifik kontos liste. Jeg har lavet et hurtigt eksempel, der henter og viser de seneste opdateringer fra PC Pro's 'personale' Twitter-liste. Du kan selvfølgelig se kildekoden.
Den største forskel er den URL, der er inkluderet i &.getJSON() opkald som skal være:
http://api.twitter.com/1/account-name/lists/list-name/statuses.json? callback=?
hvor account-name er navnet på kontoen, i dette tilfælde pc_pro, og list-name er navnet på listen, i dette tilfælde staff.
