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!
Brillantes 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?
Ich bin mir nicht sicher, wohin die einzelnen Code-Teile auf meiner WP-Seite gehören – können Sie das bitte bestätigen…
1. Teil – wo ich den Feed haben möchte (z. B. Text-Widget)?
2. Teil – Stylesheet?
3. Teil – ?
4. Teil – ?
5. Teil – ?
Vielen Dank im Voraus
Ich fühle mich dumm… Aber… Wo schreibt man den Benutzernamen hin??? Ich verstehe es nicht… Wenn ich kopiere/einfüge, funktioniert es nicht…
Das ist ein cooles kleines Widget. Eine Anmerkung – wenn Sie ein „position: relative;“ zu dem HTML-Element hinzufügen, das „overflow: auto;“ hat, beheben Sie einen Fehler, der in IE7 auftrat (im Grunde funktionierte die Scrollbox nicht).
Sehr schönes Tutorial, das einzige Problem dabei ist (es sei denn, ich habe etwas falsch gemacht), dass nur Ihre persönlichen Tweets angezeigt werden, aber nicht zum Beispiel, wenn Sie etwas retweeten. Was ein Mist ist :/
Ändern Sie einfach
count=3zucount=6im Javascript-Snippet.Hallo,
Ich denke, wenn Sie Ihr Javascript ändern, um „&include_rts=1“ direkt nach Ihrem Benutzernamen einzufügen, zum Beispiel: http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6.
Hier ist ein Beitrag, den ich geschrieben habe, wie man Retweets in den benutzerdefinierten Twitter-Feed aufnimmt – http://icode4you.net/including-retweets-in-your-custom-twitter-feeds.
Hallo,
Danke für deinen tollen Beitrag und deine Arbeit. Ich benutze deine Twitter-Methode auf meiner Homepage und liebe sie.
Im Moment werden 3 Tweets angezeigt. Kann ich das auf 6 verdoppeln?
Danke im Voraus!
Grüße
Xavier
Danke dafür, das ist GENAU das, was ich für meine Website brauche – hat wie am Schnürchen funktioniert!
Gibt es eine Möglichkeit, diesen Code mit mehreren Twitter-Feeds zu verwenden? Sagen wir, ich möchte den Feed von jemand anderem direkt unter dem ersten auf derselben Seite einfügen, wie würde ich das machen?
Danke.
Das ist eine wirklich gute Frage, aber ich bin mir nicht sicher, ob es mit dieser Methode möglich ist, da der Feed direkt an einen einzelnen Benutzernamen gebunden ist.
Ich habe das Gefühl, wenn du mehrere Zeilen von
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>mit verschiedenen Benutzernamen hinzufügen würdest, würde es irgendwie durcheinander geraten.Tolles Tutorial. Ich habe genau nach so etwas gesucht.
Eine Frage: Ist es mit diesem Code möglich, den Feed eines bestimmten Benutzers durch eine bestimmte Twitter-Liste zu ersetzen?
Gute Frage, obwohl dieser Code meines Wissens nur für bestimmte Benutzer funktioniert.
Wirklich exzellentes Tutorial, besonders der „vor X Zeit“-Hack. Vielen Dank fürs Posten!
Genau das, was ich für mein Redesign brauche. Danke dafür.
Vielen Dank für diesen einfachen Rat! Es hat auf einer Website funktioniert, die aus irgendeinem Grund Javascript deaktiviert hat. Es werden keine Grafiken angezeigt, aber es funktioniert! Und Links (wie twitpic & bit.ly) funktionieren auch!
Großartige Arbeit, Kumpel!
Fantastisch hilfreich, danke. Interessant, dass http://twitter.com/javascripts/blogger.js und ähnliche noch da sind, ohne offensichtliche Links von twitter.com.
Nun, hoffentlich werden sie es aus Legacy-Gründen noch eine Weile unterstützen, viele Leute benutzen es immer noch.
Ich weiß nicht, warum Twitter diese Widgets von seiner Website entfernt hat, aber früher, als ich sie auf meiner Blogger-Website verwendet habe, funktionierten sie sehr gut.
Ich denke, sie haben es zugunsten ihrer „gebrandeteren“ Widgets entfernt, obwohl der Code, den sie früher hatten (derselbe Code, den ich verwende), immer noch funktioniert.