Skip to content

Commit 863232c

Browse files
pstrinklepstrinkle
committed
documentation update!
1 parent 0a43104 commit 863232c

File tree

2 files changed

+129
-23
lines changed

2 files changed

+129
-23
lines changed

‎README.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ Usage
1414
This is simpler, but does require that you initial the Facebook API in your page already, something like the following:
1515

1616
```html
17+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
18+
<script src="jquery-facebook-authorize/jquery.facebook-authorize.min.js"></script>
19+
20+
<script>
1721
window.fbAsyncInit = function() {
1822
FB.init({
1923
appId : XXXXXXXXXXXXXXXXXXXXXXX,
@@ -30,9 +34,8 @@ window.fbAsyncInit = function() {
3034
js.src = "//connect.facebook.net/en_US/sdk.js";
3135
fjs.parentNode.insertBefore(js, fjs);
3236
}(document, 'script', 'facebook-jssdk'));
37+
</script>
3338

34-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
35-
<script src="jquery-facebook-authorize/jquery.facebook-authorize.min.js"></script>
3639

3740
<div id='error_msgs'></div>
3841

‎index.html

+124-21
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
99
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
1010
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
11+
12+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
1113
</head>
1214
<body>
1315
<section class="page-header">
@@ -19,39 +21,140 @@ <h2 class="project-tagline">jQuery Plugin to simplify the process of requesting
1921
</section>
2022

2123
<section class="main-content">
22-
<h3>
23-
<a id="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Welcome to GitHub Pages.</h3>
24+
<h3><a id="basics" class="anchor" href="#basics" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>The Basics</h3>
25+
<p>jQuery Plugin to simplify the process of requesting Facebook permissions, such that you only proceed forward in sign-up once the user has granted all you require.</p>
2426

25-
<p>This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here <a href="https://guides.github.com/features/mastering-markdown/">using GitHub Flavored Markdown</a>, select a template crafted by a designer, and publish. After your page is generated, you can check out the new <code>gh-pages</code> branch locally. If you’re using GitHub Desktop, simply sync your repository and you’ll see the new branch.</p>
27+
<h3>Installation</h3>
28+
<p>Basically just include the file and set up the Facebook API on the page.
2629

27-
<h3>
28-
<a id="designer-templates" class="anchor" href="#designer-templates" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Designer Templates</h3>
30+
<pre class="prettyprint lang-html">
31+
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
32+
&lt;script src="/libs/jquery-facebook-authorize/jquery.facebook-authorize.min.js"&gt;&lt;/script&gt;
2933

30-
<p>We’ve crafted some handsome templates for you to use. Go ahead and click 'Continue to layouts' to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved.</p>
34+
&lt;script&gt;
35+
window.fbAsyncInit = function() {
36+
FB.init({
37+
appId : XXXXXXXXXXXXXXXXXXXXXXX,
38+
cookie : true,
39+
xfbml : true, /* parse social plugins on this page. */
40+
version : 'v2.5'
41+
});
42+
};
3143

32-
<h3>
33-
<a id="creating-pages-manually" class="anchor" href="#creating-pages-manually" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Creating pages manually</h3>
44+
(function(d, s, id){
45+
var js, fjs = d.getElementsByTagName(s)[0];
46+
if (d.getElementById(id)) {return;}
47+
js = d.createElement(s); js.id = id;
48+
js.src = "//connect.facebook.net/en_US/sdk.js";
49+
fjs.parentNode.insertBefore(js, fjs);
50+
}(document, 'script', 'facebook-jssdk'));
51+
&lt;/script&gt;
3452

35-
<p>If you prefer to not use the automatic generator, push a branch named <code>gh-pages</code> to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.</p>
53+
&lt;div id='error_msgs'&gt;&lt;/div&gt;
3654

37-
<h3>
38-
<a id="authors-and-contributors" class="anchor" href="#authors-and-contributors" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Authors and Contributors</h3>
55+
&lt;div class='row'&gt;
56+
&lt;button id='facebook_request' class="btn btn-default" style="color:#0b62a4;"&gt;
57+
&lt;i class="fa fa-facebook-square"&gt;&lt;/i&gt; Login with Facebook
58+
&lt;/button&gt;
59+
&lt;/div&gt;
3960

40-
<p>You can <a href="https://help.github.com/articles/basic-writing-and-formatting-syntax/#mentioning-users-and-teams" class="user-mention">@mention</a> a GitHub username to generate a link to their profile. The resulting <code>&lt;a&gt;</code> element will link to the contributor’s GitHub Profile. For example: In 2007, Chris Wanstrath (<a href="https://github.com/defunkt" class="user-mention">@defunkt</a>), PJ Hyett (<a href="https://github.com/pjhyett" class="user-mention">@pjhyett</a>), and Tom Preston-Werner (<a href="https://github.com/mojombo" class="user-mention">@mojombo</a>) founded GitHub.</p>
61+
&lt;script&gt;
62+
$(function() {
63+
var $fbreq = $('#facebook_request');
4164

42-
<h3>
43-
<a id="support-or-contact" class="anchor" href="#support-or-contact" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Support or Contact</h3>
65+
var options = {required : ['public_profile', 'email', 'user_friends', 'publish_actions'],
66+
optional: []};
67+
$fbreq.facebookAuthorize(options);
4468

45-
<p>Having trouble with Pages? Check out our <a href="https://help.github.com/pages">documentation</a> or <a href="https://github.com/contact">contact support</a> and we’ll help you sort it out.</p>
69+
$fbreq.on('facebook-request-clicked', function(event) {
70+
$('#error_msgs').empty();
71+
});
72+
$fbreq.on('facebook-missing-required', function(event, missing) {
73+
$('#error_msgs').text('missing: ' + JSON.stringify(missing));
74+
});
75+
$fbreq.on('facebook-success', function(event, granted, missing, details) {
76+
/* move the user onto whatever step applies. */
77+
createOrLogin(granted, details);
78+
});
79+
$fbreq.on('facebook-not-authorized', function(event) {
80+
$('#error_msgs').text('not authorized');
81+
});
82+
$fbreq.on('facebook-not-loggedin', function(event) {
83+
$('#error_msgs').text('not logged in...');
84+
});
85+
});
86+
&lt;/script&gt;
87+
</pre>
88+
89+
<h3>Usage</h3>
90+
<table class="table">
91+
<thead>
92+
<tr>
93+
<th>Name</th>
94+
<th>Type</th>
95+
<th>Default</th>
96+
<th>Description</th>
97+
</tr>
98+
</thead>
99+
<tbody>
100+
<tr>
101+
<td>required</td>
102+
<td>array</td>
103+
<td><code>[]</code></td>
104+
<td>List of required permissions.</td>
105+
</tr>
106+
<tr>
107+
<td>optional</td>
108+
<td>array</td>
109+
<td><code>[]</code></td>
110+
<td>List of optional permissions.</td>
111+
</tr>
112+
</tbody>
113+
</table>
114+
115+
<h3>Events</h3>
116+
<table class="table">
117+
<thead>
118+
<tr>
119+
<th>Event</th>
120+
<th>Handler</th>
121+
</tr>
122+
</thead>
123+
<tbody>
124+
<tr>
125+
<td><code>facebook-request-clicked</code></td>
126+
<td><code>function(event)</code>: <br>- <code>event</code> - jQuery event</td>
127+
</tr>
128+
<tr>
129+
<td><code>facebook-missing-required</code></td>
130+
<td><code>function(event, missing)</code>: <br>- <code>event</code> - jQuery event <br>- <code>missing</code> - comma separated string of missing required permissions</td>
131+
</tr>
132+
<tr>
133+
<td><code>facebook-success</code></td>
134+
<td><code>function(event, granted, missing, details)</code>: <br>- <code>event</code> - jQuery event <br>- <code>granted</code> - comma separated string of all permissions granted <br>- <code>missing</code> - comma separated list of any missing optional permissions <br>- <code>details</code> - Facebook API response.authResponse object</td>
135+
</tr>
136+
<tr>
137+
<td><code>facebook-not-authorized</code></td>
138+
<td><code>function(event)</code>: <br>- <code>event</code> - jQuery event</td>
139+
</tr>
140+
<tr>
141+
<td><code>facebook-not-loggedin</code></td>
142+
<td><code>function(event)</code>: <br>- <code>event</code> - jQuery event</td>
143+
</tr>
144+
</tbody>
145+
</table>
46146

47-
<footer class="site-footer">
48-
<span class="site-footer-owner"><a href="https://github.com/pstrinkle/jquery-facebook-authorize">jquery-facebook-authorize</a> is maintained by <a href="https://github.com/pstrinkle">pstrinkle</a>.</span>
147+
<h3>License</h3>
148+
<p><a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a></p>
49149

50-
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
150+
<footer class="site-footer">
151+
<!-- <span class="site-footer-owner"><a href="https://github.com/pstrinkle/jquery-levelup">Jquery-levelup</a> is maintained by <a href="https://github.com/pstrinkle">pstrinkle</a>.</span> -->
152+
<a href="https://twitter.com/YammyCozonac" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @YammyCozonac</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
153+
<a class="github-button" href="https://github.com/pstrinkle" data-style="mega" aria-label="Follow @pstrinkle on GitHub">Follow @pstrinkle</a>
154+
<!-- <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span> -->
155+
<script async defer src="https://buttons.github.io/buttons.js"></script>
51156
</footer>
52157

53-
</section>
54-
55-
158+
</section>
56159
</body>
57160
</html>

0 commit comments

Comments
 (0)