TripleFlap

Version 1.2.1 | 17.10.2012

Der TripleFlap ist ein animierter fliegender Twitter-Vogel für die eigene Webseite, der sich auf zufälligen HTML-Elementen niederlässt und immer im sichtbaren Bereich des Fensters bleibt.
Wenn man mit dem Mauszeiger über den Vogel fährt, werden neben dem neusten Tweet in einer Sprechblase auch ein "tweet this"- und ein "follow me"-Button angezeigt. Der Vogel selbst verweist wie der "follow me"-Link auf den Twitter-Account.
Wenn der Benutzer wegscrollt und der Vogel somit aus dem Fensterausschnitt verschwindet, versucht er sofort wieder in den sichtbaren Teil der Webseite zu fliegen.
Falls sich der interaktive Vogel vor ein Bild oder einen Textausschnitt setzt und diesen dadurch verdeckt, kann man mit dem Cursor vor ihm "herumfuchteln" um ihn zu "verscheuchen", worauf er sich an einem anderen Ort ein neues Plätzchen sucht.

► Download (zip · 93 KB)
► auch als Plugin für Wordpress und Joomla! (von externen Personen erstellt)
► Infos zur Installation weiter unten


Mindestanforderungen

TripleFlap sitzend
  • JavaScript-fähiger Browser
  • PHP 5 (empfohlen)
    • Extension: SimpleXML (empfohlen)
    • Extension: cURL (empfohlen)
  • ein Twitter-Account (empfohlen)

Bei Benutzung ohne PHP kann der neuste Tweet nicht angezeigt werden. Bei fehlender cURL-Extension oder SimpleXML-Extension ist die korrekte Funktion der Anzeige des neusten Tweets zwar möglich aber nicht gewährleistet.

Installation

  1. Lade das Zip-Archiv herunter und entpacke es in das Verzeichnis tripleflap.
  2. Speichere das Verzeichnis tripleflap mitsamt Inhalt Root-Verzeichnis der Domain, sodass das TripleFlap-Script unter http://example.com/tripleflap/tripleflap.js erreichbar ist. Das Verzeichnis kann natürlich auch anders benannt werden, allerdings sind dann die Pfade anzupassen.
  3. TripleFlap im Gleitflug Kopiere nun den Scriptcode der beiliegenden HTML-Datei embed.html in die gewünschte(n) Webseite(n).
    Die Variable twitterAccount beinhaltet den Account-Namen bei Twitter, z.B. "floern". Dieser wird für "follow me" sowie für den neusten Tweet verwendet.
    Die Variable showTweet steuert die Anzeige des neusten Tweets in der Sprechblase. Wenn true, dann wird der Tweet angezeigt, wenn false, nicht.
    Die Variable tweetThisText beinhaltet den Status-Text für die "tweet this"-Funktion mit maximal 140 Zeichen. Diese Variable muss nicht zwingend definiert werden.
    Falls man keinen Twitter-Account besitzt, ist es auch möglich, eine beliebige URL, z.B. auf ein RSS-Feed, zu verlinken. Dazu wird die URL in die Variable otherPageOrFeed gespeichert.
  4. In der JavaScript-Datei können die Pfade zu den verknüpften Dateien und weitere Einstellungen wie die Animationsgeschwindigkeit geändert werden. Beschreibungen der einzelnen Variablen in der JavaScript-Datei sind in der Datei tripleflap-commented.js mit den Kommentaren zu finden.
  5. Die JavaScript-Datei liegt doppelt vor: Einmal mit minimiertem Code und einmal mit leserlichem Code inkl. Kommentare.
  6. Wenn der aktuellste Tweet angezeigt werden soll, muss PHP Schreibrechte für das Verzeichnis tripleflap besitzen.
  7. Wenn alles korrekt eingerichtet wurde, ist der Twitter-Vogel nun flugtauglich und funktionsfähig. Siehe auch Mögliche Probleme

Programm-Dateien

TripleFlap im Steigflug
  • tripleflap.js - die zentrale JavaScript-Datei, welche von der Webseite eingebunden wird.
  • tripleflap-commented.js - dieselbe Datei wie die tripleflap.js, allerdings mit leserlichem Code und beschreibenden Kommentaren.
  • embed.html - enthält den HTML-Code um die JavaScript-Datei in die Webseite einzubinden.
  • birdsprite.png - die Grafik mit den Sprites für die Animation und Buttons.
  • twitterfeedreader.php - die PHP-Datei, welche das RSS-Feed mit dem neusten Tweet des Twitter-Accounts ausliest und ihn über Ajax an die JavaScript-Engine überliefert.
  • tweetcache.account.tmp - enthält den zwischengespeicherten neusten Tweet im HTML-Format.

Bedienung des Vogels

  • Beim Aufruf der Seite mit dem TripleFlap fliegt der Vogel automatisch in den sichtbaren Bereich der Seite.
  • Der Vogel wählt ein existierendes HTML-Element aus, auf das er sich niederlassen kann.
  • Scrollt der Benutzer weg, sodass der Vogel nicht mehr im sichtbaren Bereich ist, sucht sich der Vogel ein neues Ziel im sichtbaren Fensterausschnitt.
  • Twitter-Vogel mit Buttons und neustem Tweet Wenn der Benutzer mit dem Cursor auf den sitzenden Twitter-Vogel zeigt, erscheinen die beiden Buttons "tweet this" und "follow me", welche für die entsprechenden Funktionen zuständig sind. Der Vogel selbst ist mit dem Account bei Twitter verlinkt, also äquivalent zum "follow me"-Button. In einer Sprechblase wird der neuste Tweet des angegebenen Users angezeigt. Im Tweet werden @Benutzernamen und Hyperlinks automatisch verlinkt. Bei Kurz-URLs wird die Ziel-URL ermittelt, welche dann als Link-Ziel angegeben.
  • Wenn man mit dem Cursor innert kürzester Zeit mehrmals über den Vogel fährt, fliegt der Vogel an einen anderen Ort. So kann man den Vogel "verscheuchen", falls er die Sicht auf den Text oder ein Bild versperrt.

Technisches

  • Das RSS-Feed der Tweets des Twitter-Benutzers wird über die Datei twitterfeedreader.php ausgelesen. Die HTTP-Abfrage wird über die PHP-Extension cURL bewerkstelligt oder über file_get_contents(), falls cURL nicht zur Verfügung steht. Die RSS-Datei wird mit SimpleXML verarbeitet, wenn diese Extension vorhanden ist.
  • Der über das RSS-Feed ausgelesene neuste Tweet wird in der Datei tweetcache.username.tmp für 15 Minuten zwischengespeichert.
  • Die Ausgabe der PHP-Datei twitterfeedreader.php wird mittels Ajax (Post-Request) an die JavaScript-Engine übertragen.
  • Alle Grafiken werden in der Datei birdsprite.png zusammengefasst und als CSS-Sprite angezeigt bzw. animiert. Ein Sprite des Vogels ist 64 mal 64 Pixel gross.
  • Diverse CSS-Eigenschaften werden über JavaScript definiert, siehe tripleflap.js. Nur die Formatierung der Hyperlinks in der Tweet-Sprechblase wird über die twitterfeedreader.php bestimmt.

Changelog

  • 1.2.1
     • Anpassung an neue Twitter-API
  • 1.2
     • Erkennung mobiler Endgeräte (Smartphones), keine Anzeige des Vogels bei mobilen Endgeräten
     • Möglichkeit der Verlinkung eines eigenen RSS-Feeds oder einer anderen Seite über den Vogel
     • Verschiebung der Hyperlink-CSS-Definition von twitterfeedreader.php nach tripleflap.js
     • Verkürzung diverser Variablen-Namen im JavaScript
     • beta-Vermerk entfernt
  • 1.1 beta
     • Sprechblase mit neuestem Tweet hinzugefügt
     • anstatt der URL des Twitter-Accounts wird nun der Twitter-Name verlangt
     • kleine Änderungen an der Grafik (Bird-Sprite), Bestandteile der Sprechblase hinzugefügt
  • 1.0 beta
     • erste veröffentlichte Version

Mögliche Probleme

  • PHP-Fehlermeldung: Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when in safe_mode or an open_basedir is set in twitterfeedreader.php on line 52
    Um dieses Problem zu beheben, kann die Zeile 52 (curl_setopt($req, CURLOPT_FOLLOWLOCATION, true);) in der Datei twitterfeedreader.php gelöscht werden.
  • HTTP-Statuscode 400 Bad Request: Die URL zur Twitter-API hat sich möglicherweise verändert. Die Feed-URL in der Datei twitterfeedreader.php muss entsprechend angepasst werden.

Vorschau

Der animierte Twitter-Vogel ist hier auf dieser Seite eingebunden.

Siehe auch