facebook.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Facebook Login JavaScript Example</title>
  5. <meta charset="UTF-8">
  6. </head>
  7. <body>
  8. {% include 'hackathon/base.html' %}
  9. <script>
  10. // This is called with the results from from FB.getLoginStatus().
  11. function statusChangeCallback(response) {
  12. console.log('statusChangeCallback');
  13. console.log(response);
  14. // The response object is returned with a status field that lets the
  15. // app know the current login status of the person.
  16. // for FB.getLoginStatus().
  17. if (response.status === 'connected') {
  18. // Logged into your app and Facebook.
  19. testAPI();
  20. } else if (response.status === 'not_authorized') {
  21. // The person is logged into Facebook, but not your app.
  22. document.getElementById('status').innerHTML = 'Please log ' +
  23. 'into this app.';
  24. } else {
  25. // The person is not logged into Facebook, so we're not sure if
  26. // they are logged into this app or not.
  27. document.getElementById('status').innerHTML = 'Please log ' +
  28. 'into Facebook.';
  29. }
  30. }
  31. // This function is called when someone finishes with the Login
  32. // Button. See the onlogin handler attached to it in the sample
  33. // code below.
  34. function checkLoginState() {
  35. FB.getLoginStatus(function(response) {
  36. statusChangeCallback(response);
  37. });
  38. }
  39. window.fbAsyncInit = function() {
  40. FB.init({
  41. appId : {{yourappid}},
  42. cookie : true,
  43. xfbml : true, // parse social plugins on this page
  44. version : 'v2.2' // use version 2.2
  45. });
  46. FB.getLoginStatus(function(response) {
  47. statusChangeCallback(response);
  48. });
  49. };
  50. // Load the SDK asynchronously
  51. (function(d, s, id) {
  52. var js, fjs = d.getElementsByTagName(s)[0];
  53. if (d.getElementById(id)) return;
  54. js = d.createElement(s); js.id = id;
  55. js.src = "//connect.facebook.net/en_US/sdk.js";
  56. fjs.parentNode.insertBefore(js, fjs);
  57. }(document, 'script', 'facebook-jssdk'));
  58. // Here we run a very simple test of the Graph API after login is
  59. // successful. See statusChangeCallback() for when this call is made.
  60. function testAPI() {
  61. console.log('Welcome! Fetching your information.... ');
  62. FB.api('/me', function(response) {
  63. console.log('Successful login for: ' + response.name);
  64. document.getElementById('status').innerHTML =
  65. 'Thanks for logging in, ' + response.name + '!';
  66. });
  67. }
  68. </script>
  69. <!--
  70. Below we include the Login Button social plugin. This button uses
  71. the JavaScript SDK to present a graphical Login button that triggers
  72. the FB.login() function when clicked.
  73. -->
  74. <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
  75. </fb:login-button>
  76. <div id="status">
  77. </div>
  78. </body>
  79. </html>