facebook.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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. // Here will be a function that'll create a dialog box to post upon your own wall.
  69. function posttoFeed() {
  70. FB.ui({
  71. method: 'Feed',
  72. name: 'Django-Hackathon-Starter',
  73. caption: 'starter dialog box',
  74. description: 'This is a wall post brought to you by the Hackathon Starter',
  75. message: 'It is alive!'
  76. },
  77. function(response){
  78. if (response && response.post_id){
  79. alert('post was published');
  80. } else {
  81. alert('post was not published');
  82. }
  83. });
  84. }
  85. </script>
  86. <!--
  87. Below we include the Login Button social plugin. This button uses
  88. the JavaScript SDK to present a graphical Login button that triggers
  89. the FB.login() function when clicked.
  90. -->
  91. <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
  92. </fb:login-button>
  93. <input type="button" onclick="posttoFeed()" value="Post to Feed" />
  94. <div id="status">
  95. </div>
  96. </body>
  97. </html>