I’ve never enjoyed working with Facebook social tools… The like button alone seems too difficult, all of the app id’s, authentication, etc. for other functions is confusing to me, etc.
Regardless, a recent application I built needed to be able to share an image on a Facebook Timeline. Going into the project I thought you’d simply use the like button, it’ll display the picture and we are all set, right?
Wrong. The Like button merely likes a URL. So within Facebook (News Feed or Timeline) it shows a small thumbnail of the image and, a text description of the Liked URL, and a link back to the page. This is not the experience I’m looking for.
Instead, I want the image to show, and clicking on the image opens the image viewer. Simple enough, right? Wrong.
In comes the Graph API and me trying to learn how to use it. I started down the path of the PHP API. This was working fine, I could get the image to share, but there were issues in that since PHP is server side, there were multiple page refreshes happening, URL query parameters, etc. The end result of this project is an iFramed page into another site, and so these page refreshes and the URL parameters killed the chances of this happening…
Back to the drawing board.
Now for where I should have started; the Javascript SDK to access the Graph API. Since this is run client side and involves AJAX this is the right solution for me! Though I think the Facebook documentation leaves A LOT to be desired it did lead me in the right direction and reading a few other random blog posts later I was able to get this all put together.
The first step is to create an App within Facebook. I found this confusing; I don’t want to have this live within Facebook; it’s going to live on my website. But since it’s interacting with the Graph API and posting to Facebook, you need to have a method for it to be authorized through Facebook. That’s what the App is for. This is all done through the Facebook Developer site.
Because it’s tied to an App, it allows for users to block posts from this app, etc. It’s part of Facebook’s privacy and content control methods is what I’ve gathered.
The high level thought pattern of my application is this:
– Load the Facebook Javascript SDK
– User clicks Facebook Share button
– Check if they are logged into Facebook. If not, a popup window allows them to log in (Facebook SDK handles this)
– Once logged in, they need to accept the terms of the app. In my case, they need to grant access for the app to post on the timeline of the users friends.
– After accepting the terms, they are presented with a list of their Facebook friends. I added a jQuery Live Filter function so they can search for a friend by name (rather than scrolling a few hundred friends). I show the friends picture and name.
– Clicking on a name (or the users own name) it automatically posts to the users Timeline.
– That’s it!
It’s a very simple app to the user that is fairly complex on the back end. But it’s well built and should drive some great interaction.
One check I had to put in place though, is that a Facebook user can set privacy settings to not allow for others to post on their wall. I have a check in place for that as well, which displays a message and brings the user back to their friends list so they can choose someone else if they’d like.
So this story isn’t all that technical, and won’t help you in the actual coding. Sorry. I struggled through it so much that I’m not sure I’m a huge amount of help there. And sadly there isn’t a lot on the internet on how to do such programming that I could find. But what else I feel isn’t well documented (or is too wordy; I don’t like reading much…) is the simple concept on how making Facebook Apps should be done. The basic structure/workflow is what I was really missing.
