Overview of how to integrate @Anywhere

1. Integrating @Anywhere
Todd Kloots
Frontend Engineer - Platform

2. Setup

5. 3 Steps

6. Step 1

7. http://dev.twitter.com/anywhere/apps/new

9. Step 2

10. Paste!
<script src="http://platform.twitter.com/anywhere.js?id=API_KEY&v=1"></script>
<script type="text/javascript">
twttr.anywhere(function(T) {
T.hovercards();
});
</script>

11. Step 3

12. (Just kidding.)

13. (No step 3.)

14. (You’re done!)

16. Goals

17. Goals
• Easy
• Fast
• Self-contained

18. Easy

19. <script src="http://platform.twitter.com/anywhere.js?id=API_KEY&v=1"></script>
<script type="text/javascript">
twttr.anywhere(function(T) {
T.hovercards();
});
</script>

20. /anywhere.js?id=API_KEY&v=1"></script>
<script type="text/javascript">
twttr.anywhere(function(T) {
T.hovercards();
});
</script>

21. <script type="text/javascript">
twttr.anywhere(function(T) {
T.hovercards();
});
</script>

22. <script type="text/javascript">
twttr.anywhere(function(T) {
T.hovercards();
T("body").hovercards();
});
</script>

23. <div id="main">
...
</div>
<script type="text/javascript">
twttr.anywhere(function(T) {
T("#main").hovercards();
});
</script>

24. Fast

25. anywhere.js
• Tiny (~2KB GZIP'd)
• Single, blocking request
• All dependencies loaded asynchronously
• Features loaded on demand

26. <script src="http://platform.twitter.com/anywhere.js?id=API_KEY&v=1"></script>
<script type="text/javascript">
twttr.anywhere(function(T) {
T.hovercards();
});
</script>
<div id="tbox"></div>
<script type="text/javascript">
twttr.anywhere(function(T) {
T("#tbox").tweetBox();
});
</script>

27. <script type="text/javascript">
twttr.anywhere(function(T) {
T("#tbox").tweetBox();
T.hovercards();
});
</script>

28. <script type="text/javascript">
twttr.anywhere(function(T) {
$("#comment-btn").bind("click", function () {
T("#tbox").tweetBox();
});
});
</script>

29. Self-Contained

30. <iframe>

32. Goals
• Easy
• Fast
• Self-contained

33. Use Cases

34. Identity

36. <span id="login"></span>
<script type="text/javascript">
twttr.anywhere(function(T) {
T("#login").connectButton({
authComplete: function(user) {
myApp.login(user);
},
signOut: function() {
myApp.logout();
}
});
});
</script>

38. OAuth 2.0
• Draft spec
• (http://github.com/daveman692/OAuth-2.0)
• Using the client-only profile
• OAuth 1.0 endpoint is recommend
• Eventual migration plan to OAuth 2.0

39. jQuery(function () {
twttr.anywhere(function (T) {
if (T.isConnected()) {
myApp.login(T.currentUser);
$("#signout").bind("click", function () {
twttr.anywhere.signOut();
});
}
else {
T("#login").connectButton();
}
});
});

40. YUI().use("node", function(Y) {
Y.on("domready", function () {
twttr.anywhere(function (T) {
if (T.isConnected()) {
myApp.login(T.currentUser);
Y.one("#signout").on("click", function () {
T.anywhere.signOut();
});
}
else {
T("#signin").connectButton();
}
});
});
});

41. <span id="follow"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
T.bind("authComplete", function (e, user) {
myApp.login(T.currentUser);
});
T.bind("signOut", function (e) {
myApp.logout();
});
T("#follow").followButton();
});
</script>

42. Tools

43. Linkify Users

44. @ded
@<a href="http://twitter.com/ded" class="twitter-anywhere-user">ded</a>

45. <script type="text/javascript">
twttr.anywhere(function (T) {
T.linkifyUsers();
});
</script>

46. <script type="text/javascript">
twttr.anywhere(function (T) {
T("#main").linkifyUsers({ className: "t-user" });
});
</script>

47. <script type="text/javascript">
twttr.anywhere(function (T) {
T(selector).linkifyUsers(options);
});
</script>

48. http://dev.twitter.com/anywhere/begin

49. Follow Button

50. <span id="follow"></span>
<script type="text/javascript">
twttr.anywhere(function(T) {
T("#follow").followButton('ded');
});
</script>

51. TweetBox

52. <div id="tbox"></div>
<script type="text/javascript">
twttr.anywhere(function(T) {
T("#tbox").tweetBox();
});
</script>

53. Hovercards

54. Tools
• Linkify Users
• Follow Button
• Hovercards
• Tweetbox

55. API

56. http://platform.twitter.com/js-api.html
<script src=".../anywhere.js?id=API_KEY&v=chirp_preview"></script>
<script type="text/javascript">
twttr.anywhere.config({
assetHost: 'twitter-anywhere.s3.amazonaws.com'
});
twttr.anywhere(function(T) {
// YOUR CODE HERE
});
</script>

57. twttr.anywhere(function(T) {
T.User.find('dsa', function (user) {
console.log(user.profile_image_url);
});
});

58. twttr.anywhere(function(T) {
T.User.find('dsa', {
success: function (user) {
console.log(user.profile_image_url);
},
error: function () {
// Handle error
}
});
});

59. twttr.anywhere(function(T) {
T.User.find('dsa', function (user) {
user.followers(function (users) {
users.each(function (user) {
console.log(user.name);
});
})
});
});

60. twttr.anywhere(function(T) {
T.User.find('dsa').followers().each(function (user) {
console.log(user.screenName);
});
});

61. http://platform.twitter.com/js-api.html

62. Versioning

63. /anywhere.js?id=API_KEY&v=1"></script>
<script type="text/javascript">
twttr.anywhere(function(T) {
T.hovercards();
});
</script>

64. /anywhere.js?id=API_KEY&v=1.1"></script>
<script type="text/javascript">
twttr.anywhere(function(T) {
T.hovercards();
});
</script>

65. /anywhere.js?id=API_KEY"></script>
<script type="text/javascript">
twttr.anywhere("1", function(T) {
T.hovercards();
});
twttr.anywhere("1.4", function(T) {
T.uberTweetBox();
});
</script>

66. Window
Targeting

67. <script src="http://platform.twitter.com/anywhere?id=api_key&v=1"></script>
<div id="placeholder"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#placeholder").tweetBox();
});
var frameWin = document.getElementById("#iframe-1").contentWindow;
twttr({ window: frameWin }).anywhere(function (T) {
T.hovercards();
});
</script>

68. Browser
Support

69. Browser Support
• IE 6, 7, and 8
• FF 3.x
• Safari 4
• Opera 10
• Chrome 4

70. Support

71. @Anywhere Support
• Docs
• Forums
• Bugs
• @Anywhere, @ded, @dsa, @danwrong,
@todd

72. http://dev.twitter.com/anywhere/begin

73. http://groups.google.com/group/twitter-dev-anywhere/

74. http://code.google.com/p/twitter-api/issues/list

76. The Road Ahead
• Widget customization
•Styling
•Events
• HTTPS
• Subdomain support

77. Q&A