Blog

The caffeine fuelled writings of a web developer


facebook-graph-api

Facebook Graph API

Posted on March 11th 2016  //  Filed under: Web Development

For those of you who know me through twitter, you’ll know I love the Twitter API and grabbing a full JSON set to play around with. Social media is great to work with because it offers fresh, dynamic content to work with almost every minute.

I wanted to be able to offer a greater social media offering on the websites I build. This is when I decided to finally sit down and create a Facebook Graph API feed from scratch. This is always my preferred approach because I find using WordPress plugins doesn’t fully harness control and you can’t integrate a Facebook and Twitter feed together very easily.

Facebook Graph API

This API is Facebook’s primary interface for reading and writing data. I started off with a simple example of BBC News. After an hour or so work (including reading and set up) I put together a quick script, got my JSON from a PHP service and I ended up with the below.

facebook-feed-sample

Highlights so far

I’ve enjoyed the Facebook Graph API so far (that may well change!). The JSON query is really nice and you can tailor your response to only include the JSON you need which is great for overheads.

An example could be:


https://graph.facebook.com/{$feed}/feed?{$authentication}&limit={$maximum}&format=json&fields=id,message,created_time,link,full_picture,shares

Where you specify the fields as a parameter after the main query string.

&fields=id,message,created_time,link,full_picture,shares

Full picture and picture

You can put picture in the query string instead of full_picture which will just return the smallest version of the image. Full_picture is a great, quick and easy fix to get the larger image for a strong visual look on social media feeds.

The jQuery

My script to render the solution above looked like this:

$(document).ready(function(){
            var html = "";
            var count = 1;
            $.getJSON("http://localhost/Labs/Facebook/facebook.json", function(feeds){
                for(var i = 0; i < feeds.data.length; i++) {
                    var message = feeds.data[i].message;
                    var id = feeds.data[i].id;
                    var date = new Date(feeds.data[i].created_time).toDateString();
                    var link = feeds.data[i].link;
                    var pic = feeds.data[i].full_picture;

                    html += "<div class='post'>";
                    html += "<p><strong>" + message + "</strong></p>";
                    html += "<p>" + date + "</p>";
                    html += "<p>" + "<img src='" + pic + "'/> </p>";
                    html += "<a class='btn' target='_blank' href='" + link + "'>" + "Read more" + "</a>";
                    html += "<p class='count'>" + count + "</p>";
                    html += "</div>";
                    count++;
                }
                $("#facebook-feed").append(html);
            });
        });

Its a pretty basic JSON read and appending to an empty div.

Summing up & next steps

The Facebook Graph API is enjoyable, flexible and it takes very little time to get used to. I’m going to try and create some synergy between my master jQuery twitter feed file and master jQuery facebook feed file and try to build a feed that incorporates both.

Have a go yourself

A good place to start would to be look at how to get your JSON response. Johnathan Neal has created a good resource to get your started over at his GitHub account

Get in touch

If you can save me a few lines of code, I always appreciate a good suggestion. I’m sure there’s a way to not have to create a separate date and time variable and still render them separately. As always, please get in touch via twitter or email me.