Share
Twitter Anywhere er en "one-script-include" -løsning fra Twitter for å bringe kraften i kommunikasjonsplattformen til nettstedet ditt. Vi skal bygge et lite jQuery-skript som bruker Twitter hvor som helst for brukerne.
Det første trinnet i Twitter Anywhere-prosessen er å lage et program. Registreringen finner du her. Det eneste feltet som kan føre til forvirring er tilbakekallingsadressen. Dette skal brukes når Twitter godkjenner brukeren; Det spesifiserer hvor på nettstedet du vil sende den autentiserte brukeren tilbake til. For de fleste mindre applikasjoner vil nettsiden din sannsynligvis være tilstrekkelig, men for større applikasjoner kan det være lurt å lede brukeren tilbake til et område som serverer passende innhold for autentiserte brukere.
En viktig innstilling som er verdt å merke seg, er søknadstypen. Nå vil dette ikke vises i programopprettingsprosessen, men vil være tilgjengelig ved å gå til appene dine, finne det nye programmet, klikke på Innstillinger-fanen ved siden av Detaljer og endre radioknappen fra "Les bare" til "Les og skriv "i delen Programtype.
For å være ærlig, er det pinlig for meg å innrømme hvor mye tid gikk, mens feilsøking, før jeg bestemte meg for å se her!
Ved hjelp av Twitter hvor som helst, skal vi konsentrere oss om Tweet Box-funksjonen i dag. Tweet boksen gir utmerket åpenhet mellom nettstedet ditt og Twitter, slik at brukerne kan tweet direkte til sin konto uten å forlate nettstedet ditt, og enda viktigere, fortsetter å samhandle med innholdet ditt.
Det jQuery-skriptet vi skal skrive i dag, kan enkelt tilpasses til et jQuery- eller WordPress-plugin. Skriptet vil oppdage brukeren som fremhever et stykke tekst, for eksempel blogginnlegget ditt, og vise en "Tweet this" -knappen. Når brukeren klikker denne knappen, vil skriptet ta den uthevede teksten og ringe til Tweet Box-funksjonen fra Twitter hvor som helst, sette inn den uthevede teksten som tweetlegemet.
Brukeren kan da enten forlate tweetet som det er - med en link tilbake til siden de er på - eller de kan redigere hvilken som helst del av den før tweeting.
Sikkerhet er viktig her; den minste bit av misbruk, og brukeren vil tilbakekalle tilgangen i sine innstillinger - og sannsynligvis ikke tilbake for å gi søknaden din en ny sjanse. Så, alltid gi brukeren en forhåndsvisning av nøyaktig hva som vil bli lagt ut på kontoen sin; Det er generelt en god praksis å få dem til å trykke på knappen før du behandler tweet.
Skriptet vil også gi brukeren mulighet til å klikke på noen av bildene dine, og oppnå samme Tweet Box-effekt. I dette bestemte tilfellet vil tweeten referere til den direkte nettadressen til bildet.
Som du kan se over, må vi inkludere noen få JavaScript-filer for å gjøre plugin-funksjonen riktig.
$ (dokument) .ready (funksjon () );
Vi starter i vår JavaScript-fil ved å inneholde alt i jQuerys dokumentklare metode. Alt her inne vil brenne etter at DOM har fullt lastet, og redder oss fra eventuelle mulige feil.
funksjon getSelectionText () var text = ""; hvis (window.getSelection) text = window.getSelection (). toString (); else if (document.selection && document.selection.type! = "Control") text = document.selection.createRange (). tekst; returnere tekst;
Ovennevnte koden vil tillate deg å ta tak i den uthevede teksten fra brukeren når de har valgt den. Denne koden er en ganske standard funksjon, og kan bli funnet (og dokumentert) over hele Internett.
Accentsconagua
$ ('. post'). mouseup (funksjon () $ ('# tweetThis'). show ();); Vi kan da begynne å samhandle med brukeren med en mus-opp-hendelse. I denne spesielle siden av HTML har jeg opprettet en div med en klasse av 'post'. For opplæringen retter vi rett og slett mot dette div slik at koden ikke kjører hver gang brukeren mister opp på siden. Når brukeren mister seg innenfor dette div, Vi vil vise en knapp til brukeren som gjør at de kan tweet den uthevede teksten.
$ ( "# Anywhere") flyttbare (.);
Denne metoden bruker jQuery-brukergrensesnittet til å la brukeren dra Twitter-boksen rundt i fritiden. Vi overfører ikke noen alternativer til det, fordi standardfunksjonaliteten er tilstrekkelig for det vi gjør.
$ ('# tweetThis'). klikk (funksjon () $ ('# tbox'). tom (); var tekst = getSelectionText (); hvis (text! = ") twttr.anywhere T ("# tbox"). TweetBox (høyde: 100, bredde: 400, standardinnhold: '"' + $ .trim (tekst) + '" -' + document.title + '-' + window.location.href );); $ ('# hvor som helst'). show ();); Her er hvor kjøttet fra pluginets funksjonalitet vil finne sted. Ved å klikke på "Tweet This" -knappen, begynner vi å tømme innholdet i Tweet-boksen. Dette tillater brukeren å markere et annet stykke tekst og tweet det i stedet.
Den neste linjen vil deklarere en variabel for å holde brukerens valgte tekst fra vårt funksjonsanrop. Vi gjør en rask sjekk for å avgjøre om brukeren faktisk valgte noen tekst, og fortsett med vår Tweet Box-initialisering.
Fra den offisielle dokumentasjonen:
"@Anywhere JavaScript-filen etablerer et enkelt globalt objekt (
twttr). For å bruke @Anywhere, ringhvor som helstmetode, og passere i en tilbakeringing. Tilbakeringingen vil motta en forekomst av Twitter API Client (kalt "T"etter konvensjon) som eneste argument. Alle @Anywhere-funksjonene er tilgjengelige som medlemmer av Twitter API-klienten."
Dette betyr at du kan ringe noen av disse metodene på Twitter API Client ("T"): Automatisk kobling av Twitter brukernavn, Hovercards, Følg knapper, Tweet Box, User login & signup. Din søknad kan gjøre flere anrop til "hvor som helst'metode, så vær ikke redd for å begrense funksjonaliteten til nettstedet ditt!
Som du kan se, målretter vi da på "#tbox", for å være fylt med Twitter's Twitter-boks-funksjon. Som du kanskje har lagt merke til, hvis du jobber med jQuery, bruker den lignende CSS-selektorer når du spør om DOM.
Hvis vi skulle ringe .tweetBox (); uten noen alternativer, så tok Tweet-boksen det med egenskaper fra standardene som er beskrevet i dokumentasjonen. Vi bruker defaultContent egenskap for å sette brukerens valgte tekst inn i en Tweet, sammen med gjeldende sidetittel og sted. Vi bruker jQuery's $ .trim funksjon for å kvitte seg med uønsket hvitt mellomrom fra brukerens valg, som ville koste dem tegn i deres Tweet.
Vi kan da vise den opprettede Tweet-boksen til brukeren, klar for at de skal godkjenne og tweet!
$ ('img'). klikk (funksjon () var url = $ (dette) .attr ('src'); twttr.anywhere (funksjon (T) T ("# tbox"). tweetBox (høyde: 100, bredde: 400, standardinnhold: 'Sjekk ut dette bildet:' + url);); $ ('# hvor som helst'). Show ();); Koden ovenfor gir brukeren muligheten til å tweet en direkte bilde-URL til sin konto. Vi satt opp Tweet-boksen akkurat som før, men vi bruker "src' av 'img'element denne gangen som den dynamiske variabelen i stedet for merket tekst.
Dette kan lett tilpasses for HTML5-videoer, hvis du ønsker å målrette dem i stedet for bilder.
$ ('# hide'). klikk (funksjon () $ ('# tbox'). tom (); $ ('# hvor som helst'). skjul (); $ ('# tweetThis'). skjul ); Ovennevnte kode gjør det enkelt for brukeren å kvitte seg med Tweet-boksen etter at de har tweeted eller om de tenker på tweeting. Vi tømmer div elementet er klar for neste valgte tekst- eller bildeadresse.
Denne typen funksjonalitet ville låne seg perfekt til en blogg.
Å ha denne koden tilpasset et WordPress-plugin, vil tillate brukere å tweet sitater fra artiklene dine, øke eksponeringen og spre innholdet ditt over Internett.
Bildeadressen tweeting passer fint på et fotografisk eller webdesign porteføljeside hvor brukeren kan tweet dine arbeidsstykker. Eller dette skriptet kan bli omgjort til et riktig formet jQuery-plugin for bruk på et hvilket som helst nettsted; statiske; CMS drevet eller Tumblr - mulighetene er uendelige.
Twitter Anywhere-plattformen er en fantastisk måte å lagre Twitter-funksjonalitet på nettstedet ditt.
Twitter Anywhere-plattformen er en fantastisk måte å lagre Twitter-funksjonalitet på nettstedet ditt. Fra personlig erfaring tror jeg det er bare det: et lag. Jeg ville ikke føle meg komfortabel med å bygge en hel applikasjon med den. Dokumentasjonen er ganske slank, og det første du kanskje ser når du bruker det selv, er hvor mye potensial det har, hvor mye funksjonalitet som kan være der, og hvordan det delvis mangler akkurat nå.
For eksempel, for øyeblikket kan du hente en brukers favoritter teller - bare tellingen, ikke noe innhold. Denne ekstra funksjonaliteten vil gjøre Twitter Anywhere stå opp med Server Side REST API som eksisterer allerede, som driver svært komplekse, store applikasjoner.
Lykke til med denne plattformen, og prøv å finne et interessant brukstilfelle for noen av de enkle å implementere funksjonene! I mellomtiden, sjekk ut demo Copybot. Takk for at du leste!
