Verwenden Sie den @Anywhere-Service von Twitter in 6 Schritten

Letzte Woche hat Twitter @Anywhere veröffentlicht, das mit nur ein paar zusätzlichen Zeilen in Ihrem Code alle Plattformfunktionen von Twitter in Ihre Website integrieren kann. @Anywhere kann alles zulassen, von der Umwandlung eines einfachen @Benutzernamens in einen anklickbaren Link bis hin zum Erstellen neuer Tweets direkt von Ihrer persönlichen Website. Ich werde Ihnen in diesem Tutorial genau zeigen, wie das geht!

Bevor Sie beginnen, erstellen Sie eine Anwendung

Damit Sie @Anywhere verwenden können, benötigen Sie einen API-Schlüssel. Was? Du hast es nicht Kein Problem. Gehen Sie einfach hier und registrieren Sie eine neue Anwendung (registrieren Sie sie nicht hier).

Wenn Sie einen lokalen Server installiert haben, setzen Sie ihn auf eine Domäne (z. B. entwickler.de), da dies nicht mit Ihrem localhost funktioniert (wenn Sie nicht wissen, wie dieses Tutorial aussehen soll, ist der Hosts-Dateiteil Teil besonders wichtig).
Wenn Sie keinen lokalen Server haben, lassen Sie diesen Abschnitt leer. Denken Sie daran, dass Sie für die Produktion die Domäne festlegen müssen, an der Sie arbeiten.

Setzen Sie schließlich den Standardzugriffstyp auf Lesen und Schreiben. Dies ist sehr wichtig!

Nun werden Sie zur Seite mit den Anwendungseinstellungen weitergeleitet. Kopieren Sie den Consumer-Schlüssel (API-Schlüssel), und beginnen Sie mit @Anywhere.

Einschließlich das Javascript von @ Anywhere

Öffnen Sie Ihre neue HTML-Datei und im Tag, enthalten:

Ihr Code sollte folgendermaßen aussehen:

    @Irgendwo     …

Ersetzen API-Schlüssel mit dem API-Schlüssel der Anwendung, den Sie im vorherigen Schritt erhalten haben. Der Parameter v = 1 ist die Version. Vielleicht fügt Twitter in Zukunft neue Funktionen und möglicherweise neue Syntax hinzu. Um zu verhindern, dass der vorhandene @Anywhere-Code beschädigt wird, wird der alte Code beibehalten, sofern angegeben. Version 1 unterstützt alle gängigen Browser, einschließlich IE6.

Nach dem Einfügen dieser JavaScript-Datei können wir auf die twttr Objekt, das das aufrufen wird irgendwo() Funktion mit einem Parameter, wenn @Anywhere bereit ist:

 twttr.anywhere (Funktion (twitter) // Aktionen, wenn @Anywhere bereit ist);

Der Parameter (in diesem Fall) Twitter) ist das Objekt, das wir verwenden werden, ähnlich wie bei jQuery $.

Als Nächstes müssen wir eine HTML-Basis erstellen. Kopieren Sie den folgenden Code, fügen Sie ihn ein und platzieren Sie ihn innerhalb des Tags "body".

   Mein Blogbeitrag
  Dies ist ein Testblog, der @Anywhere von @twitter testet.
 Wenn Ihnen dieses Tutorial gefallen hat, folgen Sie mir bitte und bleiben Sie mit @NETTUTS in Kontakt, um mehr Attraktivität zu erzielen.
 
 
  Bemerkungen
  @Corcholat sagt: So ein tolles Tutorial! 
 
 @faelazo sagt: Sie sollten auch @smashingmag folgen

Nun lasst uns hineinschauen.

1. linkifyUsers: Konvertieren Sie @something in Links

@Anywhere ermöglicht es uns, @mentions in Links umzuwandeln. Diese Funktionalität wird aufgerufen linkifyBenutzer, und ist ziemlich einfach: Es setzt das HTML-Element, das Sie konvertieren möchten, in einen Link.

Da wir möchten, dass alle @mentions des Dokuments in Links konvertiert werden, rufen wir einfach die linkifyUsers () Funktion im Körperelement:

 twttr.anywhere (Funktion (twitter) twitter ("body"). linkifyUsers (););

Wie bereits erwähnt, ähnelt der Parameter "twitter" in der Rückruffunktion dem Alias "$" von jQuery. Wenn wir @mentions in Links umwandeln möchten, aber nur diejenigen innerhalb eines bestimmten Abschnitts können wir einen CSS-Selector verwenden, wie unten gezeigt.

 twttr.anywhere (Funktion (twitter) twitter (". post"). linkifyUsers (););

linkifyUsers () akzeptiert ein Objekt als Parameter mit zwei Eigenschaften: Klassenname und Erfolg. Mit Klassenname, Sie können eine Klasse angeben, die angewendet werden soll, wenn @mentions gefunden werden. So können Sie zum Beispiel eine unsemantische "rote" Klasse hinzufügen und in Ihrem CSS angeben:

 .rot color: # f00;

Hier ist der Code.

 twttr.anywhere (Funktion (twitter) twitter ("body"). linkifyUsers (className: 'red'););

2. hovercards: Zusätzliche Informationen zum Hover anzeigen

hovercards () wandelt @mentions in Links um, lädt aber beim Mouseover einen kleinen Popup-Tooltip. Hier ist ein einfaches Beispiel für die Verwendung.

 twttr.anywhere (Funktion (twitter) twitter.hovercards (););

jedoch, Schwebekarten () ist flexibel genug, um bestimmte Elemente aufzunehmen, auch wenn diese keine @mention enthalten. Im HTML-Link verlinke ich "follow me" mit http://twitter.com/faelazo; @anywhere ist jedoch intelligent genug, um diesen Link in eine Hovercard umzuwandeln. Durch Hinzufügen einer Klasse von "hovercard" zum Anker-Tag übernimmt Twitter den Rest!

 twttr.anywhere (Funktion (twitter) // Finden Sie die @ -Elemente und verknüpfen Sie wie üblich twitter ("body"). hovercards (); // Suchen wir die Elemente, die eine Hovercard-Klasse twitter (". hovercard"). hovercards haben (Benutzername: Funktion (Knoten) var twitter_regexp = /twitter\.com\/([a-z0-9_(**)\/?(.*)?/gi; if (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href))) return twitter_match [1]; return ";););

Das Nutzername Parameter nimmt eine Funktion mit einem Parameter an, der das Objekt sein wird (in diesem Fall) Knoten). Dies geschieht zeilenweise innerhalb der Funktion.

var twitter_regexp = /twitter\.com\/([a-z0-9_(**)/gi;

Dies ist ein regulärer Ausdruck. Es wird eine Übereinstimmung finden twitter.com/ Zeichenfolge mit alphanumerischen Werten und Unterstrich.

if (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href)))

Wenn der Ausdruck mit der Eigenschaft href des Knotenelements übereinstimmt, legen Sie die Variable twitter_match fest, um die Werte in einem Array zu erfassen.

return twitter_match [1];

Es wird das gefundene Spiel zurückgegeben.

Wir fügen ein "return" für den Fall hinzu, dass das Element eine Klasse hat, sich aber nicht darauf bezieht twitter.com; also wird es keine Übereinstimmung geben. Wenn es zurückkehrt falsch oder NULL, Das Skript wirft einen Fehler. Bei einer leeren Zeichenfolge wird eine Hovercard angezeigt, jedoch kein Benutzer gefunden.

Wenn dies etwas zu kompliziert ist, können Sie den Prozess immer vereinfachen und den Benutzernamen als title-Attribut des Anchor-Tags hinzufügen.

 Folge mir

Und nur das zurückgeben Knoten's Titel Attribut. Viel einfacher, richtig?

 twitter (". hovercard"). hovercards (username: function (node) return node.title;);

"Hovercards" können auf jedes Element (auch auf ein Div) angewendet werden, solange ein Benutzername angegeben wird.

 twitter ("# main"). hovercards (username: function () return 'therrorcom';);

3. followButton: Mit einem Klick zum Folgen einladen

Folgen Schaltfläche() Hängt eine Schaltfläche an, um den Benutzernamen-Parameter in dem zuvor angegebenen Element zu verfolgen.

Der folgende Code fügt eine Schaltfläche an, um Nettuts + in der zu folgen #Main div.

 twttr.anywhere (Funktion (twitter) twitter ("# main"). followButton ("nettuts"););

Folgen Schaltfläche() erwartet einen Parameter: den folgenden Benutzernamen. Einfach genug, eh?

4. tweetBox: Tweets von Ihrer Site

tweetBox () wird ein Feld anhängen, in dem die Benutzer ihre Kommentare eingeben und sie über Ihre Website twittern können.
tweetBox kann ein Objekt als Parameter mit den folgenden Eigenschaften empfangen:

Zähler (boolean, Standardwert true)
Gibt an, ob der Zähler für die verbleibenden Zeichen angezeigt werden soll.
Höhe (Ganzzahl, Standard 65)
Die Höhe der Box in Pixel.
Breite (Ganzzahl, Standard 515)
Die Breite der Box in Pixel.
Etikette (String, Standard "Was ist los?")
Der Text über der Box.
defaultContent (String, Standardwert keine)
Sie können standardmäßig die URL, ein @mention, ein #hashtag usw. Eingeben.
onTweet (Funktion)
Es wird aufgerufen, nachdem der Tweet-Button gedrückt wurde. Es erhält zwei Argumente: Nur-Text-Tweet und HTML-Tweet.

Ein Standard tweetBox kann nach dem Element mit der Kommentarklasse mit dem folgenden Snippet aufgerufen werden.

 twttr.anywhere (Funktion (twitter) twitter (". comments"). tweetBox (););

Wenn Sie also ein benutzerdefiniertes Label, Inhalt und einen Rückruf wünschen, wenn der Tweet gesendet wurde, verwenden Sie diesen Code.

 twitter (". comments"). tweetBox (label: 'Was denkst du über diesen Artikel?', defaultContent: '#nettuts', onTweet: function (plain, html) // Aktionen wenn Tweet gesendet wird) ;

onTweet Dies kann nützlich sein, wenn Sie den Standardkommentarbereich durch den verwendeten CMS ersetzen möchten. Sie brauchen noch eine Datenbank und eine Tabelle, um die Kommentare anzuzeigen, oder? So können Sie das CMS ein wenig hacken und eine AJAX-Anfrage mit der onTweet Ereignis, um den Tweet in Ihre Datenbank einzufügen.

5. Verbinden: Melden Sie einen Benutzer bei Ihrer Anwendung an

Wie Sie wahrscheinlich gesehen haben, ist für die beiden letzten Methoden eine Bestätigung erforderlich, um der Anwendung die Berechtigung zu erteilen. @Anywhere verfügt über eine Methode, um zu überprüfen, ob der Benutzer mit der Anwendung angemeldet ist (nicht bei Twitter). Sie können Bedingungen verwenden, um bestimmte Elemente anzuzeigen.

Dieses Snippet fügt die Verbindungsschaltfläche im Element mit einer Kommentarklasse an.

 twttr.anywhere (Funktion (twitter) twitter (". comments"). connectButton (););

Wenn Sie eine Schaltfläche mit einer anderen Größe benötigen, können Sie ein Objektliteral mit der Eigenschaftsgröße und dem Wert small, medium, large oder xlarge übergeben. Beachten Sie, dass "medium" der Standardwert ist.

 twttr.anywhere (Funktion (twitter) twitter (". comments"). connectButton (size: 'large'););

Das Twitter-Objekt enthält einige zusätzliche Extras. einer ist currentUser, Welches ist ein Objekt? der Andere ist Ist verbunden(), Dies ist eine Funktion, die einen Boolean zurückgibt. Von hier aus können wir einige bedingte Anweisungen erstellen.

 twttr.anywhere (Funktion (twitter) if (twitter.isConnected ()) alarm ('Willkommen, Sie sind verbunden');) else twitter (". comments"). connectButton ();;

Ob Ist verbunden() kehrt zurück wahr, Wir können einige Benutzerinformationen anzeigen, z. B. den Benutzernamen (screen_name), das Profilbild (profile_image_url), Follower oder folgende. Hier ist eine Liste der Informationen, auf die die Anwendung zugreifen kann. Lass uns das sehen currentUser Objekt in der endgültigen Zusammenfassung.

6. Abschließende Zusammenfassung: Alles zusammen mischen

Ich werde das div mit der Kommentarklasse ändern.

  Bemerkungen
  @Corcholat sagt: So ein tolles Tutorial! 
 
 @faelazo sagt: Sie sollten auch @smashingmag folgen
 
 
  Einen Kommentar hinzufügen

Lassen Sie uns jetzt jQuery einschließen, um die Dinge ein bisschen einfacher zu machen. Einfügen, dazwischen und , den folgenden Code:

Jetzt haben wir Platz, um Kommentare hinzuzufügen. Zuerst verwenden wir die Ist verbunden() Bedingung, um eine Schaltfläche anzuzeigen, wenn der Benutzer nicht in unserer Anwendung angemeldet ist; Diese Schaltfläche wird mit einem. an das Element angehängt "hinzufügen" Klasse.

 if (twitter.isConnected ()) twitter (". comments"). connectButton ();

Lassen Sie uns nun das currentUser-Objekt von Twitter verwenden. Dieses Objekt kann Informationen mit der Methode data () abrufen. Das folgende Snippet ruft also den Benutzernamen screen_name ab.

 twitter.currentUser.data ('screen_name');

In @Anywhere können wir Callback-Funktionen für die connectButton Merkmal. Als Argument akzeptiert es ein Objekt mit zwei Eigenschaften: authComplete und Ausloggen; beide sind Funktionen, also wann Ausloggen aufgerufen wird, könnten wir die Seite aktualisieren. Gleiches gilt für authComplete. Lassen Sie uns das ersetzen connectButton () Zeile mit diesem Ausschnitt:

 twitter (". comments> .add"). connectButton (authComplete: function (Benutzer) location.reload ();, signOut: function () location.reload (););

Das ist ziemlich einfach: Wir übergeben ein Objekt als Argument und setzen dann beide Ausloggen und authComplete Funktionen zum erneuten Laden der Seite. Beachten Sie, dass ich die gelöscht habe sonst Klausel für die Ist verbunden() bedingt, um das zu setzen Ausloggen Veranstaltung.

Als nächstes fügen wir ein tweetBox innerhalb der Bedingung.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Ausloggen'); twitter (". comments> .add"). tweetBox (label: 'Was denkst du über diesen Artikel?', defaultContent: '#nettuts');

Wenn der Benutzer angemeldet ist, sollte ein Folgeschalter vorhanden sein. Wieder innerhalb der Bedingung:

 twitter (". comments> .add"). followButton ("nettuts");

Hier ist die gesamte Bedingung, die alle @Anywhere-Funktionen aufrundet.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Ausloggen'); twitter (". comments> .add"). tweetBox (label: 'Was denkst du über diesen Artikel?', defaultContent: '#nettuts'); twitter (". comments> .add"). followButton ("nettuts");

Fazit

@Anywhere ist offensichtlich die Antwort von Twitter auf Facebook Connect. Sie hoffen, diese Plattform auf möglichst vielen Websites im Internet verfügbar zu machen. Und obwohl der Service noch jung ist und die Dokumentation definitiv verbessert werden könnte, ist er definitiv vielversprechend! Bitte zeigen Sie uns, was Sie mit @Anywhere auf Ihren eigenen Websites gemacht haben!

Code