Permalink
Browse files

Basic Facebook integration.

  • Loading branch information...
1 parent b3579d0 commit cc2739900854592f7c6532af4613dc5b1df903fe @matthewmcvickar matthewmcvickar committed Aug 5, 2012
Showing with 256 additions and 1 deletion.
  1. +7 −0 channel.php
  2. +154 −0 fb.html
  3. +95 −1 index.html
View
@@ -0,0 +1,7 @@
+<?php
+$cache_expire = 60*60*24*365;
+header("Pragma: public");
+header("Cache-Control: max-age=".$cache_expire);
+header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
+?>
+<script src="//connect.facebook.net/en_US/all.js"></script>
View
154 fb.html
@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8"/>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <title>Facebook Test</title>
+ </head>
+ <body>
+
+<div id="fb-root"></div>
+<script>
+// Initialize SDK.
+window.fbAsyncInit = function() {
+ FB.init({
+ appId : '461888813829980', // App ID
+ channelUrl : 'channel.php', // Channel File
+ status : true, // check login status
+ cookie : true, // enable cookies to allow the server to access the session
+ xfbml : true // parse XFBML
+ });
+
+ // Check login.
+ FB.getLoginStatus(function(response) {
+ if (response.status === 'connected')
+ {
+ // User is logged in to Facebook and has authenticated our app.
+ var uid = response.authResponse.userID;
+ var accessToken = response.authResponse.accessToken;
+
+ // Say hello.
+ FB.api('/me', function(response) {
+ $('h1').html('Hello ' + response.name + '!');
+ });
+
+ // Execute data retrieval.
+ getFacebookData();
+ }
+ else if (response.status === 'not_authorized')
+ {
+ // User is logged in to Facebook but has not authorized our app.
+ $('.fb-login-button').show();
+ }
+ else
+ {
+ // User is not logged in to Facebook.
+ $('.fb-login-button').show();
+ }
+ });
+}
+
+function getFacebookData()
+{
+ // Basic information
+ FB.api('/me', function(response) {
+ var user_information = new Object();
+ user_information.name = response.name;
+ user_information.first_name = response.first_name;
+ user_information.last_name = response.last_name;
+ user_information.birthday = response.birthday;
+ user_information.hometown = response.hometown.name;
+
+ var user_education = [];
+ // Education
+ for (i = 0; i < response.education.length; i++) {
+ if (response.education[i]) {
+ user.school.i.name = response.education[i].school.name;
+ user.school.i.year = response.education[i].year.name;
+ }
+ }
+
+ // Log responses to console.
+ console.log(user_information);
+ console.log(user_education);
+
+ // Output all variables.
+ var output = '';
+
+ for (property in user_information) {
+ output += property + ': ' + user_information[property]+'<br>';
+ }
+ $('#info').html(output);
+
+ for (i = 0; i < user_education.length; i++) {
+ output += i + ': ' + user_education[i]+'<br>';
+ }
+ $('#education').html(output);
+
+ });
+
+ // Photos
+ FB.api("/me/photos", function(response) {
+ if(response.data && response.data[0].images) {
+ for(i = 0; i <= 25; i++) {
+ if(response.data[i] && response.data[i].images[2]) {
+ $('#photos').append( '<img src="' + response.data[i].images[2].source + '" />' );
+ }
+ }
+ }
+ console.log(info);
+ });
+
+ // Albums
+ // for (var i = 0; i < response.data.length; i++) {
+ // var album = response.data[i];
+ // if (album.name == 'Profile Pictures')
+ // {
+ // FB.api('/'+album.id+'/photos', function(photos){
+ // if (photos && photos.data && photos.data.length){
+ // for (var j=0; j<photos.data.length; j++){
+ // var photo = photos.data[j];
+ // // photo.picture contain the link to picture
+ // var image = document.createElement('img');
+ // image.src = photo.picture;
+ // document.body.appendChild(img);
+ // }
+ // }
+ // });
+ //
+ // break;
+ // }
+ // }
+}
+
+// Load the SDK asynchronously.
+(function(d){
+ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
+ if (d.getElementById(id)) {return;}
+ js = d.createElement('script'); js.id = id; js.async = true;
+ js.src = "//connect.facebook.net/en_US/all.js";
+ ref.parentNode.insertBefore(js, ref);
+}(document));
+</script>
+
+<div class="fb-login-button" scope="user_about_me,
+ user_activities,
+ user_birthday,
+ user_education_history,
+ user_groups,
+ user_hometown,
+ user_interests,
+ user_photos,
+ user_status,
+ user_work_history">
+ Login with Facebook
+</div>
+
+<h1>Hello<strong>&hellip;</strong></h1>
+
+<div id="info"></div>
+<div id="education"></div>
+<div id="photos"></div>
+
+ </body>
+</html>
View
@@ -22,6 +22,8 @@
<script src="js/modernizr-2.5.3.min.js"></script>
</head>
<body>
+ <div id="fb-root"></div>
+
<div class="pbs">
Presented by: <strong><img src="img/pbs.png" alt="small PBS logo" title="PBS"> NewsHour</strong>
</div>
@@ -55,7 +57,19 @@ <h1 class="ir">PBS NewsHour AdMaker 2012</h1>
<div class="mask">
<div id="poster">
<h2>Make Your Own<strong>Campaign Ads</strong></h2>
- <h3>Become a Candidate <img src="img/button-play.png"></h3>
+ <h3>Become a Candidate<strong></strong> <img src="img/button-play.png"></h3>
+ <div class="fb-login-button" scope="user_about_me,
+ user_activities,
+ user_birthday,
+ user_education_history,
+ user_groups,
+ user_hometown,
+ user_interests,
+ user_photos,
+ user_status,
+ user_work_history">
+ Login with Facebook
+ </div>
<p>Make a campaign ad all about you&mdash;or your friends! Do you know how political campaign ads work? How they&rsquo;re built? What they&rsquo;re meant to tell you? Most political ads follow a very rigid set of guidelines and fall into one of a few categories. We&rsquo;ve put together a few samples for you to customize with your own information and imagination. It&rsquo;s fun, it&rsquo;s fast, and you&rsquo;ll never watch campaign ads the same again!</p>
</div>
@@ -194,6 +208,86 @@ <h1 class="ir">PBS NewsHour AdMaker 2012</h1>
});
</script>
+ <script>
+// Initialize SDK.
+window.fbAsyncInit = function() {
+ FB.init({
+ appId : '461888813829980', // App ID
+ channelUrl : 'channel.php', // Channel File
+ status : true, // check login status
+ cookie : true, // enable cookies to allow the server to access the session
+ xfbml : true // parse XFBML
+ });
+
+ // Check login.
+ FB.getLoginStatus(function(response) {
+ if (response.status === 'connected')
+ {
+ // User is logged in to Facebook and has authenticated our app.
+ var uid = response.authResponse.userID;
+ var accessToken = response.authResponse.accessToken;
+
+ // Say hello.
+ FB.api('/me', function(response) {
+ $('#poster h3 strong').html(', ' + response.first_name + '!');
+ });
+
+ // Execute data retrieval.
+ getFacebookData();
+ }
+ else if (response.status === 'not_authorized')
+ {
+ // User is logged in to Facebook but has not authorized our app.
+ $('.fb-login-button').show();
+ }
+ else
+ {
+ // User is not logged in to Facebook.
+ $('.fb-login-button').show();
+ }
+ });
+}
+
+function getFacebookData()
+{
+ // Basic information
+ FB.api('/me', function(response) {
+ var user_information = new Object();
+ user_information.name = response.name;
+ user_information.first_name = response.first_name;
+ user_information.last_name = response.last_name;
+ user_information.birthday = response.birthday;
+ user_information.hometown = response.hometown.name;
+
+ // var user_education = [];
+ // // Education
+ // for (i = 0; i < response.education.length; i++) {
+ // if (response.education[i]) {
+ // user_education[i][0] = response.education[i].school.name;
+ // user_education[i][1] = response.education[i].year.name;
+ // }
+ // }
+
+ // Fill in.
+ $('#ad-bio-hometown .text span').html(user_information.hometown + ', USA');
+ $('#ad-bio-diploma .name').html(user_information.name);
+ // $('#ad-bio-diploma .school').html(user_education[0][0]);
+ // $('#ad-bio-diploma .year').html('~ ' + user_education[0][1] + ' ~');
+ $('#ad-bio-wrapup .name').html(user_information.name);
+ $('#ad-bio-wrapup .slogan').html(user_information.bio);
+ });
+}
+
+// Load the SDK asynchronously.
+(function(d){
+ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
+ if (d.getElementById(id)) {return;}
+ js = d.createElement('script'); js.id = id; js.async = true;
+ js.src = "//connect.facebook.net/en_US/all.js";
+ ref.parentNode.insertBefore(js, ref);
+}(document));
+</script>
+
</html>
<!--

0 comments on commit cc27399

Please sign in to comment.