I was taking a look at the some analytics for the blog and I noticed that a lot of people are visiting my Using OAuth and Graph API’s in FaceBook Canvas Apps post. This leads me to believe there are a lot of people with Facebook Canvas app questions looking for more information. On that note, I decided to demonstrate some of the new capabilities of Places in the Graph API. This is a feature Facebook has just recently rolled out and provides for the basis of some new types of apps. An example would be special features or coupons offered to those who have checked-in to a place.
We are also going to try out the new OAuth 2.0. So, make sure you have the options configured for you app like below.
For a canvas app, it is a little easier (in my opinion) to get an active access token. I pulled the following code straight from the Facebook Canvas Authorization page. When your canvas app runs, you receive a signed_request via the $_REQUEST['signed_request'] variables. You can get a more robust explanation of how this data is encoded and decoded at the aforementioned link. Here are the functions that retrieve the signed request data:
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 | function parse_signed_request($signed_request, $secret) { list($encoded_sig, $payload) = explode('.', $signed_request, 2); // decode the data $sig = base64_url_decode($encoded_sig); $data = json_decode(base64_url_decode($payload), true); if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') { error_log('Unknown algorithm. Expected HMAC-SHA256'); return null; } // check sig $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true); if ($sig !== $expected_sig) { error_log('Bad Signed JSON signature!'); return null; } return $data; } function base64_url_decode($input) { return base64_decode(strtr($input, '-_', '+/')); } // retrieve and parse signed request data and store for use $signed_request_results = parse_signed_request($_REQUEST['signed_request'], 'your app secret'); |
Now that we have our access token, Facebook is our oyster. The next chunk of code is going to look familiar from the last OAuth post I wrote. We are doing another CURL call, but this time we are getting the currently logged in user’s check-ins. This returned data is JSON formatted, therefore we can take advantage of PHP json_decode function. This will decode the data php data types.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function getFb($url, $params) { // configure CURL call using "get" method $ch = curl_init(); curl_setopt_array($ch, array( CURLOPT_URL => $url, CURLOPT_RETURNTRANSFER => true )); $result = curl_exec($ch); curl_close($ch); return $result; } // make curl call to graph api and retrieve checkins and decode JSON data $checkIns = json_decode(getFb("https://graph.facebook.com/me/checkins?access_token=".$signed_request_results['oauth_token'])); |
Finally, we are going to parse the data and create a list of check-ins. We can do this in a for loop, extracting the data we need and echoing it to HTML. If the user has zero check-ins, we’ll show an alternate message.
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 | echo '<div class="checkin-rows">'; $count = 0; // loop through JSON data and create a list of the current user's check-ins if(count($checkIns->{'data'}) > 0) { foreach($checkIns->{'data'} as $value) { echo ($count % 2) ? '<div class="alt">' : '<div>'; // show the place's image echo '<img src="https://graph.facebook.com/'.$value->{'place'}->{'id'}.'/picture" class="place-picture" />'; // show the place's name echo '<h2>'.$value->{'from'}->{'name'}." checked in at ".$value->{'place'}->{'name'}.'</h2>'; echo '<p>'; // show the user's message posted at check-in if(strlen($value->{'message'}) > 0) echo '<img src="https://graph.facebook.com/'.$value->{'from'}->{'id'}.'/picture" class="from-picture" /> Comment: '.$value->{'message'}.'<br />'; // show date and time of check-in echo "<small>On ".date('l jS \of F Y h:i:s A', strtotime($value->{'created_time'})).'</small></p>'; echo '</div>'; $count++; } } else { // if the user has never checked in anywhere, show an alternate message echo '<div>'; echo '<h2>No check-ins yet... Go out and explore with your facebook app!</h2>'; echo '</div>'; } echo '</div>'; |
There’s a lot of other info returned in the JSON data. If you want to see what else is available just do a print_r or a var_dump on the $checkIns var. As always, the source and a link to my example app are below.