Erstellen Sie ein benutzerdefiniertes Twitter-Widget ohne Plugin

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>&lt;li&gt;Twitter feed loading&lt;/li&gt;</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 &lt;/body&gt;-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!