Accentsconagua

Bruke Twitters @Anywhere Service i 6 trinn

Kode
Share

I forrige uke lanserte Twitter @Anywhere, som med bare noen få tilføyede linjer i koden din, kan bringe alle Twitters plattformfunksjoner til nettstedet ditt. @Anywhere kan tillate alt, alt fra å konvertere et enkelt @brukernavn til en klikkbar lenke, for å til og med skape nye tweets direkte fra ditt personlige nettsted. Jeg vil vise deg nøyaktig hvordan du gjør det i denne opplæringen!

Før du begynner, opprett et program

For å begynne å bruke @Anywhere må du ha en API-nøkkel. Hva? Har du ikke det? Ikke noe problem. Bare gå her og registrer en ny søknad (ikke registrer det herfra).

  • Hvis du har en lokal server installert, sett den til et domene (developertutorial.com, for eksempel), da det ikke vil fungere med ditt lokalehost (hvis du ikke vet hvordan, se denne opplæringen, er vertsfilen delen spesielt viktig).
  • Hvis du ikke har en lokal server, la denne delen være tom. Bare husk at for produksjon, må du sette den til domenet du jobber med.

Og til slutt, sett standard tilgangstype til Les og skriv. Dette er veldig viktig!

Nå blir du omdirigert til siden for programinnstillinger. Kopier forbrukernøkkelen (API-nøkkel), og la oss begynne å bruke @Anywhere.

Inkludert @ Anywhere er Javascript

Åpne din nye HTML-fil, og, inne i tag, inkluderer:

Koden din skal se ut som:

    @Hvor som helst     ...

Erstatte apikey med programmets API-nøkkel du fikk i forrige trinn. Parameteren v = 1 er versjonen. Kanskje i fremtiden vil Twitter legge til nye funksjoner og kanskje nye syntakser. For å forhindre at den eksisterende @Anywhere-koden brytes, vil de beholde den gamle koden hvis den er angitt. Versjon 1 støtter alle de store nettleserne, inkludert IE6.

Etter at du har tatt med denne JavaScript-filen, kan vi få tilgang til twttr objekt, som vil påkalle hvor som helst() Funger med en parameter når @Anywhere er klar:

 twttr.anywhere (funksjon (twitter) // Handlinger når @Anywhere er klar);

Parameteren (i dette tilfellet twitter) er objektet vi skal bruke, ligner på jQuery's $.

Deretter må vi lage en HTML-base. Kopier og lim inn følgende kode, og legg den inn i "body" -taggen. 

 
 
 
Mitt blogginnlegg
 
 
Dette er en test bloggingstest @Anywhere av @twitter.
 
Hvis du likte denne opplæringen, vennligst følg meg og hold kontakten med @ NETTUTS for mer awesomeness.
 
 
 
 
kommentarer
 
     
  1. @corcholat sier: 
    En slik god opplæring! 
     
    2.  
  2. @faelazo sier: 
    Du bør også følge @smashingmag
     
    3.

La oss nå grave inn.

1. linkifyUsers: Konverter @ noe til Linker

@Anywhere lar oss konvertere @mentions til koblinger. Denne funksjonaliteten kalles linkifyUsers, og er ganske rett frem: det setter HTML-elementet du ønsker å konvertere til en kobling.

Siden vi vil at alle dokumentets @mentions skal konverteres til lenker, kaller vi bare linkifyUsers () funksjon i kroppselementet:

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

Som nevnt tidligere, er "twitter" -parameteren, inne i tilbakeringingsfunksjonen, mye som jQuery's "$" alias; f vi ønsker å konvertere @mentions til koblinger, men bare de i en bestemt seksjon, kan vi bruke en CSS velger, som vist nedenfor.

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

linkifyUsers () aksepterer et objekt som en parameter, med to egenskaper: klassenavn og suksess. Med klassenavn, Du kan spesifisere en klasse som skal brukes når @mentions er funnet; så, for eksempel, kan du legge til en usemantisk "rød" klasse og spesifisere i CSS:

 .rød farge: # f00;

Her er koden. 

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

2. hovercards: Vis ytterligere informasjon om Hover

hovercards () konverterer @mentions til koblinger, men laster også et lite popup-verktøytips på mouseover. Her er et grunnleggende eksempel på bruken.

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

derimot, -opplysningsfelt () er fleksibel nok til å inkludere visse elementer selv om de ikke har en @mention i dem. I HTML kobler jeg "følg meg" til http://twitter.com/faelazo; men @ hvor som helst er smart nok til å konvertere denne lenken til et hovercard. Ved å legge til en klasse med "hovercard" til ankermerket, vil Twitter takle resten! 

 twttr.anywhere (funksjon (twitter) // Finn @mentions og linkify som vanlig twitter ("body"). hovercards (); // La oss finne elementene som har en hovercard class twitter ("hovercard"). (brukernavn: funksjon (node) var twitter_regexp = /twitter\.com\/([a-z0-9_]*)\/?(.*)?/gi; hvis (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href))) return twitter_match [1]; return ";;;);

De brukernavn parameteren tar en funksjon med en parameter som blir objektet som er funnet (i dette tilfellet node). Her er hva som skjer inne i funksjonen, linje for linje.

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

Dette er et vanlig uttrykk. Det vil samsvare med en twitter.com/ streng med alfanumeriske verdier og et understreke.

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

Hvis regexp matcher href-egenskapen fra nodelementet, må du sette variabelen twitter_match for å fange verdiene i en matrise.

returner twitter_match [1];

Det vil returnere kampen som ble funnet.

Vi legger til en "retur" bare hvis elementet har en klasse, men refererer ikke til twitter.com; så det blir ingen kamp. Hvis den returnerer falsk eller NULL, skriptet kaster en feil. Med en tom streng viser den et hovercard, men ingen bruker funnet.

Nå, hvis dette er litt for komplisert, kan du alltid forenkle prosessen, og legge til brukernavnet som tittelattributtet til ankermerket. 

 Følg meg

Og bare returner node's tittel Egenskap. Mye enklere, rett? 

 twitter ("hovercard"). hovercards (brukernavn: funksjon (node) return node.title;);

"hovercards" kan brukes på ethvert element (selv en div), så lenge det angir et brukernavn.

 twitter ("# main"). hovercards (brukernavn: funksjon () retur 'therrorcom';);

3. followButton: Inviter til å følge med bare ett klikk

followButton () vil legge til en knapp for å følge brukernavnsparameteren i elementet som er angitt tidligere.

Følgende kode vil legge til en knapp for å følge Nettuts + i #hoved div.

 twttr.anywhere (funksjon (twitter) twitter ("# main"). followButton ("netts"););

followButton () forventer en parameter: brukernavnet å følge. Enkelt nok, eh?

4. tweetBox: Tweets fra nettstedet ditt

tweetBox () vil legge til en boks der brukerne kan skrive inn sine kommentarer og tweet dem via nettstedet ditt.
tweetBox kan motta et objekt som parameter, med følgende egenskaper:

  • disk (boolean, standard sant)
    Om du vil vise telleren for gjenstående tegn eller ikke.
  • høyde (heltall, standard 65)
    Boksenes høyde, i piksler.
  • bredde (heltall, standard 515)
    Bredden av boksen, i piksler.
  • merkelapp (streng, standard "Hva skjer?")
    Teksten over boksen.
  • defaultContent (streng, standard ingen)
    Du kan angi som standard nettadressen, en @mention, en #hashtag, osv.
  • onTweet (funksjon)
    Det kalles etter at tweet-knappen er trykket. Den mottar to argumenter: vanlig tekst tweet og HTML tweet.

En standard tweetBox kan kalles etter elementet med kommentarklassen med følgende utdrag.

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

Så hvis du vil ha en egendefinert etikett, innhold og tilbakering når tweet er sendt, bruk denne koden.

 tweetBox (label: 'Hva synes du om denne artikkelen?', defaultContent: '#nettuts', onTweet: funksjon (vanlig, html) // Handlinger når tweet sendes) ;

onTweet kan være nyttig hvis du planlegger å erstatte standardkommentarområdet med CMS du bruker. Du vil fortsatt ha behov for en database og et bord for å vise kommentarene, ikke sant? Så du kan hack CMS litt og foreta en AJAX-forespørsel med onTweet arrangement for å sette tweetet inn i databasen.

5. Koble til: Logg inn en bruker i programmet

Som du sikkert har sett, krever de to siste metodene bekreftelse for å gi tillatelse til søknaden. @Anywhere har en metode for å sjekke om brukeren er logget inn med programmet (ikke på twitter). Du kan bruke betingelsene for å vise visse elementer eller ikke.

Denne brikken legger til tilkoblingsknappen i elementet med en kommentarklasse.

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

Hvis du trenger en knapp med en annen størrelse, kan du passere et objekt bokstavelig med egenskapen størrelse og verdi små, mellomstore, store eller xlarge. Merk at "medium" er standardverdien.

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

Twitter-objektet inneholder noen ekstra godbiter; en er nåværende bruker, som er et objekt den andre er er sammenkoblet(), som er en funksjon som returnerer en boolsk. Herfra kan vi lage noen betingede utsagn.

 twttr.anywhere (funksjon (twitter) if (twitter.isConnected ()) alert ('Velkommen, du er tilkoblet'); else twitter (". kommentarer"). connectButton (););

Hvis er sammenkoblet() avkastning ekte, Vi kan vise noen brukerinformasjon, for eksempel brukernavnet (skjermnavn), profilbilde (profile_image_url), tilhenger eller følgende. Her er en liste over informasjonen som programmet kan få tilgang til. La oss se nåværende bruker objekt i den endelige runden.

6. Final Roundup: Blander alt sammen

Jeg vil endre div med kommentarklassen.

 
 
kommentarer
 
     
  1. @corcholat sier: 
    En slik god opplæring! 
     
    2.  
  2. @faelazo sier: 
    Du bør også følge @smashingmag
     
    3.  
 
 
Legg til en kommentar

La oss nå inkludere jQuery for å gjøre ting litt enklere. Sett inn, mellom og , følgende kode:

Nå har vi plass til å legge til kommentarer. Først, la oss bruke er sammenkoblet() betinget av å vise en knapp hvis brukeren ikke er logget på vår søknad; denne knappen vil bli lagt til elementet med en "Legg til" klasse.

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

La oss nå bruke Twitters nåværende brukerobjekt. Dette objektet kan hente informasjon med data () -metoden. Så følgende utdrag vil hente brukerens skjermnavn.

 twitter.currentUser.data ( 'SCREEN_NAME');

@Anywhere lar oss spesifisere tilbakeringingsfunksjoner for connectButton trekk. Som et argument aksepterer det et objekt med to egenskaper: authComplete og Logg ut; begge er funksjoner, så når Logg ut Påberopes, vi kunne oppdatere siden. Det samme gjelder for authComplete. La oss erstatte connectButton () linje med denne koden:

 twitter (". kommentarer> .add"). connectButton (authComplete: funksjon (bruker) location.reload ();, signOut: function () location.reload (););

Dette er ganske straightfoward: vi sender et objekt som argumentet, og sett deretter begge Logg ut og authComplete Fungerer for å laste siden på nytt. Legg merke til at jeg har tapt ellers klausul for er sammenkoblet() betinget for å sette Logg ut begivenhet.

Deretter la vi legge til en tweetBox inne i betinget.

 hvis (twitter.isConnected ()) $ (". kommentarer> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Logg ut'); tweetBox (label: 'Hva synes du om denne artikkelen?', defaultContent: '#nettuts');

Hvis brukeren er logget inn, bør en følgeknapp være der. Igjen, inne i betinget:

 twitter (". kommentarer> .add"). followButton ("nett");

Her er det hele betinget, avrunding av alle @Anywhere-funksjonene.

 hvis (twitter.isConnected ()) $ (". kommentarer> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Logg ut'); tweetBox (label: 'Hva synes du om denne artikkelen?', defaultContent: '#nettuts'); twitter (". kommentarer> .add"). followButton ("nett");

Konklusjon

@Anywhere er åpenbart Twitters svar på Facebook Connect. De håper å bringe denne plattformen til så mange nettsteder på nettet som mulig; og mens tjenesten fortsatt er ung, og dokumentasjonen kan definitivt forbedres, er det definitivt lovende! Vennligst vis oss hva du har gjort med @Anywhere på dine egne nettsteder!

Kode
×