Twitter ist @Anywhere

Wer heute regelmäßig im Web unterwegs ist, dem läuft zwangsläufig ein bekannter Kurznachrichtendienst über den Weg: Twitter. Immer mehr Websites integrieren derzeit verschiedenste Twitter-Funktionalitäten. Beliebte Features sind beispielsweise Following-Buttons, mit denen man die neuesten Tweets des Website-Betreibers oder der Firma abonnieren kann, Retweet-Buttons zum komfortablen Weiterempfehlen von Inhalten oder die Anzeige der letzten Tweets.

Warum macht man das?

Der Grund für die Integration von Twitter in immer mehr Websites ist, dass Twitter inzwischen ziemlich viele Menschen erreicht. Twitter ist ein interessanter Marketingkanal geworden. Insgesamt hat die Website Twitter.com laut DoubleClick AdPlanner monatlich 2,8 Millionen Unique Visitors aus Deutschland. Das bedeuted, dass 2,8 Millionen Menschen in einem Monat die Website Twitter.com besuchen. Da Twitter sehr stark dezentral mit Desktop-Anwendungen und auf anderen Websites stattfindet, ist diese Zahl beachtlich und verdeutlicht, dass Twitter die Aufmerksamkeit von Website-Betreibern und Marketern absolut verdient hat.

Wie kommt Twitter auf Websites?

Bisher war es nur durch die Twitter-API möglich, Twitter-Funktionalitäten in die eigene Website zu integrieren (oder durch Plugins und Module für Content-Management-Systeme, die aber auch auf die Twitter-API zurückgreifen). API steht dabei für „Application Programming Interface“ und meint die Programmierschnittstelle von Twitter. Twitter ermöglicht Entwicklern nämlich sehr viele Zugriffsmöglichkeiten auf Twitter-Daten und -Funktionen. Das sorgt dafür, dass Twitter überall im Web mit verschiedensten Plugins und Mashups präsent ist.

Mit Twitter’s @Anywhere geht es einfacher

Damit es einfacher ist, Twitter in die eigene Website zu integrieren, und man sich nicht mit der API herumschlagen muss, gibt es seit dem 14. April 2010 etwas Neues: @Anywhere. Mit @Anywhere kann man durch ein paar Zeilen Javascript komplexe Twitter-Funktionalitäten auf der eigenen Website anbieten. Damit soll Twitter überall im Web noch präsenter werden, denn bei Twitter hat man eine Vision: Inhalte sollen nicht nur auf Twitter.com konsumiert werden, sondern auf allen Websites, auf denen sich die Menschen täglich bewegen.

Was @Anywhere kann …

@Anywhere bringt einige nette Funktionen, aber auch echte Killerfeatures mit:

Killerfeature 1: Tweet Box

Auf jeder Website kann nun die Tweet Box integriert werden, wie sie auch auf Twitter.com vorhanden ist:

Damit können die Besucher die Webseite direkt und sehr komfortabel bei Twitter weiterempfehlen. Dazu muss einfach nur ein Tweet direkt auf der Webseite verfasst werden. Beim Klick auf „Tweet“ öffnet sich ein kleines Popup, mit dem sich der Besucher dann mit seinen Twitter-Zugangsdaten anmelden kann. Dabei bleiben diese Daten bei Twitter. Durch Twitters sicheres Authentifizierungsverfahren „oAuth“ erhält der Website-Betreiber zu keinem Zeitpunkt Zugang zu den Userdaten.

Durch den Einsatz der Tweet Box kann der Seitenbetreiber eine bessere Verbreitung der eigenen Webinhalte erreichen, weil dies den Besuchern erleichtert wird: Keine Twitter-Software starten. Kein Eingeben von „www.twitter.com“ in die Adresszeile des Browsers. Einfach drauflostwittern.

Killerfeature 2: Hovercards

Ein weiteres abgefahrenes Feature von @Anywhere sind die sog. Hovercards. Befindet sich auf einer Website ein Twitter-Username, wird dieser nun automatisch interaktiv. Fährt man mit der Maus über den Usernamen, erscheint ein Tooltip mit Informationen zum Twitternutzer. Außerdem besteht in diesem Tooltip die Möglichkeit, dem Twitternutzer direkt zu folgen (es können also seine Tweets abonniert werden).

Followbuttons

Mit den Followbuttons, die @Anywhere anbietet, gibt es nun einen standardisierten Weg, einem Twitternutzer zu folgen.

User Login

Ein weiteres Feature von @Anywhere ist das User Login. Diese Möglichkeit ist weniger für normale Website-Betreiber interessant, sondern mehr für API-Entwickler. Da auch das User Login von @Anywhere den sicheren oAuth-Standard zur Authentifizierung verwendet, können Entwickler damit sichere Applikationen erstellen, welche keine Zugangsdaten speichern müssen. Die Connect-Buttons gibt es in verschiedenen Größen.

@Anywhere in die eigene Website integrieren

Die Integration von @Anywhere ist recht einfach. Alles was man dazu benötigt, sind ein paar Zeilen Javascript, die laut Twitter in folgenden Browsern funktionieren:

• Firefox 3.X
• Chrome 4
• Safari 4
• Opera 10
• Internet Explorer 6, 7 und 8

Hier liegt eine weitere große Stärke von @Anywhere: die Browserkompatibilität. Sogar Internet Explorer 6 wird in der Theorie unterstützt. In der Praxis kommt es bei Internet Explorer 6 und 7 hier allerdings manchmal noch zu Problemen, insbesondere wenn auf der Website noch andere Javascripts eingesetzt werden.

Im Folgenden soll anhand der Tweet Box und von Hovercards gezeigt werden, wie man @Anywhere nutzt.

Erste Schritte zu @Anywhere

Bevor man mit @Anywhere loslegen kann, sind ein paar Konfigurationen nötig:

1. App bei Twitter anmelden

Zuerst muss eine „App“ (Application) bei Twitter angemeldet werden. Dazu klickt man auf der Übersichtsseite von @Anywhere (http://dev.twitter.com/anywhere) auf „Start using it now“:

Nun sind die App-Infos gefragt:

• Der Application Name ist frei wählbar, wird aber später in den Tweets der Twitternutzer angezeigt. Deshalb bietet es sich an, die Domain der Website als Name zu verwenden, insbesondere deshalb, weil der Application Name in den Tweets mit der Application Website verlinkt ist.
• Die Description ist auch frei wählbar.
• Application Website: die URL der Homepage.
• Als Organization kann man seine Firma eintragen.
• Application Type: @Anywhere benötigt den Browser-Typ.
• Callback URL: Diese ist normalerweise identisch mit der Application Website.
• Default Acces Type: @Anywhere benötigt Read & Write.
• Und man kann noch ein Application Icon hochladen. Das Icon wird dann im Popup angezeigt, das der Besucher sieht, wenn er sich über die Website bei Twitter anmeldet.

Nachdem alles fertig eingetragen ist, wird man zu einer Seite weitergeleitet, von der man sich einen „Consumer Key“ (API Key) kopieren kann, der gleich im nächsten Schritt benötigt wird:

2. Das @Anywhere Javascript integrieren

Der nächste Schritt ist nun das Einbinden des @Anywhere Javascripts. Dazu muss nur der folgende Code an eine beliebige Stelle in einer HTML-Seite bzw. eines Templates geschrieben oder kopiert werden – idealerweise vor dem schließenden Body-Tag (</body>).

<script src="http://platform.twitter.com/anywhere.js?id=MEIN_API_KEY&amp;v=1"></script>

Man muss hier nur noch „MEIN_API_KEY” durch den API Key der neu registrierten App ersetzen.

3. Das twttr-Objekt nutzen

Nach dem Einbinden des Codes aus Schritt 2 steht das twttr-Objekt zur Verfügung. Mit diesem kann man nun die anywhere()-Funktion aufrufen:

twttr.anywhere(function (T) {
 // hier kommen dann die @Anywhere-Aufrufe rein
});

Tweet Box verwenden

Die Tweet Box lässt sich sehr einfach verwenden, indem in der Funktion anywhere() die Funktion tweetBox() aufgerufen wird. Dies passiert im folgenden Beispiel in Zeile 13:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Twitter @Anywhere</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 <div id="meine_tweet_box"></div>
 <script src="http://platform.twitter.com/anywhere.js?id=MEIN_API_KEY&amp;v=1"></script>
 <script type="text/javascript">
 twttr.anywhere(function (T) {
 T('#meine_tweet_box').tweetBox();
 });
 </script>
</body>
</html>

Der Funktion anywhere() wird ein Objekt übergeben (hier „T“ genannt). Auf dieses Objekt kann man die Funktion tweetBox() anwenden. Der Aufruf T('#meine_tweet_box').tweetBox(); bewirkt, dass das HTML-Element mit der ID „meine_tweet_box“ durch die Tweet Box ersetzt wird. Im Beispiel befindet sich dieses Element in Zeile 9. Das Ergebnis – also die fertige Tweet Box – sieht dann so aus, wie die Abbildung der Tweet Box unter „Killerfeature 1: Tweet Box“ weiter vorn im Artikel.
Jetzt möchte man natürlich nicht unbedingt „What’s happening?” über der Tweet Box stehen haben. Für manche Websites könnte die Tweet Box so auch zu breit oder zu schmal sein. Kein Problem: Man kann sie mit weiteren Parametern konfigurieren und so z. B. auch dafür sorgen, dass direkt schon etwas in der Box steht:

twttr.anywhere(function (T) {
 T('#meine_tweet_box').tweetBox({
 label:'Twittere das direkt:',
 defaultContent: '@websiteboosting: '+document.URL,
 onTweet:function(plain, html) {
 alert('Danke für den Tweet!');
 }
 });
});

In Zeile 3 gibt man mit dem Parameter „label“ einen Text an, der dann über der Tweet Box steht.
In Zeile 4 wird der Parameter „defaultContent“ angegeben. Nun steht in der Tweet Box „@websiteboosting:“ und die URL der Webseite. Diese URL könnte man auch mit einem URL-Shortener wie z. B. bit.ly oder redir.ec verkürzen. Diese Dienste bieten auch Programmierschnittstellen an. Man könnte einfach die URL des Dokuments einer API-Methode eines dieser URL-Shortener übergeben und dann gleich die gekürzte URL in der Box darstellen.
Es besteht auch die Möglichkeit zu bestimmen, was passieren soll, wenn der Besucher erfolgreich einen Tweet verfasst hat. So wird in den Zeilen 5 und 6 der Parameter „onTweet“ verwendet, um die Meldung „Danke für den Tweet“ auszugeben.
Diese Tweet Box sieht dann so aus:

Man kann aber noch weitere Einstellungen vornehmen, um die Tweet Box zu individualisieren. Beispielsweise kann man einstellen, ob der Counter oben rechts erscheint oder nicht oder wie breit die Tweet Box sein soll.

Hovercards verwenden

Der Einsatz von Hovercards ist sehr einfach. Man ruft einfach nur in der anywhere() Funktion die Funktion hovercards() auf. Das passiert im folgenden Beispiel in Zeile 5. Nun werden alle Twitter-Usernamen auf der Website automatisch interaktiv:

<p>Das ist ein Beispieltext, in dem Twitter-Usernamen stehen: @axelscheuering und @websiteboosting. Diese werden nun automatisch ein einen Link konvertiert & mit einer interaktiven Hovercard versehen.</p>
<script src="http://platform.twitter.com/anywhere.js?id=MEIN_API_KEY&amp;v=1"></script>
<script type="text/javascript">
 twttr.anywhere(function (T) {
 T.hovercards();
 });
</script>

Die Hovercard sieht dann so aus wie die Abbildung der Hovercard weiter vorn im Artikel.

Aber auch hier geht mehr. Wer möchte, dass die hovercards()-Funktion nur auf bestimmte Bereiche der Webseite angewendet wird, kann das steuern. Das könnte auch nötig sein – beispielsweise bei Blogs: Bei Diskussionen in den Kommentaren von Blogbeiträgen sprechen sich die Leser auch mit „@Kommentierername“ an. Hier könnte es zu Problemen kommen, wenn es den Kommentierernamen auch als Twitter-Username gibt. Die hovercards()-Funktion würde diese @-Erwähnung automatisch interaktiv mit dem gleichnamigen Twitternutzer verknüpfen.

Man umgeht diese Problematik, indem man einfach beim Aufruf der hovercards()-Funktion angibt, auf welche HTML-Elemente diese angewendet werden soll. Beispielsweise wie hier im Beispiel nur auf das Element mit der ID „content“:

twttr.anywhere(function (T) {
 T('#content').hovercards();
});

Wer könnte @Anywhere nutzen?

Prinzipiell jeder, der auf seiner Website halbwegs interessante Inhalte vorzuweisen hat. Klar – „unsere Formteileautomaten für die Verarbeitung von Polystyrol entsprechen allerhöchsten Sicherheitsstandards #Formteile“ würde wohl niemand twittern – selbst nicht mit @Anywhere. Wirklich Interessante Inhalte sind also gefragt.

Blogs könnten ihren Kommentarbereich um eine Tweet Box erweitern. Ebenso könnte ein Onlineshop die Tweet Box auf Produktdetailseiten einsetzen, damit die Kunden die Produkte im Shop weiterempfehlen können. Eine Firma könnte mit dem Followbutton auf den eigenen Twitter-Account aufmerksam machen. Hovercards könnten im Newsbereich eingesetzt werden und Erwähnungen von Personen in Nachrichten automatisch interaktiv mit deren Twitter-Accounts verknüpfen. Es gibt also vielfältige Einsatzmöglichkeiten für @Anywhere. Dies und die Einfachheit der Integration könnten dazu führen, dass man schon bald viele Anwendungen von @Anywhere im Web sehen wird. Immerhin haben schon bekannte Firmen wie Amazon, YouTube oder eBay angekündigt, @Anywhere einzusetzen.