De @Anywhere-service van Twitter gebruiken in 6 stappen

Vorige week bracht Twitter @Anywhere uit, dat met slechts een paar toegevoegde regels in je code alle platformfunctionaliteiten van Twitter naar je website kan brengen. @ Anywhere kan alles toestaan, van het omzetten van een eenvoudige @gebruikersnaam in een klikbare link, tot zelfs het maken van nieuwe tweets rechtstreeks vanaf uw persoonlijke site. Ik zal je precies laten zien hoe je dit moet doen in deze tutorial!

Maak voordat u begint een applicatie

Om @Anywhere te kunnen gebruiken, moet u over een API-sleutel beschikken. Wat? Heb je het niet? Geen probleem. Ga hierheen en registreer een nieuwe applicatie (registreer het hier niet).

Als u een lokale server hebt geïnstalleerd, stelt u deze in op een domein (bijvoorbeeld developertutorial.com), omdat dit niet werkt met uw lokale host (als u niet weet hoe u dit moet doen, raadpleegt u deze zelfstudie. Het bestand met het hosts-bestand is bijzonder belangrijk).
Als u geen lokale server hebt, laat u dit gedeelte leeg. Houd er rekening mee dat u voor de productie het moet instellen op het domein waaraan u werkt.

En ten slotte stelt u het standaardtoegangstype in op Lezen en schrijven. Dit is erg belangrijk!

U wordt nu omgeleid naar de pagina met applicatie-instellingen. Kopieer de consumentensleutel (API Key) en laten we aan de slag gaan met @ Anywhere.

Waaronder @ Javascript Javascript

Open uw nieuwe HTML-bestand en, binnen de tag, include:

Uw code moet er als volgt uitzien:

    @Overal     ...

Vervangen API sleutel met de API-sleutel van de toepassing die u in de vorige stap hebt gekregen. De parameter v = 1 is de versie. Misschien zal Twitter in de toekomst nieuwe functies en misschien nieuwe syntaxis toevoegen. Om te voorkomen dat de bestaande @ Anywhere-code wordt overtreden, behouden ze de oude code, indien opgegeven. Versie 1 ondersteunt elke belangrijke browser, inclusief IE6.

Nadat we dit JavaScript-bestand hebben opgenomen, hebben we toegang tot de twttr object, dat de overal() functie met een parameter wanneer @Anywhere gereed is:

 twttr.anywhere (functie (twitter) // acties wanneer @Anywhere gereed is);

De parameter (in dit geval tjilpen) is het object dat we gaan gebruiken, vergelijkbaar met jQuery's $.

Vervolgens moeten we een HTML-basis maken. Kopieer en plak de volgende code en plaats deze in de "body" -tag.

   Mijn blogpost
  Dit is een testblogpost die @ Anywhere test door @twitter.
 Als je deze tutorial leuk vond, volg me dan en blijf in contact met @NETTUTS voor meer ontzagwekkendheid.
 
 
  Comments
  @corcholat zegt: Zo'n geweldige tutorial! 
 
 @faelazo zegt: Je moet ook @smashingmag volgen

Laten we nu ingaan.

1. linkifyUsers: zet @something om in koppelingen

Met @ Anywhere kunnen we @mentions omzetten in links. Deze functionaliteit wordt genoemd linkifyUsers, en is vrij eenvoudig: het stelt het HTML-element in dat u naar een link wilt converteren.

Omdat we willen dat alle @ -toepassingen van het document worden omgezet in koppelingen, bellen we gewoon het linkifyUsers () functie in het lichaamselement:

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

Zoals eerder vermeld, lijkt de "twitter" -parameter binnen de callback-functie veel op de "$" alias van jQuery; f willen we @mentions converteren naar links, maar alleen die binnen een bepaalde sectie, we kunnen een CSS-selector gebruiken, zoals hieronder getoond.

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

linkifyUsers () accepteert een object als een parameter, met twee eigenschappen: naam van de klasse en succes. Met naam van de klasse, u kunt een klasse specificeren die moet worden toegepast wanneer de @mentions worden gevonden; U kunt bijvoorbeeld een niet-achteloze 'rode' klasse toevoegen en in uw CSS opgeven:

 .rood color: # f00;

Hier is de code.

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

2. hovercards: toon aanvullende informatie over Hover

hovercards () converteert @mentions naar links, maar laadt ook een kleine pop-uptooltip op mouseover. Hier is een eenvoudig voorbeeld van het gebruik ervan.

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

Echter, Hovercards () is flexibel genoeg om bepaalde elementen op te nemen, zelfs als ze geen @vermelding in zich hebben. In de HTML koppel ik 'volg mij' aan http://twitter.com/faelazo; maar @anywhere is slim genoeg om deze link om te zetten naar een hovercard. Door een klasse van "hovercard" toe te voegen aan de ankertag, zal Twitter de rest afhandelen!

 twttr.anywhere (functie (twitter) // Zoek de @mentions en link zoals gebruikelijk twitter ("body"). hovercards (); // Laten we de elementen vinden die een hovercardklasse twitter (". hovercard") hebben. hovercards (username: function (node) 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 ";););

De gebruikersnaam parameter neemt een functie met een parameter die het gevonden object zal zijn (in dit geval knooppunt). Dit is wat er gebeurt binnen de functie, regel voor regel.

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

Dit is een reguliere expressie. Het komt overeen met a twitter.com/ string met alfanumerieke waarden en een onderstrepingsteken.

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

Als de regexp overeenkomt met de eigenschap href van het knooppuntelement, stelt u de variabele twitter_match in om de waarden in een array vast te leggen.

retourneer twitter_match [1];

Het geeft de gevonden overeenkomst terug.

We voegen een "return" toe voor het geval dat het element een klasse heeft, maar er niet naar verwijst twitter.com; dus er zal geen match zijn. Als het terugkeert vals of NUL, het script gooit een foutmelding. Met een lege string toont het een hovercard, maar zonder dat er een gebruiker is gevonden.

Nu, als dit een beetje te ingewikkeld is, kunt u het proces altijd vereenvoudigen en de gebruikersnaam toevoegen als het titelkenmerk van de ankertag.

 Volg mij

En retourneer gewoon de knooppunt's titel attribuut. Veel gemakkelijker, toch?

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

"hovercards" kunnen op elk element (zelfs een div) worden toegepast, net zo lang als het een gebruikersnaam aangeeft.

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

3. followButton: uitnodigen om te volgen met slechts één klik

Volg knop() zal een knop toevoegen om de gebruikersnaamparameter te volgen in het eerder gespecificeerde element.

De volgende code voegt een knop toe om Nettuts + te volgen in de #hoofd div.

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

Volg knop() verwacht één parameter: de gebruikersnaam die moet worden gevolgd. Eenvoudig genoeg, eh?

4. tweetBox: tweets van uw site

tweetBox () zal een vak toevoegen waarin de gebruikers hun opmerkingen kunnen invoeren en deze via uw site tweeten.
tweetBox kan een object als parameter ontvangen, met de volgende eigenschappen:

teller (boolean, standaard true)
Of de teller al dan niet wordt weergegeven voor de resterende tekens.
hoogte (integer, standaard 65)
De hoogte van de doos, in pixels.
breedte (integer, standaard 515)
De breedte van de doos, in pixels.
label (string, standaard "Wat gebeurt er?")
De tekst boven het vak.
defaultContent (string, standaard geen)
U kunt standaard de URL, een @ -vermelding, een #hashtag, enzovoort invoeren.
onTweet (functie)
Het wordt genoemd nadat op de tweet-knop is gedrukt. Het ontvangt twee argumenten: platte-tekst-tweet en HTML-tweet.

Een standaard tweetBox kan na het element met de opmerkingenklasse worden genoemd met het volgende fragment.

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

Dus als u een aangepast label, inhoud en een terugroepactie wilt wanneer de tweet is verzonden, gebruikt u deze code.

 twitter (". comments"). tweetBox (label: 'Wat vind je van dit artikel?', defaultContent: '#nettuts', onTweet: function (plain, html) // Acties wanneer tweet wordt verzonden) ;

onTweet kan handig zijn als u van plan bent het standaardcommentaargebied te vervangen door de CMS die u gebruikt. Je hebt nog steeds een database en een tabel nodig om de reacties te laten zien, toch? Dus je kunt het CMS een beetje hacken en een AJAX-verzoek doen met de onTweet event om de tweet in uw database in te voegen.

5. connect: log in op een gebruiker van uw applicatie

Zoals u waarschijnlijk heeft gezien, moeten de twee laatste methoden worden bevestigd om toestemming te verlenen voor de toepassing. @Anywhere heeft een methode om te controleren of de gebruiker is ingelogd met de applicatie (niet op twitter). U kunt conditionals gebruiken om bepaalde elementen al dan niet te tonen.

In dit fragment wordt de knop Verbinden in het element toegevoegd aan een reactieklasse.

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

Als u een knop met een andere grootte nodig heeft, kunt u een object letterlijk doorgeven met de eigenschapsgrootte en waarde small, medium, large of xlarge. Merk op dat "medium" de standaardwaarde is.

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

Het Twitter-object bevat enkele extra goodies; een is huidige gebruiker, wat een object is; de andere is is verbonden(), wat een functie is die een boolean retourneert. Vanaf hier kunnen we een aantal voorwaardelijke uitspraken doen.

 twttr.anywhere (functie (twitter) if (twitter.isConnected ()) alert ('Welcome, you are connected'); else twitter (". comments"). connectButton (););

Als is verbonden() komt terug waar, we kunnen wat gebruikersinformatie tonen, zoals de gebruikersnaam (schermnaam), profielfoto (profile_image_url), volgers of volgende. Hier is een lijst voor de informatie waartoe de applicatie toegang heeft. Laten we het zien huidige gebruiker object in de laatste revisie.

6. Final Roundup: Alles samen mengen

Ik zal de div aanpassen aan de comments-les.

  Comments
  @corcholat zegt: Zo'n geweldige tutorial! 
 
 @faelazo zegt: Je moet ook @smashingmag volgen
 
 
  Voeg commentaar toe

Laten we jQuery nu toevoegen om dingen een beetje gemakkelijker te maken. Invoegen, tussen en , de volgende code:

Nu hebben we een spatie om opmerkingen toe te voegen. Laten we eerst de. Gebruiken is verbonden() voorwaardelijk om een knop weer te geven als de gebruiker niet is aangemeld bij onze applicatie; deze knop wordt toegevoegd aan het element met een "toevoegen" klasse.

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

Laten we nu het huidigeUser-object van Twitter gebruiken. Dit object kan informatie ophalen met de methode data (). Dus het volgende fragment zal de schermnaam van de gebruiker ophalen.

 twitter.currentUser.data (screen_name);

Met @ Anywhere kunnen we callback-functies opgeven voor de connectButton voorzien zijn van. Als argument accepteert het een object met twee eigenschappen: authComplete en afmelden; beide zijn functies, dus wanneer afmelden wordt aangeroepen, kunnen we de pagina vernieuwen. Hetzelfde geldt voor authComplete. Laten we de vervangen connectButton () regel met dit fragment:

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

Dit is vrij rechttoe rechtaan: we geven een object door als argument en stellen vervolgens beide in afmelden en authComplete functies om de pagina opnieuw te laden. Merk op dat ik de. Heb laten vallen anders clausule voor de is verbonden() voorwaardelijk om de afmelden evenement.

Laten we vervolgens een toevoegen tweetBox binnen het voorwaardelijke.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' schermnaam ') +' | Afmelden'); twitter (". comments> .add"). tweetBox (label: 'Wat vind je van dit artikel?', defaultContent: '#nettuts');

Als de gebruiker is aangemeld, moet er een vervolgknop aanwezig zijn. Nogmaals, binnen het voorwaardelijke:

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

Dit is de hele voorwaardelijke versie die alle functies van @Anywhere afrondt.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' schermnaam ') +' | Afmelden'); twitter (". comments> .add"). tweetBox (label: 'Wat vind je van dit artikel?', defaultContent: '#nettuts'); twitter (". comments> .add"). followButton ("nettuts");

Conclusie

@ Anywhere is duidelijk de reactie van Twitter op Facebook Connect. Ze hopen dit platform naar zoveel mogelijk sites op het web te brengen; en hoewel de service nog jong is en de documentatie zeker kan worden verbeterd, is het zeker veelbelovend! Laat ons zien wat je hebt gedaan met @Anywhere op je eigen websites!

Code