Quicktip: WordPress mit Twitter verbinden – Sidebar Edition

Vor einiger Zeit habe ich mir Gedanken darüber gemacht, ob man den Microblogging Dienst Twitter nicht für SEO-Zwecke missbrauchen kann.
Nehmen wir mal folgenden Ansatz her: Suchmaschinen mögen wenn sich auf der Startseite etwas tut, also wenn auch mal wechselnder Content verfügbar ist.
Wer aktiv twittert produziert zwar kleinen, aber jedesmal Unique Content. Wie wäre es nun, wenn wir diesen Content in einer beliebigen Größe auf unserer Seite ausgeben könnten? Das wäre prima, außerdem würde es die Nähe zum Besucher festigen. Das schöne ist das Ganze geht mit nahezu (bzw. geht mit jedem) System, auch für statische Seiten! Heute wollen wir uns einmal anschauen wie das unter dem Blogsystem WordPress funktioniert. Genauer gesagt nehmen wir uns heute die Sidebar vor.

Wir legen das Werkzeug bereit

Machen wir uns zunächst einmal Gedanken darüber was wir benötigen. Ich möchte ja nicht nur erklären wie es geht, sondern auch etwas Verständnis vermitteln damit auch alle etwas davon haben. Wir benötigen neben unserer WordPress Installatin natürlich auch eine Programmierumgebung. Wer minimalistisch arbeiten möchte, kann gern den Texteditor nehmen oder auch etwas komfortablere Programme wie z. B. Coda benutzen. Desweiteren benötigen wir die Datei in der das ganze eigebunden werden soll, in diesem Fall die sidebar.php. Für optische Anpassungen bearbeiten wir unsere style.css

Die Sidebar von WordPress mit Twitter verbinden

Wer seine Sidebar selber programmiert, weiß das die Sidebar von WordPress mit einer unordered List aufgebaut wird. Ich denke mal das muss nicht unbedingt so sein, aber es ist doch leichter sowas zu formateieren. Wir suchen uns jetzt also die passende Stelle heraus, in welcher wir unsere letzten 3 Tweets anzeigen lassen möchten. Wir schauen also wo ein Listenelement aufhört und fügen hinterher folgenden Code ein:


<li>
<h3>Twitter-Meldungen</h3>
<div id="twitter_div"><ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/seogeekde.json?callback=twitterCallback2&count=3"></script>
</li>

Was sehen wir hier? Wir erstellen ein neues Listenelement und füllen diesen mit etwas Leben. Optional können wir wie hier eine Überschrift vergeben, um das ganze etwas vom restlichen Inhalt abzutrennen.
Wir erstellen nun zwei Divs mit ID in denen das Javascript von Twitter die Daten einfügen wird. Die erste Zeile öffnet quasi die Verbndung unseres WordPress Blogs zu Twitter. In der zweiten Zeile vergeben wir den User welcher aufgerufen werden soll und mit &count=3 die Anzahl der Posts.

Die Twitter-Sidebar von WordPress optisch anpassen

Nun ich bin zwar kein Grafiker oder Layouter aber den Div von Wrdpress können wir ein wenig anpassen, z. B. an der Breite. Hier ist was ich eingegeben habe:


/* Twitter */

#twitter_div {
padding-left: 5px;
width: 165px;
}

#twitter_update_list li{
padding-bottom: 8px;
padding-top: 8px;
line-height: 1.2em;
border-bottom: 1px dashed #FFF;
}

/* Twitter */

Hier sagen wir nur, dass der Div der Twitter beinhalten wird 165px breit sein soll. Dieser Wert variiert je nach dem eigenen Template des WordPress Blogs, bzw. der Breite der WordPress Sidebar.
Die zweite Anweisung soll die Linienhöhe etwas anheben, den Abstand nach oben und unten verringern sowie nach jedem Tweet eine gestrichelte Linie anzeigen.

Geschafft!

War nicht allzu schwer Twitter in die Sidebar von WordPress einzubauen, oder? Wir haben jetzt den Vorteil, dass immer unsere aktuellsten 3 Tweets angezeigt werden, das wiederum bedeutet, dass bei jeder Statusänderung in Twitter diese Änderung auch auf unserem WordPress Blog in der Sidebar sichtbar wird. Demnach haben wir dann so oft wie wir tweeten auch neuen und frischen Content auf unserer Webseite. Schreibt mir Eure Erfahrungen oder Verbesserungsvorschläge in den Kommentaren. Ich bin gespannt was Ihr so darüber denkt.

Lade Dir diesen Post als pdf-Datei herunter: Quicktip: Wordpress mit Twitter verbinden - Sidebar Edition (428)

Alle Posts der Woche 29 / 2009 anschauen

Fandest Du den Beitrag interessant?

Der Beitrag ist mir etwas wert:
Fatal error: Call to undefined function the_flattr_permalink() in /var/www/html/web1028/html/seo-geek-de/wp-content/themes/seogeek/single.php on line 48