Använda Twitters @Anywhere Service i 6 steg

Förra veckan släppte Twitter @Anywhere, som med bara några få rader i din kod kan ge alla Twitter-plattformens funktioner till din webbplats. @Anywhere kan tillåta allt, allt från att konvertera ett enkelt @ användarnamn till en klickbar länk, för att till och med skapa nya tweets direkt från din personliga sida. Jag visar dig exakt hur du gör det i den här handledningen!

Innan du börjar, skapa en applikation

För att börja använda @Anywhere måste du ha en API-nyckel. Vad? Du har inte det? Inga problem. Gå bara här och registrera en ny ansökan (registrera inte det här härifrån).

Om du har en lokal server installerad, sätt den till en domän (t.ex. developertutorial.com), eftersom det inte kommer att fungera med ditt lokala värd (om du inte vet hur, kolla in den här handledningen, är värdfilsdelen särskilt viktigt).
Om du inte har en lokal server, lämna det här avsnittet tomt. Kom bara ihåg att för produktion måste du ställa in den domän du jobbar på.

Slutligen anger du standardåtkomsttypen för att läsa och skriva. Det här är väldigt viktigt!

Nu kommer du att dirigeras till sidan för programinställningar. Kopiera konsumentnyckeln (API-nyckel) och låt oss börja använda @Anywhere.

Inklusive @ Anywhere's Javascript

Öppna din nya HTML-fil, och inuti tagg inkluderar:

Din kod ska se ut:

    @Var som helst     ...

Byta ut apikey med programmets API-nyckel har du i föregående steg. Parametern v = 1 är versionen. Kanske i framtiden kommer Twitter att lägga till nya funktioner och kanske nya syntaxer. För att förhindra att den befintliga @Anywhere-koden bryts, kommer de att bevara den gamla koden om den anges. Version 1 stöder alla större webbläsare, inklusive IE6.

Efter att ha inkluderat denna JavaScript-fil, kan vi komma åt twttr objekt som kommer att påkalla var som helst() funktionen med en parameter när @Anywhere är klar:

 twttr.anywhere (funktion (twitter) // Åtgärder när @Anywhere är klar);

Parametern (i detta fall Twitter) är det objekt vi ska använda, liknar jQuery s $.

Därefter måste vi skapa en HTML-bas. Kopiera och klistra in följande kod och placera den i "body" -taggen.

   Mitt blogginlägg
  Det här är en testbloggtestning @Anywhere av @twitter.
 Om du haft den här handledningen, följ mig och håll kontakten med @ NETTUTS för mer awesomeness.
 
 
  kommentarer
  @corcholat säger: En sådan bra handledning! 
 
 @faelazo säger: Du bör också följa @smashingmag

Nu ska vi gräva in.

1. linkifyUsers: Konvertera @ något till Länkar

@Anywhere låter oss konvertera @mentions till länkar. Denna funktion kallas linkifyUsers, och är ganska rakt framåt: det anger HTML-elementet du vill konvertera till en länk.

Eftersom vi vill att alla dokumentets @mentions ska konverteras till länkar, ringer vi bara till linkifyUsers () funktion i kroppselementet:

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

Som tidigare nämnts, är "twitter" -parametern, inom återuppringningsfunktionen, ungefär som jQuery's "$" -alias; f vi vill konvertera @mentions till länkar, men bara de inom ett visst avsnitt kan vi använda en CSS-väljare, som visas nedan.

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

linkifyUsers () accepterar ett objekt som en parameter, med två egenskaper: klassnamn och Framgång. Med klassnamn, du kan ange en klass som ska tillämpas när @mentionsna hittas; så kan du till exempel lägga till en osemantisk "röd" klass och ange i din CSS:

 .röd färg: # f00;

Här är koden.

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

2. hovercards: Visa ytterligare information om Hover

hovercards () konverterar @mentions till länkar, men laddar också ett litet popup-verktygstips på mouseover. Här är ett grundläggande exempel på användningen.

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

dock, hovringsbilder () är tillräckligt flexibel för att innehålla vissa element även om de inte har någon inblandning i dem. I HTML länkar jag "följ mig" till http://twitter.com/faelazo; men @ någonstans är smart nog att konvertera den här länken till ett hovercard. Genom att lägga till en klass av "hovercard" till ankaretiketten kommer Twitter att hantera resten!

 twttr.anywhere (funktion (twitter) // Hitta @mentions och linkify som vanligt twitter ("body"). hovercards (); // Låt oss hitta elementen som har en hovercard class twitter ("hovercard"). (användarnamn: funktion (nod) var twitter_regexp = /twitter\.com\/([a-z0-9_]*)\/?(.*)?/gi; om (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href))) return twitter_match [1]; return ";;;);

De Användarnamn parametern tar en funktion med en parameter som kommer att bli föremålet (i det här fallet nod). Här är vad som händer inom funktionen, linje för rad.

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

Detta är ett reguljärt uttryck. Det kommer att matcha en twitter.com/ sträng med alfanumeriska värden och ett understreck.

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

Om regexp matchar href-egenskapen från nodelementet, ställ in variabel twitter_match för att fånga värdena i en array.

returnera twitter_match [1];

Det kommer att returnera matchen som hittades.

Vi lägger till en "retur" bara om elementet har en klass, men hänvisar inte till twitter.com; så det blir ingen match. Om den återvänder falsk eller NULL, Skriptet kastar ett fel. Med en tom sträng visas det en hovercard men ingen användare hittades.

Om det här är lite för komplicerat kan du alltid förenkla processen och lägga till användarnamnet som attributet för ankaretikettens titel.

 Följ mig

Och bara återvända nod's titel attribut. Mycket lättare, rätt?

 twitter ("hovercard"). hovercards (användarnamn: funktion (nod) return node.title;);

"hovercards" kan tillämpas på något element (även en div), så länge det anger ett användarnamn.

 twitter ("# main"). hovercards (användarnamn: funktion () returnera "therrorcom";);

3. followButton: Bjud in att följa med bara en klick

följa-knapp() kommer att lägga till en knapp för att följa användarnamnet parametern i det tidigare angivna elementet.

Följande kod lägger till en knapp för att följa Nettuts + i #main div.

 twttr.anywhere (funktion (twitter) twitter ("# main"). followButton ("nät"););

följa-knapp() förväntar sig en parameter: användarnamnet att följa. Enkelt nog, eh?

4. tweetBox: Tweets från din webbplats

tweetBox () lägger till en ruta där användarna kan skriva in sina kommentarer och tweeta dem via din webbplats.
tweetBox kan få ett objekt som parameter med följande egenskaper:

disken (booleskt, standard sant)
Oavsett om du vill visa räknaren för resterande tecken.
höjd (heltal, standard 65)
Lådans höjd, i pixlar.
bredd (heltal, standard 515)
Lådans bredd, i pixlar.
märka (sträng, standard "Vad händer?")
Texten ovanför rutan.
defaultContent (sträng, standard ingen)
Du kan ange som standard webbadressen, en @mention, en #hashtag, etc..
onTweet (fungera)
Det kallas efter att tweet-knappen har tryckts. Den tar emot två argument: vanlig text tweet och HTML tweet.

En standard tweetBox kan kallas efter elementet med kommentarer klassen med följande kod.

 twttr.anywhere (funktion (twitter) twitter (". kommentarer"). tweetBox (););

Så om du vill ha en anpassad etikett, innehåll och en återuppringning när tweeten har skickats, använd den här koden.

 tweetBox (label: 'Vad tycker du om den här artikeln?', defaultContent: '#nettuts', onTweet: funktion (vanlig, html) // Åtgärder när tweet skickas) ;

onTweet kan vara användbart om du planerar att ersätta standardkommentationsområdet med det CMS du använder. Du skulle fortfarande behöva en databas och ett bord för att visa kommentarer, eller hur? Så du kan hacka CMS lite och göra en AJAX-förfrågan med onTweet händelse för att infoga tweet i din databas.

5. Anslut: Logga in en användare i din applikation

Som du förmodligen såg, kräver de två senaste metoderna en bekräftelse för att ge tillstånd till ansökan. @Anywhere har en metod för att kontrollera om användaren är inloggad med programmet (inte på twitter). Du kan använda villkor för huruvida vissa element ska visas eller ej.

Denna kod lägger till anslutningsknappen i elementet med en kommentar klass.

 twttr.anywhere (funktion (twitter) twitter (". kommentarer"). connectButton (););

Om du behöver en knapp med en annan storlek kan du skicka ett objekt bokstavligt med egenskapens storlek och värdet litet, medium, stort eller xlarge. Observera att "medium" är standardvärdet.

 twttr.anywhere (funktion (twitter) twitter (". kommentarer"). connectButton (size: 'large'););

Twitter-objektet innehåller några extra godsaker; en är nuvarande användaren, vilket är ett föremål den andra är är ansluten(), vilken är en funktion som returnerar en booleska. Härifrån kan vi skapa några villkorliga uttalanden.

 twttr.anywhere (funktion (twitter) if (twitter.isConnected ()) alert ('Välkommen, du är ansluten'); else twitter (". kommentarer"). connectButton (););

Om är ansluten() avkastning Sann, Vi kan visa användarinformation, till exempel användarnamnet (skärmnamn), profilbilden (profile_image_url), följare eller följande. Här är en lista för den information som programmet kan komma åt. Låt oss se nuvarande användaren föremål i den slutliga rundan.

6. Final Roundup: Blandar allt tillsammans

Jag kommer att modifiera div med kommentar klassen.

  kommentarer
  @corcholat säger: En sådan bra handledning! 
 
 @faelazo säger: Du bör också följa @smashingmag
 
 
  Lägg till kommentar

Låt oss nu inkludera jQuery för att göra sakerna lite enklare. Infoga mellan och , följande kod:

Nu har vi utrymme att lägga till kommentarer. Låt oss först använda är ansluten() villkorat att visa en knapp om användaren inte är inloggad i vår ansökan; denna knapp läggs till elementet med en "Lägg till" klass.

 om (twitter.isConnected ()) twitter (". kommentarer"). connectButton ();

Låt oss nu använda Twitters nuvarande användarobjekt. Detta objekt kan hämta information med data () -metoden. Så följande snipp hämtar användarens skärmnamn.

 twitter.currentUser.data ( 'SCREEN_NAME');

@Anywhere låter oss ange återuppringningsfunktioner för connectButton funktion. Som ett argument accepterar det ett objekt med två egenskaper: authComplete och logga ut; båda är funktioner, så när logga ut åberopas, vi kan uppdatera sidan. Detsamma gäller för authComplete. Låt oss ersätta connectButton () linje med detta kod:

 twitter (". kommentarer> .add"). connectButton (authComplete: funktion (användare) location.reload ();, signOut: function () location.reload (););

Det här är ganska straightfoward: vi skickar ett objekt som argumentet, sedan ställer vi in båda logga ut och authComplete funktioner för att ladda om sidan. Observera att jag har tappat bort annan klausul för är ansluten() villkorad för att ställa in logga ut händelse.

Sedan lägger vi till en tweetBox inuti den villkorliga.

 om (twitter.isConnected ()) $ (". kommentarer> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Logga ut'); tweetBox (label: 'Vad tycker du om den här artikeln?', defaultContent: '#nettuts');

Om användaren är inloggad bör en följeknapp finnas där. Återigen, inom den villkorliga:

 twitter (". kommentarer> .add"). followButton ("nät");

Här är det helt villkorligt att avrunda alla @Anywhere-funktionerna.

 om (twitter.isConnected ()) $ (". kommentarer> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Logga ut'); tweetBox (label: 'Vad tycker du om den här artikeln?', defaultContent: '#nettuts'); twitter (". kommentarer> .add"). followButton ("nät");

Slutsats

@Anywhere är uppenbarligen Twitters svar på Facebook Connect. De hoppas att få denna plattform till så många webbplatser på webben som möjligt. och medan tjänsten fortfarande är ung och dokumentationen definitivt kan förbättras, är det definitivt lovande! Vänligen visa vad du har gjort med @Anywhere på dina egna webbplatser!

Koda