forked from hattori/Facebook-friend-selector
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (68 loc) · 3.76 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>These Days Facebook Friend Selector</title>
<style>
body { font-family: sans-serif; color: #333; }
p { clear: left; }
.thesedays { float: left; text-decoration: none; margin: 0 10px 10px 0; }
.thesedays img { padding: 0; border: 0; height: 68px; width: 68px; }
#results { padding: 10px; border: 1px solid #333; font-family: monospace; }
</style>
<link rel="stylesheet" href="tdfriendselector.css" /><!-- Style source: tdfriendselector.scss -->
</head>
<body>
<div id="fb-root"></div>
<a href="http://labs.thesedays.com" class="thesedays"><img src="http://labs.thesedays.com/wp-content/themes/tdlabs/img/these_days.gif" alt="These Days" /></a>
<h1>These Days Facebook Friend Selector</h1>
<p>This is an interface component for websites and Facebook applications which allows your users to make a selection of one or more of their friends. The friends are returned as an array of Facebook IDs. It is similar to the <code>fb:multi-friend-selector</code> component by Facebook, except it can be used to select friends for anything, not just application requests.</p>
<p>Please respect your users and adhere to the <a href="http://developers.facebook.com/policy/" target="_blank">Facebook Platform Policies</a> when using this plugin.</p>
<h2>Example</h2>
<ul>
<li>Status: <span id="login-status">Not logged in</span> | <a href="#" id="btnLogin">Login</a> | <a href="#" id="btnLogout">Log out</a></li>
<li><a href="#" id="btnSelect1" preSelected="1111,2222">Select four friends</a> (You'll need to log in first)</li>
<li><a href="#" id="btnSelect2">Select one friend</a> (You'll need to log in first)</li>
</ul>
<div id="results">
<p>ACTIVITY LOG</p>
</div>
<h2>How to implement</h2>
<p><a href="https://github.com/thesedays/Facebook-friend-selector">These Days Facebook Friend Selector on GitHub</a></p>
<!-- Markup for These Days Friend Selector -->
<div id="TDFriendSelector">
<div class="TDFriendSelector_dialog">
<a href="#" id="TDFriendSelector_buttonClose">x</a>
<div class="TDFriendSelector_form">
<div class="TDFriendSelector_header">
<p>Select your friends</p>
</div>
<div class="TDFriendSelector_content">
<p>Then you can invite them to join you in the app.</p>
<div class="TDFriendSelector_searchContainer TDFriendSelector_clearfix">
<div class="TDFriendSelector_selectedCountContainer"><span class="TDFriendSelector_selectedCount">0</span> / <span class="TDFriendSelector_selectedCountMax">0</span> friends selected</div>
<input type="text" placeholder="Search friends" id="TDFriendSelector_searchField" />
</div>
<div class="TDFriendSelector_friendsContainer"></div>
</div>
<div class="TDFriendSelector_footer TDFriendSelector_clearfix">
<a href="#" id="TDFriendSelector_pagePrev" class="TDFriendSelector_disabled">Previous</a>
<a href="#" id="TDFriendSelector_pageNext">Next</a>
<div class="TDFriendSelector_pageNumberContainer">
Page <span id="TDFriendSelector_pageNumber">1</span> / <span id="TDFriendSelector_pageNumberTotal">1</span>
</div>
<a href="#" id="TDFriendSelector_buttonOK">OK</a>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="tdfriendselector.js"></script>
<script src="example.js"></script>
<script>
// These analytics are here for the page at http://playground.thesedays.com/tdfriendselector/
var _gaq = [["_setAccount", "UA-9800583-2"], ["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;g.src="//www.google-analytics.com/ga.js";s.parentNode.insertBefore(g,s);}(document,"script"));
</script>
</body>
</html>