Petfinder Pet List Scroller for Facebook Pages

Tags: ,

There’s a new, super-easy way to show off adoptable pets on your organization’s Facebook page. The best part: It’s free and will be updated when your favorite shelter or rescue group updates its Petfinder listings.

Here are just a few of the things you can do with this new feature:

  • Add a free, self-updating adoptable pet list to your Facebook page
  • Create separate adoptable pet lists for different species, shelters or locations
  • Add a list of adoptable pets from more than one shelter or rescue group
  • Feature an especially adoptable pet at the head of the page (or not)
  • Link to your favorite rescue group or shelter’s heartwarming Happy Tails
  • And more!

First, it’s important to note that this only works for Facebook pages (pages you can ‘Like’), not personal profiles. But once it’s on your organization’s page everyone can see it!

We’ve created a short video tutorial to show you step-by-step how you can add the free adoptable pet list scroller to your page. The instructions are also included below. Once you have added the scroller to your page, we’d love to see it in action! Please email the link (or any questions you may have about adding the scroller) to pets@petfinder.com.

How to Add a Petfinder Pet List Scroller to Facebook Pages

Step 1: Create your custom Petfinder Pet List Scroller

  • Create your custom, free adoptable pet list scroller at http://www.petfinder.com/tools/petlist
  • Select the “3 Column Vertical” option when you select a format
  • Select a style — pick your favorite!
  • Then configure the scroller to meet your needs. You can choose to include adoptable pets from either a single shelter or rescue group, or more than one. You can also choose to display specific species, or all adoptable pets.
  • After you’ve selected the options you want, click “Generate Scroller Code” or “Preview Your Scroller”
  • After you click “Generate Scroller Code,” copy the scroller code into a Word document, text file or open a new browser window.

Step 2: Add the Petfinder Pet List Scroller to your Facebook Page

  • On Facebook, go to this URL to add the Static HTML app to your Facebook page: http://www.facebook.com/apps/application.php?id=190322544333196
  • Then, select the page you’d like to add the scroller to and click “Add Static HTML: iframe tabs”. We’ve created ‘The Page for Pets’ as our sample page.
  • Go back to your organization’s Facebook page. You should find a new “Welcome” tab in the left margin. (You can change this name using Step 3)
  • Click on “Welcome” and you will see the admin’s view of the tab.
  • Paste the code for your pet list scroller in the top box, then click “Save and view tab”
  • You will see a confirmation and can click “View your tab as a fan” to see what your fans will see which should resemble the example below.
  • It’s important to remember that, as your page’s admin, you will always default to viewing this tab as the Static HTML editor. To view the tab as other’s will see it, either log out and visit the tab or save your changes and select “View tab as…”

Step 3: Rename the Petfinder Pet List Scroller on your Facebook Page

  • On your Facebook page’s wall, click “Edit Page”
  • Select the Apps tab on the left
  • Click “Edit Settings” under Static HTML: iframe tabs
  • Rename your tab. Note that names work best when they are under 45 characters long. Click “Save” and “Okay”
  • Click “View Page” to see the custom tab name on your page
  • You’re done! If you like, you can finish here, but if you want to take it further, below are ways to make your page even more unique.

Step 4 (Optional): Add Additional Scrollers

Step 5 (Optional): Add a PayPal Donation Button to your Pet List Scroller

  • Create a PayPal Donate button following PayPal’s instructions and copy the code for your new donate button
  • Return to your custom tab and add the following code above or below the code for your scroller:

<img src=”https://iframes.petfinder.com/iframes/border4.jpg”><div style=”float:left; margin-top:20px; margin-left:175px; margin-bottom:20px; width:500px”>

INSERT YOUR PAYPAL BUTTON CODE HERE

</div><img src=”https://iframes.petfinder.com/iframes/border4.jpg”><div style=”clear: both;”></div>

  • Be sure to replace the “INSERT YOUR PAYPAL BUTTON CODE HERE” with the code for your PayPal button.
  • Click on “save and view tab”

Step 6 (Optional): Add a Featured Adoptable Pet to your Pet List Scroller

  • Select the pet you’d like to feature and go to that pet’s profile on Petfinder (on the public side of Petfinder, not in your Petfinder account)
  • Select which photo you’d like to feature and copy the image’s location into a Word document or text file. To copy an image’s location, right click on the image (ctrl+click for mac users) and select Copy Image Location.
  • Copy the pet’s profile URL/Web Address and paste that into your Word document or text file.
  • Return to your custom tab and add the following code above or below the code for your scroller:

<img src=”https://iframes.petfinder.com/iframes/border4.jpg”><div style=”float:left; margin-left:80px; margin-bottom:20px width:200px”><img src=”https://iframes.petfinder.com/iframes/fpm-featured-pet-facebook.jpg”>

<a href=”INSERT THE PET’S PROFILE URL” target=”_blank”>

<img src=”INSERT THE PET’S PHOTO LOCATION” height=”100px” style=”float:right; margin-left:20px”></a></div>

<img src=”https://iframes.petfinder.com/iframes/border4.jpg”><div style=”clear: both;”></div>

  • Replace INSERT THE PET’S PROFILE URL and INSERT THE PET’S PHOTO LOCATION with the respective URLs you copied into the word document or text file.
  • Click on “save and view tab”
  • You will see a confirmation and can click “View your tab as a fan” to see what your fans will see which should resemble this:
  • Note: You can follow the above steps to switch out your featured pet as often as you like.

Comments