Wie binde ich eine Twitter-Timeline in die Sidebar meines Tumblr-Blogs ein?

Wie in diesem Beitrag beschrieben, gibt es zwar keine Möglichkeiten, bei Tumblr Plugins zu installieren. Auch ist der Funktionsumfang je nach Theme-Auswahl eventuell etwas eingeschränkt.
Trotzdem ist es möglich, ein recht schlicht gehaltenes Template aufzupimpen. Das möchte ich anhand der Einbindung einer Twitter-Timeline in die Sidebar beschreiben.

Wenn ihr Euch erst einmal mit der html-Datei Eures Tumblr-Blogs vertraut gemacht habt, ist es nach einer Weile gar nicht mehr schwierig, die Positionen zu finden, an denen ihr zusätzliche Funktionen einbinden möchtet.

Twitter-Timeline konfigurieren

Über das Zahnradsymbol meines Twitter-Accounts klicke ich auf “Widgets” und erstelle eines.

Eine Beschreibung darüber, welche Einstellungen ich explizit gewählt habe, kann ich wohl getrost überspringen. Probiert einfach aus, welches Erscheinungsbild Euch am besten gefällt.

Allerdings habe ich nach Einbindung festgestellt, dass mir der weiße Hintergrund und das Eingabefeld unter der Timeline nicht gefällt.

Unter dem Link die individualisierte Dokumentation wird näher erläutert, wie ich dessen Darstellung verändern kann. Der Code meiner Twitter-Timeline sieht nun so aus:

<a class="twitter-timeline" width="250" height="400" href="https://twitter.com/Sylsurium" data-chrome="nofooter transparent" data-widget-id="338412860822650880">Tweets von @Sylsurium</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Wo einfügen?

Ich habe eine Sicherung der kompletten html-Datei meines Themes angelegt. Diese öffne ich mit einem Texteditor (z. B. Notepad++) und suche nach dem Begriff “sidebar”. Anschließend merke ich mir die Zeilen-Nummern des ausgewählten Bereiches.

Ihr könnt natürlich auch direkt im Backend Eures Tumblr-Blogs und über die Tastenkombination Strg + F nach diesem Begriff suchen. Aber habt ihr dort eine fehlerhafte Veränderung vorgenommen und bereits abgespeichert, ist die Fehlersuche im schlimmsten Fall sehr aufwendig.

Außerdem finde ich die Anzeige in Notepad++ übersichtlicher als in dem angezeigten html-Fenster von Tumblr und kann die modifizierte Datei sofort lokal abspeichern.

Über Anpassen gelange ich in den Backendbereich meines Themes. Dann schaue ich in der html-Datei nach dem entsprechenden Nummernbereich.

Dort wähle ich die Position nach der Anzeige der gelikten Beiträge und Follower und füge das Script – wie auf dem folgenden Screenshot zu sehen – ein.

Anschließend schaut ihr über den “Preview-Button” nach, ob Euch die Anzeige gefällt, freut Euch, dass es geklappt hat und speichert das Ganze in der Vorschaufunktion ab. :-)