Showing Facebook page album content

(Ryan Archer) #1

Just want to know if anyone else out there in the Squiz community has attempted to do what I am trying to do.

 

We want to be able to show the latest image within a Facebook page's specific photo album. I have created a FB app and am using Open Graph with JS to get the details that I need and display first image from a specific Facebook Page's photo album as a widget tile within a grid layout page.

 

The main concern is that Facebook appears to force the user to sign in to their Facebook account to generate a token, that then gets used to talk to the FB app and then display the album image.

 

The FB album image is not displayed automatically. Also when coming back to the page, it will not automatically log the user into their facebook account - it still prompts for the login.

 

Has anyone out there made use of Squiz asset types (i.e. OAuth) to grab OG Facebook data from a Facebook page or profile? Is there a way to avoid asking users to sign in every time?

 

I heard that there is a way to do it server-side rather than client-side but that doesn't best suit our needs either. http://stackoverflow.com/questions/38909824/show-facebook-album-without-asking-user-to-login-to-facebook

(Anthony Ponomarenko) #2

The last time I worked with FB was about 3 years ago with a Facebook App that required users to give permission to the App to access their details.

 

Once they had given permission the app could access their data, however as you have found, they need to be logged into Facebook initially or else the app couldnt access anything.

 

I have not attempted anything in Matrix to integrate with Facebook, but from my previous experience it looks like they may have to sign in every time...

(Ryan Archer) #3

Thanks Anthony, it kinda looks that way, except....

https://developers.facebook.com/docs/facebook-login/access-tokens/#apptokens

 

You can apparently setup App Access tokens and that will apparently let me access a Facebook page's album pics.

This problem has nothing (or very little) to do with OAuth under further examination.

 

I need to be able to send off a GET request as detailed in the Facebook developers link above and then it returns the app access token. Then I need to feed that back into my JS SDK and it "should" work. 

 

I have managed to setup a REST Resource asset to generate the GET request and that works well. Next step is trying to capture that string as a variable (ideally a matrix keyword replacement). I tried to setup a JSON Data Source asset (in vain) to collect the output and store it as a matrix keyword. Obviously I'm trying to get a string to be read by a JSON parser and it's not happy about it.

 

Can anyone suggest a better way to store the result of a GET request (via REST Resource) so I can then feed it back into my JavaScript on a standard page asset?

(Anthony Ponomarenko) #4

Have a look into the Rest Resource Javascript Asset. It allows you to do JS processing with the response you get back from Facebook.

(Ryan Archer) #5

Thanks Anthony,

I got the same response back just using the REST Resource and did not have to ask it to print body.

 

I was thinking to try and get the content pushed into a keyword replacement. But now it might just be easier to nest the REST Resource right in the middle of the JS code where the specific value is asked for.

 

Not the tidiest of implementations, but seems the simplest to me right now.

(Ryan Archer) #6

Sorted now with a Rest Resource asset, JSON Data Source asset and an asset listing.

Tricky part was just getting the OG GET request syntax correct.

(Anthony Ponomarenko) #7

Awesome!!

 

If your keen and have some spare time, can you share your findings in the tips and tricks forum section.

 

That would be sweet.

(Ryan Archer) #8

Surely!

 

Fortunately, I keep all this kind of stuff in our web team wiki so people in my team (and even myself!) can see how development was done for future work and such. It's in the Tips and tricks section now.

 

Cheers