Ich wurde ein paar Mal gefragt, welchen WordPress-Plugin ich benutze, um die „Twitter Feed“-Liste im Footer meiner Website zu generieren. Ich benutze eigentlich gar kein Plugin, es ist ein Javascript-Snippet von Twitter, das eine Liste meiner letzten Tweets anzeigt, die ich mit CSS gestaltet habe. In diesem Tutorial zeige ich Ihnen:
- Den notwendigen HTML- und Javascript-Code, um die neuesten Tweets abzurufen
- Eine Übersicht über das HTML-Markup und die zugehörigen CSS-Selektoren
- Zwei Beispiele für individuell gestaltete Twitter-Widgets, die ich selbst verwendet habe
Lesen Sie weiter, um den Rest des Tutorials zu sehen...
Das HTML und Javascript
Twitter stellte diesen Code früher auf seiner Website zur Verfügung, aber aus irgendeinem Grund entfernten sie ihn zugunsten dieser <a id="x1">viel unflexibleren Widgets</a>. Sie benötigen zwei Code-Teile.
Platzieren Sie zuerst den folgenden Code dort, wo die Liste angezeigt werden soll:
<ul id="twitter_update_list"><li>Twitter feed loading</li></ul><strong>Hinweis:</strong> Das <code><li>Twitter feed loading</li></code> ist kein Teil des ursprünglichen Codes, den Twitter bereitgestellt hat, aber es ist erforderlich, um das HTML zu validieren. Es kann auch eine nützliche Nachricht anzeigen, während der Feed geladen wird, da dies an einem langsamen Tag einige Sekunden dauern kann.
Zweitens müssen Sie die folgenden Zeilen Javascript <strong>so nah wie möglich am </body>-Tag</strong> platzieren.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>Ich habe ihn derzeit direkt über meinem Google Analytics-Code. Sie sollten diese Javascript-Zeilen so weit unten wie möglich auf der Seite belassen, denn falls Twitter nicht lädt, hängt alles unter diesem Code (was keine große Sache ist, wenn er bereits am Ende steht).
Übersicht über HTML-Markup und CSS-Selektoren
Jetzt können Sie das HTML-Markup, das das Twitter-Widget generiert, nicht sehen, ohne etwas wie die Web Developer Toolbar zu verwenden. Glücklicherweise habe ich das für Sie erledigt. Hier ist eine Beispiel-Liste mit nur einem Tweet als Beispiel.
<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>- <code>#twitter_update_list</code> – Wählt die gesamte Liste aus
- <code>#twitter_update_list li</code> – Wählt einzelne Listenelemente aus
- <code>#twitter_update_list li span</code> – Wählt den „Tweet“-Teil des Listenelements aus, nicht den „vor X Zeit“-Link
- <code>#twitter_update_list li span a</code> – Wählt den Link innerhalb des „Tweet“-Teils des Listenelements aus
- <code>#twitter_update_list a[style="font-size: 85%;"]</code> – Wählt den „vor X Zeit“-Link auf eine etwas umständliche Weise aus (siehe Hinweis unten).
<strong>Hinweis:</strong> Da der „vor X Zeit“-Link einen Inline-Stil hat, der die Schriftgröße auf 85 % setzt, ist es etwas schwierig, ihn ohne umständlichen Code zu überschreiben. Ich habe dies zuvor verwendet, um die Schriftgröße auf die gleiche wie den Rest der Liste zurückzusetzen:
#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }Das funktioniert in frühen IE-Versionen wegen des „!important“-Teils wahrscheinlich nicht. Sie können auch <code>display: block;</code> verwenden, um diesen Link in die nächste Zeile zu verschieben.
Live-Beispiel
Ein Live-Beispiel finden Sie im Footer von <a id="x1">Theme Lab</a>. Oder wenn Sie dies in Ihrem Feedreader oder auf einer nicht autorisierten Scraper-Website lesen, sehen Sie sich den Screenshot unten an.
Hier ist der Code, den ich für die Liste verwende:
#twitter_update_list {
font-size: 13px;
line-height: 21px;
list-style: none;
}
#twitter_update_list li {
background: url('images/twitter-divider.gif') bottom left repeat-x;
padding-bottom: 7px;
margin-bottom: 9px;
}
#twitter_update_list span, #twitter_update_list span a {
color: #ababab;
text-decoration: none;
}
#twitter_update_list a {
color: #6f7276;
}- Die erste Zeile wählt die gesamte Liste aus. Sie legt die Schriftgröße, die Zeilenhöhe fest und stellt sicher, dass keine Aufzählungspunkte angezeigt werden.
- Die zweite Zeile wiederholt ein kleines 2×1-Bild unter jedem Listenelement als eine Art Trennlinie. Der Innenabstand legt den Abstand zwischen dem Tweet und dem oberen Rand der Trennlinie fest. Der Außenabstand legt den Abstand zwischen dem unteren Rand der Trennlinie und dem nächsten Tweet fest.
- Die dritte Zeile legt die Farbe des Tweets, einschließlich Links, fest und stellt sicher, dass unter den Links keine Linien angezeigt werden.
- Die letzte Zeile legt die Farbe des „vor X Minuten“-Links fest.
Und das ist alles! Wenn ich eine Sache ändern müsste, würde ich die Links im Tweet irgendwie unterscheiden und vielleicht auch Hover-Effekte auf Links hinzufügen.
Das kann auf jeder Website verwendet werden
Im Gegensatz zu all den anderen Anleitungen zum Erstellen von XYZ ohne Plugin-Posts gibt es in diesem Tutorial keinen tatsächlichen WordPress-Code.
Da hier kein WordPress-Code verwendet wird, ist er nicht in der Sammlung WordPress-Tutorials enthalten. Er kann auf so ziemlich jeder Art von Website verwendet werden, vorausgesetzt, Sie können HTML-Quellcode und CSS bearbeiten.
Wenn Sie es innerhalb von WordPress verwenden möchten, würde ich vorschlagen, Ihre Theme-Dateien manuell zu bearbeiten, um die beiden Zeilen Javascript im Footer Ihrer Website einzufügen, oder es sogar in Ihren wp_footer()-Hook einzuhängen.
Was das Widget selbst betrifft, können Sie den Code entweder in ein Text-Widget einfügen oder ihn manuell in Ihre Seitenleiste (oder wo auch immer) einfügen.
Fazit
Ich hoffe, euch allen hat das Tutorial gefallen. Ich würde mich freuen, Ihre Gedanken in den Kommentaren zu hören. Wenn Sie Wünsche für schnelle WordPress- oder CSS-Tipps haben, lassen Sie es mich gerne wissen. Es könnte in einem zukünftigen Tutorial Tuesday-Post bei Theme Lab vorgestellt werden!
Ich wollte nur anmerken, dass die 2. Zeile des Javascript-Codes nicht mehr funktioniert. Für alle, die dies implementieren, stellen Sie bitte sicher, dass Sie die 2. Zeile des Codes durch die folgende ersetzen:
Leland, Sie möchten Ihren Beitrag vielleicht aktualisieren, um dies widerzuspiegeln.
Rich – es sieht so aus, als wäre Ihr Code verschwunden… können Sie bitte versuchen, mit einigen Leerzeichen zu posten???
Danke
Es sieht so aus, als würde das nicht mehr funktionieren. Irgendwelche Ideen?
Sehr geehrter Leland,
Wissen Sie, warum die Twitter-Feed-App, die Sie auf Ihrer Website veröffentlicht haben, nicht mehr funktioniert. Selbst auf Ihrer eigenen Website funktioniert sie nicht.
Ich hoffe, von Ihnen zu hören.
Mit freundlichen Grüßen,
André van Wijngaarden
Twitter hat im Grunde die URL für seine Feeds geändert. Zugegebenermaßen funktionierte alles andere noch, ich hatte angenommen, dass dies der Fall sein könnte.
——
Anstatt die im obigen Tutorial angegebene URL zu verwenden: http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3
...Sie möchten die URL verwenden, die ich bereitstelle und die folgt:
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USERNAME&include_rts=true&count=3&callback=twitterCallback2
Der „count“ befindet sich jetzt inmitten der URL anstatt am Ende, zusammen mit dem Benutzernamen.
Viel Spaß.
<3 ~ CaT
Mein Kommentar wartet noch auf Moderation, aber ich habe die Lösung auf der Website für Twitter-Entwickler gefunden.
https://dev.twitter.com/discussions/11701
Ändern Sie dies:
zu diesem:
Diese Methode funktioniert nicht mehr?
Ich sehe, dass diese Website dasselbe Problem in Ihrem Footer-Widget hat.
Irgendwelche Updates?
Aus irgendeinem Grund funktioniert das auf meinem Blog nicht mehr. Haben Sie eine Idee, warum?
Ich musste zu einem jQuery-Widget für den Rest meiner Website wechseln, aber das funktioniert nicht in WordPress 🙁
Funktioniert das noch? Ich sehe nur den "Twitter-Feed wird geladen"-Teil. Wenn nicht, haben Sie eine andere Methode?
Ich habe diese Methode auf einigen Kunden-Websites verwendet. Sie ist kürzlich generell ausgefallen. Es scheint, dass sie hier (themelab.com) im Footer auch nicht funktioniert.
Ahhh! Hat jemand eine Lösung?
Der hier verwendete API-Aufruf „http://twitter.com/statuses/user_timeline/USERNAME.json?“ wurde veraltet, ersetzen Sie ihn also durch Folgendes:
https://api.twitter.com/1/statuses/user_timeline.json?screen_name=USERNAME&count=2&callback=twitterCallback2
Gibt es eine Möglichkeit, die Liste komplett horizontal zu gestalten?
So dass alle drei Tweets nebeneinander angezeigt werden, anstatt übereinander gestapelt?
(Ich benutze es als Laufschrift)
Ich möchte, dass der erste Tweet durchläuft, dann der 2. Tweet... und so weiter.
Anstatt dass alle 3 gleichzeitig angezeigt werden.
Entschuldigung, dass ich einen so alten Beitrag wieder aufgreife. Ich habe Ihren Code implementiert und er funktioniert hervorragend für IE9, lädt aber nicht für FF 14. Ich hatte auch ähnliche Probleme mit Twitter-Plugins. Chrome, Blackberry funktionieren alle gut und laden. Könnte es ein Problem mit meinem CSS und etwas anderem sein, das dazu führt, dass es in FF hängt?
Im Sinne von anderen N00bs wie mir: Ersetze USERNAME im obigen Code durch deinen tatsächlichen Twitter-Benutzernamen. 😉
Danke dafür!
Du kannst auch den Zeitstempel-Link mit einer Pseudo-Klasse ansprechen:
#twitter_update_list a:last-childBrillantes Tutorial. Danke.
Kannst du mir sagen, wie ich den "ago"-Link rechts unten vom Text wegbekomme, so wie du es auf deiner Website hast.
Vielen Dank
Falls jemand an der Übersetzung des "time ago"-Links in andere Sprachen interessiert ist, sage ich euch, dass ich gerade blogger.js heruntergeladen, modifiziert und es funktioniert.
Du musst nur die Beschriftungen übersetzen, am Code nichts ändern, hier ist ein Beispiel.
if (delta < 60) { return 'vor weniger als einer Minute'; } else if(delta < 120) { return 'vor etwa einer Minute'; } else if(delta < (60*60)) { return 'vor ' + (parseInt(delta / 60)).toString() + ' Minuten'; } else if(delta < (120*60)) { return 'vor etwa einer Stunde'; } else if(delta < (24*60*60)) { return 'vor ' + (parseInt(delta / 3600)).toString() + ' Stunden'; } else if(delta < (48*60*60)) { return 'vor einem Tag'; } else { return 'vor ' + (parseInt(delta / 86400)).toString() + ' Tagen'; }
Übrigens, vielen Dank für das Tutorial, es hat mir sehr geholfen.
Hallo Leland,
Danke für dein Skript! Funktioniert fast so, wie ich es möchte... Gibt es eine Chance, die Größe der Liste zu korrigieren? Ich möchte die Liste in einer Zelle generieren, aber wenn die Tweets die Zelle überschreiten, explodiert die Zelle!
Fantastisch, aber ich bekomme kein Ergebnis (.js-Anfänger). Meine Seite (callumflack.com) zeigt nur "twitter feed loading" an, ohne den Twitter-Feed tatsächlich zu laden. Ich habe alles in diesem Beitrag doppelt geprüft, aber nichts hilft. Was habe ich übersehen? Deine Hilfe wird sehr geschätzt.
Danke dafür 🙂 Du kannst die Links innerhalb der Tweets mit '#twitter_update list span' ändern, dann die Zeit der Tweets mit '#twitter_update list span a'. Außerdem entfernt ':last-child' die horizontale Linie unter dem letzten Tweet. Siehe unten für meinen Code.
#twitter_update_list { font-size: 10px; line-height: 15px; list-style: none; }
#twitter_update_list li { background: url(‘images/1px-grey.gif’) bottom left repeat-x; padding-bottom: 10px; margin-bottom: 10px; }
#twitter_update_list li:last-child { background: none; }
#twitter_update_list span { color: #856f6a; text-decoration: none; display: inline; }
#twitter_update_list span a { color: #fb3898; display: inline; }
#twitter_update_list a { color: #b3a39f; display: block; }
Keine Sorge, ich habe es herausgefunden. Es ist das:
http://api.twitter.com/1/favorites.json?screen_name=USERNAME&callback=twitterCallback2&count=5
Danke dafür. Für diejenigen, die gefragt haben…
Sie können dies in eine Liste ändern, indem Sie den ersten Teil der URL im zweiten Skript von ändern:
http://twitter.com/statuses/user_timeline/USERNAME.json?
zu
http://api.twitter.com/1/USERNAME/lists/LISTNAME/statuses.json?
Hallo,
Gutes Tutorial. Meine Website zeigte jedoch 3 Tweets an, jetzt ist sie sehr sporadisch und manchmal entscheidet sie sich, 2 oder 1 anzuzeigen.
Bin ich hier dumm?
Rob
Das ist eine gute Frage. Mir ist aufgefallen, dass, wenn Sie etwas retweeten (im offiziellen Twitter-Stil), es nicht angezeigt wird und stattdessen nur ein Tweet weniger angezeigt wird.
Ich mag die Art und Weise, wie die offiziellen Twitter-Feeds aussehen, überhaupt nicht, daher war ich froh, Ihre Website zu finden. Das Tutorial war sehr informativ und leicht zu befolgen, und ich kann es kaum erwarten, dies in die Neugestaltung meiner Website zu integrieren.
Toller Artikel.
Musste nur das & top & ändern, damit das HTML validiert.
Gute Arbeit!
Ich weiß, dass dies vor einer Weile gepostet wurde, aber gibt es eine Möglichkeit, den neuesten Tweet von den vorherigen Tweets zu trennen, damit Sie ihnen ein Label wie „Neuester Tweet“ und „Ältere Tweets“ geben können?
Liebe das! Gibt es eine Möglichkeit, Links in jedem Tweet zu erzwingen, sich in einem neuen Fenster zu öffnen?