Add a scrolling Pet List to your Facebook Page

Posted by Jennifer on August 1st, 2011

Steps last updated: 2/17/21

On 6/7/2018, Facebook changed to only allows “tabs” be added to Pages with more than 2,000 fans. Previously installed pages still work.

There is a way to display your Adopt-a-Pet.com adoptable pets on your Facebook Page in the standard computer view! The steps below explain how to use a free Facebook App called “Static HTML”. This App was not created by Adopt-a-Pet.com. The App and Facebook do occasionally get updated. If you find something below has changed, please email our shelter Help Desk so we can update our instructions.

Note: This App does not work on personal Facebook “Profiles” – only on a business or organization “Page”.  If you do not have a Facebook Page yet for your rescue or shelter, go here: https://www.facebook.com/pages/create.php and create one. Then after you get 2,000 fans aka likes on your page, Facebook will let you add a tab.

Please…

Follow the steps exactly, in order…

Take your time.

  1. You need to be on a desktop computer, not an iPad, phone, or other mobile device. This is because Facebook does not show tabs on mobile devices.
    ..
  2. Log in to your Facebook account that is the Admin for your Page,
    then click here: Static HTML: iframe tabs
    (or click on Second Tab if you are using that app already).
    . .
  3. Click on the green button that says:
    Screen Shot 2017-03-17 at 4.46.40 PM .
    ..
  4. Select the page you want to add your pet list to from the dropdown — THE PAGE MUST HAVE MORE THAN 2,000 FANS — and click Add Page Tab:
    Add-Page-Tab
    .
  5. You’ll be brought back to your newsfeed. Go to your Facebook Page. Here’s a shortcut link to all your Pages. On the left side of your page, there’s a list of links/tabs. Click the new “Welcome” tab.
    ..
  6. On your Welcome tab, click the green Edit Tab button that looks like this:
    edit-tab .
    .
  7. Log in to your Adopt-a-Pet.com here: http://www.adoptapet.com/shelter/portable_pet_list/create (That’s your Portable Pet List generator.) Pick the colors and layout you want. Follow the 2 steps to  Copy Generated Code.
    ..
  8. Go back to the Facebook app page. Delete the text that is in the index.html box, shown highlighted in purple below: 
  9. Paste (press Ctrl then V keys) your Generated Code into the index.html box.
    ..
  10. Click the Save & Publish button.
    save-publish
    ..
  11. The button will change to say: all saved. Click the Done editing tab X in the upper right.
    .
  12. Now you need to rename the tab something other than “Welcome”.
    February 17, 2021: With the new Facebook changes, this is possible but more complicated:
    - Go to https://business.facebook.com and create a business account (free) for your shelter or rescue
    - Add your existing Facebook page in “Business Settings” > Add > Add Page
    - Click “View Page” to view your Facebook page in the Business (old Facebook layout) view
    - Click on on Settings on the upper right.
    - Click on Templates & Tabs  in the left column.
    Now you can see all your Tabs on the right. You can come back here to drag them into the order you want. For now, click on the “Settings” button in the row that says Welcome, it looks like this:
    .Screen Shot 2017-03-17 at 4.46.02 PM
    - Then click on the tiny blue underlined linked that appears that says “Edit Settings”. A window will open that looks like this:
    Screen Shot 2017-03-17 at 4.53.27 PM..
    . – Type in a Custom tab Name. Keep it short! It will be cut off after a certain length. Some suggestions: “Adopt a Pet!” or “See Our Cats” or “View Our Pets” or “Adopt Us!”. Click the blue “OK” button then also make sure to click the Blue “Save” button.

    Congratulations! You successfully added your Adopt-a-Pet.com Pet List to your Facebook Page! 

    We’d love to see it when you’re done, feel free to share a link to your Facebook page on our Adopt-a-Pet.com PRO Facebook page at https://www.facebook.com/adoptapetpro

    .

 

PS. Here’s a nice example of a rescue that customized the code making the scroller box bigger! You can play around with the code (if you’re good at that) like they did too: https://www.facebook.com/ILbirddog/app/166863400042703


To learn more about Purina’s support of animal welfare organizations around the U.S., and to see if you are eligible, visit www.purinashelterchampions.com

 
PIa
Shelter Blog Homepage
 

Humane America Animal Foundation, dba Adopt-a-Pet.com, is a non-profit, tax-deductible 501(c)(3) adoption advertising charity. Our mission (and passion) is to help get homeless pets out of the shelters and into loving homes. Let us know what you think! Suggestion & Comment Box

Special thanks to our sponsors, Purina, Chewy, and PetBasics,
whose support makes our life-saving work possible.


Copyright © 2004-2021 Adopt-a-Pet.com - All rights reserved