Firstly, I apologise for any bad formatting as this is a copy and paste from my wiki...
Using the Facebook Open Graph, certain data and information can be requested from Facebook pages/profiles and shown (fed into) a website page. This entry will focus on the processes used to retrieve data from Facebook pages - particularly Facebook page photo albums. For this to happen successfully, a Facebook application needs to be created on a personal account. It's strongly recommended for this app to be created on a Facebook profile that manages the Facebook page where the data is being retrieved.
Firstly, will break the process down into the necessary steps to get the Facebook data to appear in a Squiz website page:
- Create a Facebook Application and record the App ID and the secret code
- Use the Facebook Open Graph page to formulate the correct GET query Recommend referring to FB docs for assistance with syntax
- Copy the GET query (along with app client ID and secret in the string)
- Create a REST Resource in Squiz Matrix and paste the GET query into the HTTP request field and run a test to check that it returns correct JSON feed
- Create a JSON Data Source asset and then nest the previously created REST Resource into the JSON Data Source field (details screen)
- Select "View JSON Data" from the JSON Data Source asset to check that feed is coming through properly
- Configure the JSON Data Attributes and JSON Root Object parameters to ensure that it retrieves data from the correct "position" within the feed
- Create a new asset listing asset
- Create code in the Type Formats folder that uses the keywords available from the JSON Data Source
- develop, test, debug, test, rinse, repeat until you are happy with results.
Will now break each of these steps down into sections and provide more detailed information.
Create Facebook App
Whilst logged into Facebook, you will need to go to https://developers.facebook.com/ and in the top right-hand corner, there is an option to view your existing applications and also the option to create a new application (when you hover over the section). So create a new application. Firstly, fill out the relevant fields in the modal window that appears. You will then see a Product Setupscreen with many options. Don't go into any of these options unless you need to. Instead, go to the LHM and select the dashboard link/button at the top. Copy down the App ID and the App Secret. Don't use the Facebook SDK option as it is not necessary for this operation and introduces increased security risks when the access token is exposed (unless the operation asks for the user to login and generate their own user access token on the fly.
Use Facebook Open Graph
Access the FB Open Graph (OG) tool here https://developers.facebook.com/tools/explorer/ and formulate your GET query to return JSON feed with the data that you want. In this case, we want to retrieve the image URLs of photos within a Facebook page's album. For this, we run this particular query to retrieve MadeToday photo album on the Edge SLQ Facebook Page:
{album ID}/photos?fields=source&access_token={app ID}|{app secret}
Note: The access token is made up from the App ID and App secret, separated by a pipe character. Once you can successfully see the JSON data feed in the results window, your GET query is good to go. You can append other functions to the query (such as limiting the results). Please refer to the Open Graph API reference docs for more information athttps://developers.facebook.com/docs/graph-api/reference/v2.7/album/photos
Put the GET query into Squiz REST Resource asset
Now that the (HTTP) GET query pulls back the information that you need as a JSON data object, you can put that request into the Squiz Matrix REST Resource asset to have it generate the JSON feed into the system. Great thing about this is that it performs the operation completely server-side and does not expose sensitive information about the app like the access token, App ID or App Secret.
So paste the GET query that you formulated in the FB OG tool into the URL field. Make sure that you prepend this URL to the query:
So that the full query within the REST Resource reads like this:
https://graph.facebook.com/{album ID}/photos?fields=source&access_token={app ID}|{app secret}
Test and make sure that the GET request pulls back the same JSON data object that you got from the Open Graph tool.
Create a JSON Data Source asset
Create a new JSON Data source asset and nest in the previously created REST Resource asset as a data source. You could technically enter the GET request directly into the URI field within this asset, therefore removing the dependency on the REST Resource asset. Haven't tested this out yet.
Once you have successfully nested the JSON data source. Save the asset and then check that it pulls back the JSON data feed/object by right clicking on the asset and choosing "View JSON Data" from the contextual menu. The next step is to parse the data from the JSON data object into an Asset Listing asset, but firstly the feed will need to have it's JSON Data Attributes set and also the root node for the keyword replacements to work properly. For this instance, we used data.source for the "JSON Data Attribute and set the root node as "data".
Render JSON data to HTML
Firstly, create a new Asset Listing asset. Go to the "Details" screen and make sure that it points to the correct tree location where the JSON Data Source asset lives. For me it actually worked best if I made the actual JSON Data source asset the root node location. Then select Data Source Record Set as the type of asset to list (I have no idea why JSON Data Source does not work for me, perhaps a bug?).
In the Page Contents screen, insert the framework HTML and wrap it around the keyword %asset_listing% in whatever fashion you desire. We used Bootstrap grid for this particular implementation and some custom markup:
<div class="grid-item col-xs-12 col-sm-6 col-md-4"> <div class="grid-content homepage-html" id="homepage-fb-EdgeMakeToday"> %asset_listing% </div>--> <!-- /.grid-content --> </div> <!-- /.grid item -->
Then go into the Type formats folder and then select the Default Format bodycopy and insert the relevant keywords to print the JSON data objects into the HTML:
<div id="fb-edgeAlbum-image" style="background-image: url(%ds__source%); background-size: cover; background-repeat: no-repeat; height: 285px;"> <h3>The Edge</h3> <p><a href="https://www.facebook.com/theedgeqld/photos/?tab=album&album_id=10152939029743105">#MadeToday</a></p> </div>
The important (and the only) keyword used in this instance is %ds__source%. In this implementation, we only want the most recent image from the photo album so we restrict the asset listing to only show 1 item.
Showing widget in web page
The final step is to nest the asset listing into a standard page. If you have followed all the previous steps correctly, this should work fine.
Note: this implementation is fairly simple and straightforward because the only data we were retrieving was the image source URL from the Facebook page album. Obviously implementation will change depending on what data you need to retrieve and the necessary keywords required to display the content.