In a previous post we walked through a way to get a Facebook feed onto your site.
This post is about a more robust(?) way to get the work done!
This solution always provides you with a valid access token. You don’t have to create one yourself.
First the code and the walkthrough below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$app_id = 'APP_ID'; $app_secret = 'APP_SECRET'; $my_url = 'http://localhost:8888/Facebook/FQL'; $page_id = '164076286984711'; $token_url = 'https://graph.facebook.com/oauth/access_token?client_id=' . $app_id . '&redirect_uri=' . urlencode($my_url) . '&client_secret=' . $app_secret . '&grant_type=client_credentials'; $access_token = substr(file_get_contents($token_url), 13); $fql_query_url = 'https://graph.facebook.com/' . 'fql?q=SELECT+message,attachment+FROM+stream+WHERE+source_id=' . $page_id . '&access_token=' . $access_token; $fql_query_result = file_get_contents($fql_query_url); $fql_query_obj = json_decode($fql_query_result, true); |
Line 1 – 4: Fill in your app id, app secret, the redirect url and the page id you want the feed from.
Line 6 – 9: Here we get an access token (app token) with grant type of client_credentials. Read more about Facebook access tokens.
On line 13 – 16 we query the Facebook graph API to get the data from our page. We use FQL to fetch the result. Read more about FQL and what data to get from the tables.
Line 17 then JSON-decodes the response in an array.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php foreach ( $fql_query_obj['data'] as $data ) : ?> <div class="message"> <p><?php echo $data['message']; ?></p> <?php $images = @$data['attachment']['media']; ?> <?php if ( $images ) : ?> <?php foreach ( $images as $image ) : ?> <p><img src="<?php echo $image['photo']['images'][1]['src']; ?>" /></p> <?php endforeach; ?> <?php endif; ?> </div> <?php endforeach; ?> |
We run through the data with foreach.
On line 4 we get any attachments and suppress any warnings/notices with the @-sign (@$data).
We then run a inline foreach to get all the attachments (only photos in this case) and echos out the src for the image. Note that the [1] on line 7 gets the second element in the array. Without any deeper investigation I believe you get the largest image. The first element is the small (_s), thumb. (See below for an alternative solution).
In the $image object there is ‘src’ ($image['src']), where you get the small source (_s). You can then use the same replace-method in the previous post to get the normal (_n) one.
A twitter friend asked me about creating a custom feed for a Facebook wall. Pretty easy with the php sdk, but when I looked at the source it turns out I made it another way. Better or worse? You tell me.
PHP’s file_get_contents. Here goes.
|
1 |
$content = file_get_contents('https://graph.facebook.com/galleriaduvan/posts?access_token=ACCESS_TOKEN'); |
You need an access token for this, get one like this (small warning, it may expire). Create a Facebook app and add the client_id and client_secret like below.
https://graph.facebook.com/oauth/access_token?client_id=6410********7221&client_secret=b4a761c0a6************9692ffd58&grant_type=client_credentials
This will return the access token needed to get the content of the Facebook page.
Now your variable $content (from above) will contain a JSON-feed.
Decode it with
|
1 |
$content = json_decode($content, true); |
Then run a foreach to output the array (see below for code explanation).
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php foreach ( $content['data'] as $fb ) : ?> <?php if ( $fb['message'] ) : ?> <div> <?php echo wpautop($fb['message']) ?> <?php $replace = array('_s.jpg', '_s.png') ?> <?php if ( $fb['picture'] ) : ?> <p><img src="<?php echo str_replace($replace, '_n.jpg', $fb['picture']) ?>" /></p> <?php endif ?> <time datetime="<?php echo $fb['updated_time'] ?>"><?php echo nicetime($fb['updated_time']) ?></time> </div> <?php endif ?> <?php endforeach ?> |
Line 2: If there is Facebook wall posts (called messages in the JSON) then on line 4 output the message with the WordPress wpautop-function
If there is a image (line 6) then print the image but replace the small feed image with a bigger one (from _s (small) to _n (normal).
On line 9 output the updated time with a custom time ago-function. Tho you could use WordPress built in function for this: human_diff_time
It is time! Time to talk Handlebars and how to use them in Ember.js or how Ember uses Handlebars.
If you want to follow along, get a copy of the Ember Starter Kit.
Open up the app.js and add the following code right before the App.Router.
|
1 2 3 |
App.personController = Ember.ArrayController.create({ content: [{name: 'Adam'}, {name: 'James'}] }); |
(we are creating (create();) an instance of a class, therefor we use a lower case – personController, while when extending (extend();) a class we use a capital letter)
Here we are creating a controller naming it personController, and setting its content to some static content.
In your index.html put the following right after the body.
|
1 2 3 4 5 |
<script type="text/x-handlebars"> {{#each App.personController}} <p>{{name}}</p> {{/each}} </script> |
The ‘each’ loops through the content in the personController and outputs each name. The ‘#’ means start of the handlebar view and ‘/’ is the end point.
Run the app and it should output:
Adam
James
To enhance the app somewhat we add a model. Right before the personController add:
|
1 2 3 |
App.Person = Em.Object.extend({ name: null }); |
This adds a new model, class (whatever you want to call it). Setting a name and setting it to null is not necessary but it can help to remember what properties the model exists of(f)(?) <- (hey I'm swedish).
Add this to your personController:
|
1 2 3 4 5 6 7 |
init: function() { this._super(); var person = App.Person.create({ name: 'Linda' }); this.pushObject(person); } |
this._super(); calls the parent class (super is a reserved to JavaScript hence the underscore _ ) and you need to do this inside the init so the init method will be called all the way up the prototype chain. (source Cerebris)
Then we create a instance (person) of the class Person and set its name property to ‘Linda’ and finally push (add) this to the content array.
Running the app should yield the following result:
Adam
James
Linda
Doing a console.log() last in init reveals the following:
The first two are objects but the last one is ‘c’, the one we created from a class, stand s for class?
I guess with Ember 1.0.0-PRE.2 the smallest application is.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application' }); App.ApplicationController = Ember.Controller.extend(); App.Router = Ember.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/' }) }) }); App.initialize(); |
An Ember-app MUST have the ApplicationView and the ApplicationController. It must be named exactly like that and without it the root view could not render any content.
The router is keeping track of your app’s state. The router must have two routes. The first must be named root and the second (index) is where Ember looks at the init, must have ‘/’ as path.
Next we are going to check out a more hands on example. Building a small app with some Ember outlets and look at how the template system (Handlebars) is working.
This guy is a lot smarter than me, check out the video
Model, View, Controller. That spells M V C.
The model is where the data is kept. It’s the blueprint. For example: Model describes a Person. A Person has a name and an age. In Ember.js we create a model like this.
|
1 2 3 4 |
App.Person = Ember.Object.extend({ name: null, age: null }); |
The view is the visual layer. It’s what you see and interact with. A form, a bullet list etc. To define a view type:
|
1 |
App.PersonView = Ember.View.extend(); |
And last but not least the controller. The controller is the bridge between the model and the view. When someone, for example, clicks a button the controller gets input from the view and preforms actions on the model (CRUD).
|
1 |
App.PersonController = Ember.Controller.extend(); |
In the controller the information about your (in this case) Person(s) will be stored.
And that wraps it up for this time.
Every Ember.js app needs to have:
|
1 |
window.App = Ember.Application.create(); |
where App is the name of your application. You could call it Whatever, but it should probably have a name that relates to the app you’re building. It has to start with a capital letter tho, in order for bindings (huh?, more on this later) to find it.
Then to start your app add:
|
1 |
App.initialize(); |
Congrats! You have created your first Ember-app. Totally useless, but hey hang on!
Like jQuery, Ember.js has a ready-function that fires when the DOM is ready. Add this to your Ember.Application.create();
|
1 2 3 |
ready: function(){ alert("Hello Ember.js (world), goodbye sanity!?"); } |
Now our finished application looks lite this:
|
1 2 3 4 5 6 |
window.App = Ember.Application.create({ ready: function(){ alert("Hello Ember.js (world), goodbye sanity!?"); } }); App.initialize(); |
This is a series of posts about Ember.js. This is my way to learn the framework, or at least try to learn it. If you want to tag along, great! Get the starter kit at emberjs.com
You’ll prolly wanna run MAMP (or equivalent) or you can run into sandbox security problems when accessing at file://. You have been warned!