Pet List Scroller for Facebook

Petfinder Pet List Scroller for Facebook Pages

There’s an easy way to show off adoptable pets on your organization’s Facebook page. The best part: It’s free and will be updated when you update your Petfinder listings.

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

  • Add a free, self-updating adoptable pet list to your Facebook page
  • Create separate adoptable pet lists for different organizations, species or locations
  • Add a list of adoptable pets from more than one shelter or rescue group
  • 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!

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 outreach@petfinder.com.

How to Add a Petfinder Pet List Scroller to Facebook Pages

Step 1: Create your custom Petfinder Pet List Scroller

  • Select a format — pick your favorite!
  • 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.
  • For the Scroller Height field, please change from 600 pixels to 700 pixels
  • After you’ve selected the options you want, click “Generate Scroller Code”
  • 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

    • Then click “Add Static HTML to a page.

  • Select the page you’d like to add the scroller to and click “Add Page Tab”. We’ve created ‘Pet Rescue’ as our sample page.

  • After clicking the Add Page Tab button, go back to your organization’s Facebook page. You should find a new “Welcome” tab in your Apps section. (You can change this name and image later on, using Step 3)

  • Click on “Welcome” and you will see the admin’s view of the tab.  Click the “Edit tab” button.
  • Paste the code for your pet list scroller in the top box
  • Then, paste one of these codes above your scroller code, depending on which scroller format you selected:

If you selected THREE COLUMN VERTICAL:
<div style=”float:left; margin-top:0px; margin-left:130px; margin-bottom:0px; width:800px”>

If you selected FOUR COLUMN VERTICAL OR HORIZONTAL:
<div style=”float:left; margin-top:0px; margin-left:80px; margin-bottom:0px; width:800px”>

  • And paste this below your scroller code:

</div>

  • Click “Save & Publish”

    • Once you have clicked “Save & Publish” click the “View on Facebook” link in the upper left-hand corner to return to your Facebook page and to view your app.
    • It’s important to remember that, as your page’s admin, you will always default to viewing this tab as the HTML editor. To view the tab as others will see it, you will need to click the “View tab as visitor” button.

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

    • On your Facebook page’s wall, click “Settings” in the upper right-hand corner of the page, then under the General menu (denoted by the gear shaped icon) click “Apps” from the menu.  Here you will see the Static HTML: iframe tabs app you’ve added.  Click the “Edit Settings” link underneath the app’s name.
    • A popup will appear. Enter your custom tab name (like “Adoptable Pets”) in the custom tab name field.  Note that names work best when they are under 45 characters long. Click “Save” and then “Ok”

    • Once back on your page, again click “Settings” in the upper left-hand corner of the page, then click “Apps” from the menu.  Here you will see the Static HTML: iframe tab you’ve added.  Click the “Edit Settings” link

    • A second tab will open up. On the new tab, click “edit” next to “Image” and upload your picture. (The size of the image must be 111 x 74 pixels)

    • Close the tab, return to your Facebook page and click “Ok”
    • The page should refresh with your custom tab name and image.

  • 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:

THREE COLUMN VERTICAL:

<div style=”display:block;text-align:center;margin:0 auto;width:500px;”>

INSERT YOUR PAYPAL BUTTON CODE HERE

THEN insert your petlist scroller code that you created in Step 2.  Make sure your scroller code ends with </div>

FOUR COLUMN VERTICAL OR HORIZONTAL:

<div style=”display:block;text-align:center;margin:0 auto;width:700px;”>

INSERT YOUR PAYPAL BUTTON CODE HERE

THEN insert your petlist scroller code that you created in Step 2.  Make sure your scroller code ends with </div>

  • Be sure to replace the “INSERT YOUR PAYPAL BUTTON CODE HERE” with the code for your PayPal button.
  • To have your Donate Button open in a new window when clicked, add the following code at the end of the first line of Paypal’s generated HTML code before the ending >: target=”_blank”
  • Click “Save” and “Preview”