Add a scrolling Pet List to your Facebook Page

Posted by Jennifer on August 1st, 2011

Instructions LAST UPDATED: 3/17/2017 We are happy to offer a free way to showcase your Adopt-a-Pet.com adoptable pets on your Facebook Page when viewed on a desktop computer! 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 follow the steps and something has changed, please email jennifer@adoptapet.com so we can update our instructions! Thank you. 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.

Please…

Follow the steps exactly, in order…

Take your time.

Jennifer is available for help if you need it!

  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 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”.
    - Go back to your Facebook Page.
    - Click on Settings its just under your notification icons in the upper right.
    - Click on Edit Page 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. OLD OPTIONAL STEP: Facebook used to display Custom Tab images and may do so again at some point in the future, so we’re keeping. Custom Tab Images were previously visible in the “Apps” box in the right column of your page. You will NOT see them if you are an admin of the page. (See how they look on our Adopt-a-Pet.com Pro page, for example.) You can change the default Star image to a Custom Tab Image. You can use any of these images below, we made them just for you! To use, right click on a tab image below to save it to your computer.  Then click “Change” in the iframe tabs Settings window, browse to the saved image file on your computer, then click “Okay.”

 homeless_pet_small  AAP-111x74b   AAP-111x74

PPS. 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?sk=app_166863400042703&app_data


To learn more about Purina's feeding programs, 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
© 2008 Adopt-a-Pet.com - All rights reserved