-
Notifications
You must be signed in to change notification settings - Fork 0
/
setup.html
92 lines (80 loc) · 4.49 KB
/
setup.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
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
pre {
background-color: #CCC;
width: 850px;
padding: 10px;
}
</style>
<title>Facebook Reflector - Setup</title>
</head>
<body>
<h1>Facebook Reflector</h1>
<p>Follow these steps to add your Facebook profile feed to your website or blog.</p>
<h2>Step 1 - Register your website</h2>
<p>Visit <a href="http://developers.facebook.com/setup/" target="_blank">this site</a> and register your website with Facebook.</p>
<p>The 'Site URL' must match the location where you plan to install your feed (which should also be the domain this setup page is running from).</p>
<h2>Step 2 - Facebook Authorization</h2>
<p>Enter the Application ID you were assigned (from the previous step), and connect your site with Facebook</p>
<div>
<input type="text" id="app-id">
<button id="connect">Connect</button>
<button id="disconnect">Disconnect</button>
</div>
<div id="step3" style="display: none;">
<h2>Step 3 - Paste this code into your website</h2>
<p>Copy and paste the following code into your website, immediately below the <body> tag:</p>
<pre><code id="header-code"></code></pre>
<p>Then paste the following code at the point in your webpage where you want to display your facebook feed:</p>
<pre><code id="insert-code"></code></pre>
<p>You can create your own CSS stylesheet to control how the feed is displayed. If you would like to use
the included sample stylesheet, add the following in the <head> section of your page:</p>
<pre><code><link href="fbreflector.css" rel="stylesheet" type="text/css" media="all"/></code></pre>
<h2>Step 4 - Delete this file (optional)</h2>
<p>Once you have everything working you can delete this setup.html file</p>
<div id="user-info"></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
// Check if we are connected on load
if ($('#app-id').val()) {
FB.init({ appId: $('#app-id').val() });
FB.getLoginStatus(handleSessionResponse);
}
// Hide step 3
function clearDisplay() {
$('#step3').hide('fast');
}
$('#connect').bind('click', function() {
if ($('#app-id').val()) {
FB.init({ appId: $('#app-id').val() });
FB.login(handleSessionResponse, { perms: 'read_stream, user_photo_video_tags, user_photos, offline_access' });
}
});
$('#disconnect').bind('click', function() {
FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
clearDisplay();
});
});
// handle a session response from any of the auth related calls
function handleSessionResponse(response) {
// if we dont have a session, hide the code
if (!response.session) {
clearDisplay();
return;
}
var header_code = "<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="fbreflector.js"></script> <div id="fb-root"></div> <script> var fbr_access_token; var fbr_user_id; var fbr_config = {}; window.fbAsyncInit = function() { FB.init({appId: '" + $('#app-id').val() + "', status: true, cookie: true, xfbml: true}); fbr_access_token = '" + response.session.access_token + "'; fbr_user_id = '" + response.session.uid + "'; //fbr_config['show_comments'] = false; fbr_init(); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>";
var insert_code = "<div id="fb-reflector"></div>";
// If we have a session, display step 3
$('#header-code').html(header_code);
$('#insert-code').html(insert_code);
$('#step3').show('fast');
}
</script>
</body>
</html>