-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
307 lines (245 loc) · 12.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<html xmlns:og="http://ogp.me/ns" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en" manifest="hackbook.manifest">
<head>
<title>BeSporty-GetHealthy</title>
<!-- See https://developers.facebook.com/docs/opengraph/ -->
<meta property="og:title" content="Hackbook for Mobile Web" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://apps.facebook.com/mobile-start/" />
<meta property="og:site_name" content="Hackbook for Mobile Web" />
<meta property="og:image" content="http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png"/>
<meta property="fb:admins" content="20901205" />
<!-- See http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<!-- See https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
<link rel="apple-touch-icon" href="http://www.facebookmobileweb.com/hackbook/img/iphone_icon.png" />
<link rel="apple-touch-startup-image" href="http://www.facebookmobileweb.com/hackbook/img/iphone_splash.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.facebookmobileweb.com/hackbook/img/iphone_icon.png" />
<!-- See http://davidbcalhoun.com/2010/viewport-metatag for information on the viewport tag. -->
<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- This initializes the Facebook JS SDK. -->
<div id="fb-root"></div>
<script src=" http://connect.facebook.net/en_US/all.js"></script>
<div id="header">
<div id="back-link" onclick="openPage('root')"><div id="back">< Back</div></div>
<div id="title">Title</div>
<div id="right-block">
<div class="show_when_not_connected">
<a onclick="promptLogin()" class="login-button">
<span>Login</span>
</a>
</div>
</div>
</div>
<div id="action">
<div id="loading-icon"></div>
<div id="msg"></div>
</div>
<!-- Page: Homepage -->
<div id="page-temp" class="page">
<div class="show_when_connected">
<div id="welcome"><img id="user-picture" /><br /><span id="user-name"></span></div>
</div>
<ul>
<li class="menu-item" onclick="openPage('Login');">Login and Permissions</li>
<li class="menu-item" onclick="openPage('Requests');">Requests</li>
<li class="menu-item" onclick="openPage('News-Feed');">News Feed</li>
<li class="menu-item" onclick="openPage('Graph-API');">Graph API</li>
<li class="menu-item" onclick="openPage('Credits');" id="credits-button">Credits</li>
<!-- <li class="menu-item" onclick="openPage('Social-Plugins');">Social Plugins</li> -->
</ul>
<div id="like-button"><fb:like url="http://www.cnn.com/" width="275"></fb:like></div>
</div>
<!-- Page: Login and Permissions -->
<div id="page-root" class="page">
<div class="section">
<div id = "sporty-friends" style= "width:50%; margin : 20px auto"></div>
<div class="show_when_not_connected">
<li id="login_button" class="menu-item" onclick="promptLogin()" />Login</li>
</div>
<div class="show_when_connected">
<ul>
<li class="menu-item" onclick="openPage('Credits');getUserFriends();">Compare Yourself To Your Friends</li>
<li id="login_button" class="menu-item" onclick="logout()" />Logout</li>
</ul>
<!-- <div id="login_button" class="button" onclick="uninstallApp()" />Uninstall app</div> -->
</div>
</div>
</div>
<div id="page-friends" class="page">
<h1>Get user's friends</h1>
<p>
To make your mobile web app social, you can fetch their friends' information like profile pictures and names.
</p>
<div id="user-friends"></div>
<div class="button button-requires-connect" onclick="getUserFriends();hideButton(this);" />Get your friends</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
<!-- Page: Requests -->
<div id="page-Requests" class="page">
<p id="main-desc">
Requests allows the user to invite their friends to the app, or to re-engage their friends so they come back to your app.
Friends receive requests in Notifications on Facebook.
<br /><br />
<strong>Check out the mobile web app tutorial at <a href="http://developers.facebook.com/docs/mobile/web/build//">developers.facebook.com/docs/mobile/web/build/</a></strong>
</p>
<div class="section">
<h1>Request</h1>
<p>
If you show the request dialog with no friend suggestions, it will automatically show friends that are using your app, as well as friends that have already used your app.
</p>
<div id="request_button" class="button" onclick="sendRequestBoth()" />Send request</div>
</div>
<div class="section">
<h1>Invite friends not using app</h1>
<p>
The user can invite their friends that have not started using your application yet. This will help grow your mobile website virally.
</p>
<div id="request_button" class="button button-requires-connect" onclick="sendRequestInvite()" />Send invite</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
<div class="section">
<h1>Request to app friends</h1>
<p>
If a friend of the active user needs to take an action in your mobile web app, you can prompt them to send a request.
This can be used for re-engagement, like telling a friend it's their turn in a board game.
</p>
<div id="request_button" class="button button-requires-connect" onclick="sendRequest()" />Send request</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
<div class="section">
<h1>Request to targeted friend</h1>
<p>
If the user's friends need to take an action in your mobile website, you can prompt them to send a request.
This can be used for things like telling a friend it is their turn in a board game.
</p>
<div id="request_button" class="button button-requires-connect" onclick="sendRequestSingle()" />Send request</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
</div>
<!-- Page: News Feed -->
<div id="page-News-Feed" class="page">
<p id="main-desc">
Your app can prompt users to share on their own wall or their friend's wall.
<br /><br />
<strong>Check out the mobile web app tutorial at <a href="http://developers.facebook.com/docs/mobile/web/build//">developers.facebook.com/docs/mobile/web/build/</a></strong>
</p>
<div class="section">
<h1>Publishing to the user's wall</h1>
<p>
This allows a user to post something to their own Wall, which means it will also appear in all of their friends' News Feeds on Facebook.
</p>
<div id="publish_button" class="button" onclick="publishStory()" />Publish to your wall</div>
</div>
<div class="section">
<h1>Publish to a friend's wall</h1>
<p>
This allows a user to post something to their friend's Wall, which means it will also appear in all of their mutual friends' News Feeds on Facebook.
</p>
<div id="publish_button" class="button button-requires-connect" onclick="publishStoryFriend()" />Publish to friend's wall</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
</div>
<!-- Page: Graph API -->
<div id="page-Graph-API" class="page">
<p id="main-desc">
The Graph API enables you to read and write data to Facebook.
You can utilize what the user has liked, friends, photos, events, as well as most of the data that's available on Facebook.<br /><br />
<strong>Check out the mobile web app tutorial at <a href="http://developers.facebook.com/docs/mobile/web/build//">developers.facebook.com/docs/mobile/web/build/</a></strong>
</p>
<div class="section">
<h1>Get Sport Data</h1>
<p>
All Sport Data
</p>
<div id="sport-data"></div>
<div id="sport-data-friend"></div>
<div class="button button-requires-connect" onclick="fetchSportData();hideButton(this);" />Get Sport Data</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
<div class="section">
<h1>Get user's basic information</h1>
<p>
You can fetch the user's profile picture and name in order to personalize the experience for them.
</p>
<div id="user-info"></div>
<div class="button button-requires-connect" onclick="getUserBasicInfo();hideButton(this);" />Get your information</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
<div class="section">
<h1>Get user's friends</h1>
<p>
To make your mobile web app social, you can fetch their friends' information like profile pictures and names.
</p>
<div id="user-friends"></div>
<div class="button button-requires-connect" onclick="getUserFriends();hideButton(this);" />Get your friends</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
<div class="section">
<h1>Get user's recent check-ins</h1>
<p>
You can fetch fetch their previous Facebook Places check-ins.
</p>
<div id="checkins"></div>
<div class="show_when_not_permissioned">
<div class="button button-requires-connect" onclick="promptCheckInPermission()" />Grant check-in permission</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
<div class="show_when_permissioned">
<div class="button" onclick="getCheckIns();hideButton(this);"/>Get past check-ins</div>
</div>
</div>
<div class="section">
<h1>Check the user into a place</h1>
<p>
You can fetch Places near the user's current location and check the user in.
</p>
<div id="locations-nearby"></div>
<div class="show_when_not_permissioned">
<div class="button button-requires-connect" onclick="promptCheckInPermission()" />Grant check-in permission</div>
<div class="info-requires-connect">You need to login before you can use this functionality.</div>
</div>
<div class="show_when_permissioned">
<div class="button" onclick="getNearby();hideButton(this);" />Find nearby locations</div>
</div>
</div>
</div>
<!-- Page: Credits -->
<div id="page-Credits" class="page">
<p id="main-desc">
Pick some friends.
</p>
<div id="friends"></div>
</div>
<!-- Page: Social Plugins -->
<div id="page-Social-Plugins" class="page">
<p id="main-desc">
How do y'all compare...? [based on Endomondo and MapMyRun]
</p>
<div style = "width:70%;margin:20px auto; font-size:18px;color: #666">
<div class="section">
<div id="yourstats"></div>
<div id="friendstats"></div>
<p><div id="statresults"></div></p>
</div>
</div>
</div>
<!-- Page: Social Plugins -->
<div id="page-pick-friend" class="page">
<p id="main-desc">
Pick some friends.
</p>
<div id="friends"></div>
</div>
<script src="js/_config.js"></script>
<script src="js/ui.js"></script>
<script src="js/auth.js"></script>
<script src="js/feed.js"></script>
<script src="js/graph_api.js"></script>
<script src="js/requests.js"></script>
<script src="js/credits.js"></script>
</body>
</html>