Viele von uns haben viele „Zuhause“ im Internet. Persönlich nutze ich Twitter, Flickr, ScrnShots und Facebook. Diese Webdienste sind cool genug, um Wege zur Interaktion mit ihnen anzubieten und Daten von ihnen abzurufen, ohne die Seite selbst unbedingt besuchen zu müssen. Das nennt man eine API (oder Application Programming Interface).
Demo anzeigen Dateien herunterladen
Man kann sich eine API wie einen RSS-Feed vorstellen. Wenn Sie CSS-Tricks über einen Feed-Reader wie Google Reader lesen, wissen Sie, dass Sie die Seite nicht einmal besuchen müssen, um meine Inhalte zu lesen, da diese Daten auf andere Weise bereitgestellt werden. Im Fall von RSS handelt es sich um eine XML-Datei, die auf sehr spezifische Weise formatiert ist. APIs werden oft als XML bereitgestellt, formatiert so, wie die jeweilige Anwendung sie für Sie am nützlichsten hält. XML ist cool, aber ähnlich wie HTML muss es geparst werden, bevor man wirklich etwas damit anfangen kann. Hier kommt JSON.
JSON (JavaScript Object Notation) ist das, was alle angesagten Anwendungen heutzutage mit ihren APIs als Alternative zu XML anbieten. Das Coole an JSON ist, dass man es nicht auf die gleiche Weise parsen muss wie XML. Die Daten, die Sie von einem JSON-Aufruf erhalten, kommen als Objekt zurück, das sofort einsatzbereit ist und es Ihnen ermöglicht, damit zu arbeiten. Hinweis: Wenn das eine sehr falsche oder schlechte Erklärung war, korrigieren Sie mich gerne.
APIs verwenden (jQuery und JSON)
jQuery bietet eine denkbar einfache Möglichkeit, diese JSON-Objekte abzurufen.
$.getJSON('http://url-to-api.com', function(data){
$.each(data, function(index, item){
// do stuff with each item
});
});Der obige Code greift auf die angegebene URL zu (Sie müssen diese natürlich durch eine echte URL einer echten API ersetzen, die echtes JSON ausgibt) und durchläuft dann jedes „Element“ und gibt Ihnen die Möglichkeit, etwas mit diesem Element zu tun. Ich sage „Element“, denn obwohl dies ein gebräuchlicher Name ist, den APIs verwenden, ist es nicht immer der Fall, und Sie müssen hier spezifisch und genau sein, da JSON nur sehr wenig Fehlerbehandlung bietet.
Inhalte auf Ihre Seite einfügen
Ein weiterer Grund, hier jQuery zu verwenden, ist, wie einfach es damit ist, HTML dynamisch auf der Seite einzufügen. Schauen wir uns das Codebeispiel an, um die neuesten „Tweets“ von Twitter abzurufen und dann die integrierte jQuery-Funktion append() zu verwenden, um sie auf der Seite anzuzeigen.
$.getJSON('https://api.twitter.com/1/statuses/user_timeline/chriscoyier.json?count=10&include_rts=1&callback=?', function(data){
$.each(data, function(index, item){
$('#twitter').append('<div class="tweet"><p>' + item.text + '</p><p>' + item.created_at + '</p></div>');
});
});Dadurch wird für jedes „Element“ im Objekt ein neuer Div mit der Klasse „tweet“ auf der Seite eingefügt (innerhalb des übergeordneten Div mit der ID „twitter“). Beachten Sie die Variable „count“ in der von Twitter bereitgestellten URL. Sie ist auf 10 eingestellt, was 10 Elemente zurückgibt, sodass 10 Divs auf der Seite vorhanden sein werden. Innerhalb dieser Divs befinden sich zwei Absatzelemente. Eines mit „item.text“ und eines mit „item.created_at“. Dies sind der eigentliche Text meines letzten Tweets und der Zeitpunkt seiner Einreichung.
Beispiel für resultierendes HTML aus einem Element
<div class="tweet">
<p>I wish position: relative; worked for table cells =P</p>
<p>1 day ago</p>
</div>Das ist doch schon besser! Wir können unsere CSS-Kenntnisse nutzen, um das beliebig zu gestalten. Vielleicht so?
.tweet {
padding: 10px;
margin: 5px 0;
background: url(images/transpOrange25.png);
}Die Idee erweitern
Lassen Sie uns drei Divs auf unserer Seite erstellen, einen für Flickr, einen für Twitter und einen für ScrnShots. Dann werden wir unsere jQuery + JSON-Technik verwenden, um sie zu füllen.
Basis-HTML
<body>
<div id="page-wrap">
<div id="flickr">
<h1>Flickr Photos</h1>
</div>
<div id="twitter">
<h1>Twitter Updates</h1>
</div>
<div id="scrnshots">
<h1>Latest ScrnShots</h1>
</div>
</div>
</body>Nun hier ist das jQuery, um alle Daten von allen drei Diensten abzurufen und anzuhängen.
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?ids=52723107@N00&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(index, item){
$("<img/>").attr("src", item.media.m).appendTo("#flickr")
.wrap("<a href='" + item.link + "'></a>");
});
});
$.getJSON('http://twitter.com/status/user_timeline/chriscoyier.json?count=10&callback=?', function(data){
$.each(data, function(index, item){
$('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p>' + relative_time(item.created_at) + '</p></div>');
});
});
$.getJSON("http://www.scrnshots.com/users/chriscoyier/screenshots.json?callback=?", function(screenshots){
$.each(screenshots, function(index, screenshot){
$("#scrnshots").append("<a href='" + screenshot.url + "'><img src='" + screenshot.images.small + "' /></a>");
});
});
});
</script>
Twitter bereinigen
Zwei kleine Probleme mit den „rohen“ Daten, die die Twitter API ausgibt.
- Links kommen „tot“ an. Die vollständige URL ist da, aber es ist nur Text, kein echter Ankerlink.
- Das Datum kommt als hässlicher Zeitstempel an, kein schön lesbarer Text wie „vor 2 Tagen“.
Zwei kleine JavaScript-Funktionen, die ich ausgegraben habe, um diese Probleme zu lösen.
Linkify
String.prototype.linkify = function() {
return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
return m.link(m);
});
};relative_time
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
var r = '';
if (delta < 60) {
r = 'a minute ago';
} else if(delta < 120) {
r = 'couple of minutes ago';
} else if(delta < (45*60)) {
r = (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (90*60)) {
r = 'an hour ago';
} else if(delta < (24*60*60)) {
r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
r = '1 day ago';
} else {
r = (parseInt(delta / 86400)).toString() + ' days ago';
}Anstatt also nur „item.text“ in Ihre append-Anweisung einzufügen, können Sie „item.text.linkify()“ verwenden. Anstatt „item.created_at“ einzufügen, können Sie „relative_time(item.created_at)“ verwenden.
Danksagung
Funktionen für „linkify“ und „relative_time“ von Ralph Whitbeck.
Danke an Greg Bell, der die ScrnShots API für mich fit gemacht hat!
Sehr cooler Beitrag, danke!
Gibt es eine Möglichkeit, das für deviantart zu machen?
Noch nicht, es gab Gerüchte, dass dA eine API machen würde. Aber ich habe in letzter Zeit nichts mehr davon gehört.
@Majesticskull: Wenn es eine RSS-Ausgabe gibt, können Sie immer etwas wie SimplePie verwenden, um sie zu parsen.
Großartige Arbeit, ich habe gerade kürzlich darüber nachgedacht, eine sich selbst aktualisierende Homepage für mich zu erstellen, daher werden diese Informationen definitiv helfen. Alles, was ich jetzt brauche, ist, auf den Social-Media-Seiten aktiver zu werden!
Tolle Anleitung, gibt es Tipps, wie man Informationen aus beliebigen RSS-Feeds direkt in mein HTML lädt? Wie den RSS-Feed meines WordPress-Blogs auf meine HTML-Website?
@Thomas – Wie Tim oben erwähnt hat, wenn Sie nur RSS parsen müssen, um es auf einer Seite einzufügen, ist SimplePie der richtige Weg. Ich spreche in meinem Artikel über iPhone/Mobile Interface vor ein paar Wochen darüber.
Es gibt Social-Network-Aggregatoren wie FriendFeed (http://friendfeed.com/) und Soup (http://www.soup.io/), die diese Art von Dingen für Sie erledigen und dann ihre eigene API anbieten, sodass Sie einen „Lifestream“ in Ihr Blog, Ihr Facebook-Profil usw. einbetten können. Sie erhalten nicht die gleiche feingranulare Kontrolle, aber sie sind einfach und bequem einzurichten.
Da ständig neue soziale Netzwerke entstehen, ist die Idee, ein eigenes persönliches Portal zu erstellen, gut. Meine einzige Sorge ist, dass ich von der Verfügbarkeit dieser Dienste abhängig bin (hust Twitter hust), damit die Seite nicht ins Stocken gerät oder abbricht.
Toller Beitrag! Ich wollte meine Twitter- und Flickr-Updates etwas besser anzeigen lassen, und das wird helfen.
Ich habe meine schon seit einiger Zeit, gebaut mit magpieRSS und etwas PHP.
http://status.jaredzimmerman.com
Hallo Chris! Netter Tutorial! Ich habe vor einiger Zeit etwas Ähnliches mit meiner persönlichen Website gemacht und einen kurzen Tutorial geschrieben :)
Ich liebe die Idee von Lifestreams, und ich habe tatsächlich meinen eigenen Life-Feed letzten Monat mit Yahoo! Pipes und einer Reihe von Feeds erstellt, dann ein PHP-Skript, um alles zu parsen.
Einige der verwendeten Feeds musste ich generieren, sodass sie auf meinem eigenen Server zwischengespeichert werden, und das scheint einige der Probleme mit dem Ausfall von Feeds, insbesondere Twitter, zu beheben, auf die Dave angespielt hat. Es wäre sehr einfach, einen Feed von Twitter zu erstellen, der zwischengespeichert wird und prüft, ob Twitter verfügbar ist, bevor er einen aktualisierten Cache generiert, und wenn Twitter ausgefallen ist, würde er den zuvor generierten Cache von Ihrem eigenen Server abrufen.
Ich bin so froh, dass dieser Trend richtig Fahrt aufnimmt!
@Jared: Sehr schön, gefällt mir. Es ist wahrscheinlich wichtig, die Vor- und Nachteile der Verwendung von PHP/RSS im Vergleich zur Verwendung der Live-API zu erwähnen. Bei RSS generieren viele Seiten dies von Zeit zu Zeit als flache Datei oder leiten es sogar über einen Dienst wie Feedburner, der das RSS hostet. Das bedeutet, dass Ihre Social-Page wahrscheinlich intakt bleibt, selbst wenn die Seite ausfällt. Wenn Sie jedoch den Live-API-Weg gehen, ist Ihre Seite den Launen dieser Seite ausgesetzt. Möglicherweise können Sie dem entgegenwirken, indem Sie selbst Caching betreiben, aber der Sinn des jQuery/Live-API-Weges ist einfach, wie EINFACH er zu verwenden ist =)
@Jon: Auch sehr cool. Eine Kombination aus Parsen von RSS und der Verwendung des bereitgestellten Twitter-Widgets. Offensichtlich gibt es mehr als eine Möglichkeit, eine Katze zu häuten =)
@Terri: Ah ja, Yahoo! Pipes ist noch eine weitere Möglichkeit, dies zu tun. Ich wette, es gibt sogar noch mehr Möglichkeiten. Dies ist das Zeitalter, in dem wir leben, in dem all diese brillanten Entwickler aktiv versuchen, Wege zu finden, uns Informationen auf möglichst einfache Weise zu VERBREITEN zu helfen. Sehr helle Zeiten für das Web.
Sehr schöne Anleitung. Werde es definitiv ausprobieren! Danke fürs Teilen.
Schöne Anleitung. Danke für den Link.
Tolle Anleitung! Danke! Werde das auf jeden Fall ausprobieren, wenn ich etwas freie Zeit habe ;-)
Schöne Anleitung, danke!
Ich kann das nicht verwenden, wenn sich auf meiner Seite Mootools befindet, richtig?!
Tolle Anleitung, aber hast du sie selbst ausprobiert?
Der Punkt ist, dass Sie beim Abrufen der Daten dynamisch mit jQuery eine XMLHTTPRequest an Twitter senden. Facebook usw. Und das Problem hier ist, dass AFAIK Firefox (und ich denke, andere Browser tun das Gleiche) Sie daran hindert, XHR an einen anderen Server als den zu senden, von dem Ihre Seite generiert wird.
Späte Reaktion. Wissen Sie, ich war in den letzten Monaten beschäftigt und hatte keine Zeit, all Ihre Beiträge zu lesen, aber an Sonntagnachmittagen wie diesen habe ich Zeit dafür und habe diesen Beitrag wirklich genossen. Ich lerne immer noch jQuery (und auch ein wenig Mootools in letzter Zeit) und das ist sehr interessantes Zeug. Danke!
Ich bin mir nicht sicher, ob das nur bei mir so ist, aber es scheint nicht zu validieren. Alle Fehler sind Verweise auf das Skript.
Validierungs-URL
Man sollte etwas über Sweetcron sagen, einen neuen **Open-Source**-„Lifestreaming“-Dienst, der die vollständige Kontrolle über Stil, Feeds usw. ermöglicht. Außerdem kann er auf Ihrer eigenen Domain gehostet werden!
Kann ich mit dem, was Sie oben geschrieben haben, mein eigenes Twitter erstellen?
Bitte … ich plane, mein eigenes Twitter zu machen.
Wow!! Es wird immer besser. Mach weiter so, Mann.,
Noch nicht, es gab Gerüchte, dass dA eine API machen würde. Aber ich habe in letzter Zeit nichts mehr davon gehört
Ich liebe dich so sehr! Toller Ort zum Besuchen!,
Könnte ich die Größe des Bildes (Flickr) auf das quadratische Format 75 x 75 ändern?
Und funktioniert das?
Hallo Chris, wirklich tolle Anleitung. Ich nehme an, Sie oder jemand anderes können mir sagen, wie ich
a) Die Anzahl der von ScrnShots abgerufenen Screenshots mit Ihrer oben genannten Methode begrenzen.
b) Nur Screenshots abrufen, die in ScrnShots als Favoriten markiert sind?
Vielen Dank im Voraus für jeden Hinweis :)