Or – How I accidentally became a facebook developer, and so can you.
This blog post will teach you how to display your Petfinder.com adoptable pet list (or pet scroller) on your organization’s facebook page with a custom application. No coding skills required.
// UPDATE December 2011: In the meantime, petfinder has released their own tutorial for quickly adding a petfinder scroller to facebook pages. Before following the instructions below, check out their blog post – this will save you quite some time, especially since facebook will be changing the way that custom apps work.
I recently saw a facebook-related announcement which stated that the social network now allows a technology called iframes to be used in applications. I’d been searching for a way to display adoptable pets directly on the Liberty Humane Society‘s facebook page (which I co-administrate) for months, and I knew that the petfinder widget uses iframes, so I hoped that this would bring me closer to my goal.
Within just a few hours, I managed to successfully develop facebook applications for both LHS’ adoptable cats and dogs, with practically no prior knowledge about facebook apps. The good news is that so can you, and if you follow the tutorial, you can probably go from zero to integrated app in less than half an hour.
It does appear that petfinder offers an app called dogpile, but the most recent reviews all indicate that users weren’t able to get the application to work for many months. Hopefully, what I am suggesting here will.
Ready? This example will create an application that displays all your adoptable dogs under a tab on your facebook page. On the right is an example of this in action.
Step 1: Allow Access, Set up Developer App
Go to www.facebook.com/developer – and “Allow” the Developer App to access your information. This may or may not return an error. Ignore it and try again.
Facebook may require you to verify your developer accounts, which means you may have to request a text message with a confirmation code. You can tell this step was successful if you go back to http://www.facebook.com/developer and you see an option to create a new application.
Step 2: Edit Settings and Basic Information
Don’t forget to save your changes!
Step 3: Facebook integration (this is where the Magic happens)
After you have set up your basic application information, you need to actually combine the petfinder animal scroller and the facebook application. This is achieved by adding a canvas URL.
Choose a title for Canvas Page and a Tab name. Leave the default settings for everything else. The only tricky part in this entire operation is the Canvas URL.
Use the following example URL and adapt it to your needs. This sample will generate a list of all adoptable dogs for Liberty Humane Society in Jersey City.
Copy and paste the entire URL into a new text editor, making sure that all line breaks are removed. Then edit the string to apply to your shelter or rescue.
Shelter ID: Replace NJ261 with your petfinder.com shelter ID.
Title: Edit to reflect your organization’s name. Use the plus (+) symbol instead of spaces. The shorter the better!
Species: Use Dog, Cat, Rabbit or SmallFurry, etc
Once you have customized this, copy and paste the full URL you created into your browser, to make sure it’s loading correctly and looks acceptable. Whatever you see there will end up within the application.
Add your personalized URL into Canvas URL field. It should look like this:
As of 4/7/11, Petfinder has enabled secure connections, so now everyone (including users who use “safe browsing”) can see these tabs. In the Secure Canvas URL field, paste the exact same URL, then add an “s” to the http, like so:
For Tab URL and Secure Tab URL, paste the same links as above for Canvas URLs, and ignore the note about the 100 character limit (but keep your title as short as possible for better results!).
Save your changes… congratulations, you have now joined the ranks of facebook app developers. Neat! At this point, you may wish to repeat this for a different species, or alternatively, sit back and pat yourself on the back for a job well done.
Step 4: Add the application to your facebook page (the fun part!)
Go back to your application overview at www.facebook.com/developer
Click on your application, then go to “Application profile page” (while you’re there, you might want to make that page look pretty too, because this is the public face of you app!). At the bottom left of your application page, you’ll find a link that says “Add to my Page’s Favorites” — well, let’s do just that! Choose your organization’s page from the options.
That’s it! Your application is installed and will show up in your navigation sidebar on the left of your organization’s page. You may wish to move it up in the list for better visibility. Click to it to test it (this may take several seconds to load). If everything works out your visitors can now see your adoptable animals without ever leaving your facebook page. Hopefully eventually this will make them leave their chair and come to your shelter to adopt! Yay!
Examples of successful implementations (comment to add yours!):
Update: On September 1st, PetfinderAdmin released the following video tutorial, outlining a similar process for adding your adoptable animals to facebook. The tutorial features the Liberty Humane Facebook page, and makes use of the static FBML app: