Shelters and Rescues: Display your adoptable pets on facebook!

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.

Dogs & Cats Application
Additional Tabs are added to the navigation on the left.

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.

Request for Permission
Allow access. This may return an error. Ignore and go back to http://www.facebook.com/developer

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.

Set up new App
If you see "+ Set Up New App" in the top right corner, this step was successful.

Step 2: Edit Settings and Basic Information

Go ahead, edit your new application! Under Basic Information, enter a name, description, contact and support email address, and Privacy Policy URL. Facebook insists on that (but not on the Terms of Service), so just upload an HTML text file to some server you have access to, in which you explain that you will respect your users’ privacy and never share any information with third parties, etc. Also don’t forget to upload an image, and especially the icon, which will later display on your facebook page next to the tab name! The icon will be tiny, so keep that in mind.

Edit Settings
Enter as much information as you can, because this will help potential users find your application!

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.

http://fpm.petfinder.com/petlist/petlist.cgi?shelter=NJ261&title=Adopt+from+Liberty+Humane+Society&style=1&status=A&animal=Dog&breed&age&size&x=9&y=9

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:

Facebook Integration - Canvas

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:

https://fpm.petfinder.com/petlist/petlist.cgi?shelter=NJ261&title=Adopt+from+Liberty+Humane+Society&style=1&status=A&animal=Dog&breed&age&size&x=9&y=9

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

Add Application
Choose "Add to My Page"!

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!):

Oklahoma Orphaned Poodle ServicesHelping All Little ThingsLiberty Humane SocietyThe Humane Society of West TexasCity of Tallahassee – Animal Service Center

***

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:

Advertisements

30 thoughts on “Shelters and Rescues: Display your adoptable pets on facebook!

  1. Thank you! Thank you! Thank you!!
    I would never have figured this out on my own. Your guidance was a great help for our Shelter’s facebook page!

  2. Thank you so much! Not difficult at all. Making myself an “Approved Developer” was troublesome at the very beginning of the process. It seemed to hang forever at the initial step, but when I went back to my Account Settings>Mobile and gave my number and waited for the text approval number, then entered that, all went smoothly.

  3. Thank you so much for the kind feedback! I really appreciate it!
    Kathryn, looks like you stumbled across a new “feature” – facebook now asks developers to verify their account via text message or credit card. Thanks for mentioning that!

  4. I previously had registered for the Facebook developer page but didn’t have time to do it so I log out and decided I’d do it another day. Well today is another day and now when I click the link it just takes me to my page management. ?? Any suggestions?

  5. Thanks for your feedback, and sorry to hear that facebook is giving you trouble. So basically when you go to facebook.com/developers, you don’t see an option to set up an app but instead see your own page? You may be logged in as that page. If you can, switch back to using facebook as a user, not as a page. Then try to go back to https://www.facebook.com/developers/

    Once you are logged in as a user, you should see the option to set up an app in the top right corner. If that is not the case, let me know what exactly is happening.

  6. Made one of these yesterday for the Humane Society of West Texas Page. Worked great, except for it displays both cats and dogs regardless of which animal you input into the URL. That is fine, it is what I wanted anyway, but I don’t know why it does that.

    1. Great to hear it worked! I see that you are using a long title, “Adoptable Pets from The Humane Society of West Texas”.
      I am almost positive that due to the facebook character limit, your animal type variable at the end gets cut off, so it displays everything. Change the title to just “Adopt a Dog”, or “Adopt from [your acronym]” and resubmit. I am reasonably certain that this would fix it! Good luck and let me know if you have any other questions!

      1. Oh, good to know. I would never have guessed. Since I am only passable at computer stuff, it took me like 2 hours LOLOL I wanted it to display everything so that is good for me! If people want to narrow it down, all they have to do is press Cat or Dog.

      2. Shoot, I tried doing that and now the app refuses to load. I’m hoping it just has to propogate through the servers. I removed it from the page and re-added it, it just keeps giving me a screen that says it is either being maintained or has a programming error. Ugh!

      3. I just changed it back to the original and it is working again. I’m fine with the fact that it displays both cats and dogs and doesn’t allow users to sort by animal type 🙂 It is way better than I could have ever figured out! Thanks Carina!!

  7. Hi Carina – well a big THANK YOU for the time and effort you put into this blog. It is very detailed and helpful! However, I am struggling and wondered if you could spare a moment to provide comment? I’ve followed all of the steps indicated, seemed to successful complete the application creation. When I try to “add to my page” – first the page was there, nothing happened when I added. Now, when the dialogue box opens (try again) my page is not there – blank. When I try to “add to my page favorites” – the only option shown is to go to my personal page, not the group’s page. I’ve not received other error messages when submitting the app, so not sure what I have done wrong? Does this ring a bell??

    1. This came up during my testing as well. It doesn’t make sense and I really think it’s a facebook bug. Please go back to your page, and click Edit Page. Under Apps, it’s most likely listed. Remove it from there with the X, then try to go back to your new app and add it again. You may have to do this more than once, sorry.

      If it still won’t “stick”, would you mind commenting with a direct link to the app you created? If there is some kind of issue with it, it may also not add correctly. I’ll be more than happy to look at it! Good luck! I wish this wasn’t such a pain!

      1. Thanks! Success! I see that my icon is now loaded on the left and within my applications list. I do have an additional question. Is it possible to move that up to have a better location on my list? I note that you have done this on your example, but mine is automatically populating at the bottom of the app list. Appreciate your advice because I have not been able to find any “help” for this on the facebook help site.

  8. Nice Karen! It definitely works and the little icon is super cute! Moving it up in the list is easy. When you look at your own page, below that list of tabs on the left, there should be “less • edit” right below. You may have to click “more” to reveal the full list first. When you click “edit”, you can drag and drop then around and move individual tabs up or down.

    By the way, you can track how many people click that tab in the Insights!

  9. Success! My page looks a little different, but after a few attempts IT WORKED! I can’t thank you enough for taking the time to help out and reply. I am VERY novice at fb, but trying to manage a site in order to promote our foster kitties. You really helped to improve our standing – as meager as it is. We have only a few “friends”, so if you have advice how to extend our reach and get new ones, I’d love to hear your suggestions! Best – Karen

    1. It looks great, Karen! 🙂

      Oh boy, hundreds of thousands of blogs have been dedicated to that question, how can I get more facebook fans. There are a bunch of tricks, like telling people you’ll raffle off something cool among the fans, but really, it comes down to writing engaging content – the kind of stuff your target audience would care about. Start “liking” other pages that are close to yours, both geographically and thematically, and let them know you liked them in a comment, with a link. Work with shelters? Kindly ask them to feature you on their facebook page.
      This can get you an initial audience, as of course is asking your current fans to share the page. Also link it on your website, in email signatures, etc. If you’re feeling brave, embed the Like button on your existing website (now that you’re a developer and all 😉 ): https://developers.facebook.com/docs/reference/plugins/like/

      Then, as lame as that sounds, just be interesting! Update people about your adoptions, your urgent needs, your services and volunteer/foster opportunities, and how you’re helping the cats and the community. There’s no magic formula, but it helps to update relatively often and respond to comments and questions.

      The ASPCA has great webinars for this kind of thing on occasion, which are well worth attending if you’re still sort of new to this kind of thing. They just had one, but keep an eye out for more social media stuff.
      http://www.aspcapro.org/upcoming-webinars.php

      If you have any particular questions, feel free to reach out! My email is listed on my website. Hope this helps to get you started.

  10. Hi Carina,

    Just noticed, all the great advice you gave and the work that went into creating our link — it has disappeared from my site? Meaning, the link is still there, but nothing appears. I know that within the last few weeks there were some glitches with petfinder, did you experience any problems and/or know what might have happened to mine? Suggestions? Thanks in advance!

    1. It’s definitely there; the tab is titled “Welcome”. Sounds like a facebook glitch – try logging out, clearing your browser’s cache and cookies, and then log back into facebook.

      Once you see it (hopefully), rename the tab to something more descriptive; you can do this when you edit that page and go to the applications tab.

      1. Nope – the facebook app still pulls data from petfinder, it’s not a standalone solution. The animal profiles need to be added to the petfinder page first.

  11. Wanted to drop a comment and let you know your Feed isnt functioning today. I tried including it to my Yahoo reader account and got absolutely nothing.

    1. Thanks for your interest, and sorry to hear that! Since WordPress is hosting my blog, unfortunately its feed is beyond my control. However, you could sign up for email notifications to receive an update if a new entry is posted. The option should be available near the top – and don’t worry, you can unsubscribe any time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s