Share
Twitter Anywhere är en "one-script-include" -lösning från Twitter för att få kraften i sin kommunikationsplattform till din webbplats. Vi bygger ett litet jQuery-skript som använder Twitter överallt för dina användare.
Det första steget i Twitter Anywhere-processen är att skapa en applikation. Registreringen hittar du här. Det enda fält som kan orsaka någon förvirring är återuppringningsadressen. Detta ska användas när Twitter autentiserar användaren; Det specificerar var på din webbplats du vill skicka den autentiserade användaren tillbaka till. För de flesta mindre applikationer är webbplatsens hemsida sannolikt tillräcklig, men för större applikationer kan du kanske rikta användaren tillbaka till ett område som serverar lämpligt innehåll för autentiserade användare.
En viktig inställning är värt att notera är applikationstypen. Nu kommer det inte att visas i programmets skapande, men kommer att vara tillgängligt genom att gå till dina appar, hitta din nya applikation, klicka på fliken Inställningar bredvid Detaljer och ändra radioknappen från "Läs endast" till "Läs och skriv "i avsnittet Programtyp.
För att vara ärlig är det pinsamt för mig att erkänna hur mycket tid som gick, medan felsökning, innan jag bestämde mig för att titta här!
Använda Twitter Överallt kommer vi att koncentrera oss idag om Tweet Box-funktionen. Tweet-fältet ger utmärkt öppenhet mellan din webbplats och Twitter, så att användarna kan tweeta direkt till sitt konto utan att lämna din webbplats och, ännu viktigare, fortsätta att interagera med innehållet.
Det jQuery-skript vi skriver idag kan enkelt anpassas till ett jQuery- eller WordPress-plugin. Skriptet kommer att upptäcka användaren som markerar en bit text i ditt blogginlägg och visar en "Tweet this" -knapp. När användaren klickar på den här knappen tar skriptet den markerade texten och kallar funktionen Tweet Box från Twitter Anywhere, sätter in den markerade texten som tweetkroppen.
Användaren kan sedan lämna tweeten som den är - med en länk tillbaka till sidan de är på - eller de kan redigera någon del av den innan tweeting.
Säkerhet är avgörande här; den minsta möjliga missbruk, och användaren återkallar åtkomst i sina inställningar - och återkommer inte troligen till att din ansökan blir en ny chans. Så alltid ge användaren en förhandsgranskning av exakt vad som kommer att läggas ut på deras konto; Det är i allmänhet en bra metod att få dem att trycka på knappen innan du behandlar tweeten.
Skriptet kommer också att tillåta användaren att klicka på någon av dina bilder och uppnå samma Tweet Box-effekt. I det här fallet kommer tweeten att referera direktadressen till bilden.
Som du kan se ovan måste vi inkludera några JavaScript-filer för att göra vår pluginfunktion korrekt.
$ (dokument) .ready (funktion () );
Vi börjar i vår JavaScript-fil genom att innehålla allt inom jQuerys dokumentklara metod. Allting här kommer att elda efter att DOM har laddats fullt och räddar oss från eventuella fel.
funktion getSelectionText () var text = ""; om (window.getSelection) text = window.getSelection (). toString (); annars om (document.selection && document.selection.type! = "Control") text = document.selection.createRange (). text; returnera text;
Ovanstående kodstycke tillåter dig att ta tag i den markerade texten från användaren när de har valt den. Denna kod är en ganska standardfunktion och kan hittas (och dokumenteras) över hela internet.
Accentsconagua
$ ('. post'). mouseup (funktion () $ ('# tweetThis'). show ();); Vi kan sedan börja interagera med användaren med en mus-upp-händelse. I den här specifika sidan av HTML har jag skapat en div med en klass av "posta'. För handledningen riktar vi oss helt enkelt på det här div så att koden inte körs varje gång användaren musar upp på sidan. När användaren musar upp inom detta div, vi kommer att visa en knapp för användaren som gör det möjligt för dem att tweeta den markerade texten.
$ ( "# Någonstans") dragbar ().
Den här metoden använder jQuery-användargränssnittet för att tillåta användaren att dra i Twitter-rutan i sin fritid. Vi överför inte några alternativ till det eftersom standardfunktionaliteten är tillräcklig för vad vi gör.
$ ('# tweetThis'). klicka (funktion () $ ('# tbox'). tom (); var text = getSelectionText (); om (text! = ") twttr.anywhere Tweetbox (höjd: 100, bredd: 400, defaultContent: '"' + $ .trim (text) + '" -' + document.title + '-' + window.location.href );); $ ('# någonstans'). visa ();); Här är var köttet i pluginets funktionalitet kommer att äga rum. När du klickar på "Tweet This" -knappen börjar vi med att tömma innehållet i Tweet-rutan. Detta gör att användaren kan markera en annan bit text och tweet det istället.
Nästa rad kommer att deklarera en variabel för att hålla användarens valda text från vårt funktionssamtal. Vi gör sedan en snabb kontroll för att avgöra om användaren faktiskt har valt någon text och fortsätter med vår tweetboksinitialisering.
Från den officiella dokumentationen:
"@Anywhere JavaScript-filen skapar ett enda globalt objekt (
twttr). För att använda @Anywhere, ringa tillvar som helstmetod och vidarebefordra en återuppringning. Återuppringningen kommer att få en instans av Twitter API-klienten (namnet "T"enligt konventionen) som enda argument. Alla @Anywhere-funktioner är tillgängliga som medlemmar av Twitter API-klienten."
Det betyder att du kan ringa någon av dessa metoder på Twitter API-klienten ("T"): Automatisk länkning av Twitter användarnamn, Hovercards, Följ knappar, Tweet Box, User login och registrering. Din ansökan kan göra flera samtal till "var som helst"-metoden, var därför inte rädd för att begränsa funktionaliteten för din webbplats!
Som du kan se, riktar vi oss då mot "#tbox", för att vara fylld med Twitters tweetruta-funktion. Som du kanske har märkt, om du arbetar med jQuery använder den liknande CSS-väljare när du frågar DOM.
Om vi skulle ringa .tweetBox (); utan några alternativ, så skulle tweetrutan ta det från de standardvärden som beskrivs i dokumentationen. Vi använder defaultContent egenskap för att infoga användarens valda text i en Tweet, tillsammans med aktuell sidtitel och plats. Vi använder jQuery s $ .trim funktionen att bli av med oönskade blankutrymmen från användarens val, vilket skulle kosta dem karaktärer i deras Tweet.
Vi kan sedan visa den skapade Tweet-rutan till användaren, redo för dem att godkänna och tweet!
$ ('img'). klicka (funktion () var url = $ (detta) .attr ('src'); twttr.anywhere (funktion (T) T ("# tbox"). tweetBox (höjd: 100, bredd: 400, defaultContent: 'Kolla in den här bilden:' + url);); $ ('# anywhere'). Show ();); Koden ovan ger användaren möjlighet att tweeta en direktbildsadress till deras konto. Vi ställa in tweetfältet precis som tidigare men vi använder "src' av 'img'element denna gång som den dynamiska variabeln istället för markerad text.
Det här kan enkelt anpassas för HTML5-videor, om du vill rikta in dem istället för bilder.
$ ('# hide'). klicka (funktion () $ ('# tbox'). tomt (); $ ('# var som helst'). göm (); $ ('# tweetThis'). ); Ovanstående kod tillåter enkelt användaren att bli av med tweetrutan när de har tweeted eller om de tänker på tweeting. Vi tömmer div elementet redo för nästa valda text eller bildadress.
Denna typ av funktionalitet skulle göra sig perfekt för en blogg.
Med denna kod anpassad till ett WordPress-plugin kan användare tweet citat från dina artiklar, öka exponeringen och sprida innehållet över internet.
Webbadress tweetningen skulle passa bra på en fotografi- eller webbdesignsportfölj där användaren kan tweeta dina bitar av arbete. Eller det här skriptet kan omvandlas till ett korrekt format jQuery-plugin för användning på vilken webbplats som helst. statisk; CMS driven eller Tumblr - möjligheterna är oändliga.
Twitter Anywhere-plattformen är ett fantastiskt sätt att lagra Twitter-funktionalitet på din webbplats.
Twitter Anywhere-plattformen är ett fantastiskt sätt att lagra Twitter-funktionalitet på din webbplats. Ur personlig erfarenhet tycker jag att det bara är det: ett lager. Jag skulle inte känna mig bekväm att bygga en hel applikation med den. Dokumentationen är ganska tunn och det första du kanske märker när du använder det själv är hur mycket potential det har, hur mycket funktionalitet kan vara där och hur det delvis saknas just nu.
Till exempel, för närvarande kan du hämta en användares favoriter räkna - bara räkna, inget innehåll. Denna extra funktionalitet skulle göra att Twitter Anywhere står upp med den Server Side REST API som redan finns, som driver mycket komplexa, stora applikationer.
Lycka till med denna plattform och försök hitta ett intressant användarfall för några av de lättanvända funktionerna! Under tiden, kolla in demo Copybot. Tack för att du läser!
