Following Facebook’s recent announcement about their new Notifications API going into public BETA, I wanted to find out a little more about this and I’m going to share what I found.
What is the Notifications API?
You that little globe icon next to the search box at the top of your Facebook page where you get notified of recent activity? Facebook is now allowing anyone who has an app within Facebook where the user has granted basic permissions to now have the app send them notifications when ever the app pleases.
What problems can I foresee with this?
Every app I have ever used within Facebook is now able to start sending me notifications any time they like and I’m just going to end up blocking the vast majority of them. I hope that before this comes out of BETA that Facebook reconsider the permissions side of things so users get the option to opt out in the first instance for receiving notifications or I can see it becoming a source of SPAM very quickly and alienating the users of Facebook.
How can I use this new Notifications API?
Step 1. Getting everything essential in place
Make sure you have a development environment online which is publicly accessible e.g. facebook.mytestdomain.com.
Once you have your development area all setup you will need to get a copy of the Facebook PHP SDK. At the time of writing this the current release was v3.1.1 (despite the download page saying it’s v3.2.0!) so in later versions things may differ but I will endeavour to keep this guide up-to-date.
You can download the latest version of the Facebook PHP SDK from github:
Extract the contents of the SDK you just downloaded. Within here you will find a folder named ‘src’; copy the contents of this folder into your development environment (this should be 3 files base_facebook.php, facebook.php & fb_ca_chain_bundle.crt). I have placed mine within an ‘inc’ folder to keep it separate (‘inc’ as these files will be included where required).
Within your development environment I have structured my files as follows (and recommend you do the same):
/index.php – At the moment this is a blank file which we will add to shortly
Step 2. Creating your app within Facebook
To create a Facebook App, visit https://developers.facebook.com/apps and click the ‘Create New App’ link in the top right hand corner. Your app will require an App Name & App Namescape mine for this example were as follows:
App Name: AnotherWebDevBlog
App Namespace: another_web_dev_blog
Once you have picked these 2 Facebook will create the basics for your app and present you with a App Settings page. In this guide I am only going to cover the essentials for the Notification API but I would strongly advise reading through them all before you deploy a live app within Facebook.
Click the App on Facebook option and you will be asked a few questions:
Canvas URL: Full URL to where you are hosting your example online as mention about when setting up your development environment e.g. http://facebook.mytestdomain.com/
Secure Canvas URL: To deploy a live Facebook app, Facebook now require that the domain hosting the app has a valid SSL certificate, if only for test then you can enter the same domain as above only with https:// instead of http://
Canvas Width: I will almost always select Fluid, this means that it will allow your app the extra space within the window should it be required but the minimum width will be 760px and it would be worth while making sure your app can still work correctly with a 760px wide viewport.
Click Save Changes and that this step complete and your app is ready to you on Facebook. The link for your app within Facebook will be visible as the first option (above the Canvas URL you just entered), mine being:
http://apps.facebook.com/another_web_dev_blog - This app is only in the Facebook Sandbox so won’t be visible publically before you try.
Step 3. Use the PHP SDK to create a notification
Below is the contents of my index.php file; this will call the Facebook SDK and send the notification request for your app. If the user has not yet authorised the app then they will be presented with the Facebook Login button. Once clicked they will get the normal Facebook Permissions dialogue. For this example we are only requesting the most basic permissions as this is all we require.