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.
Follow the steps exactly, in order…
Take your time.
- 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.
- 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).
- Click on the green button that says:
- 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:
- 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.
- On your Welcome tab, click the green Edit Tab button that looks like this:
- 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.
- Go back to the Facebook app page. Delete the text that is in the index.html box, shown highlighted in purple below:
- Paste (press Ctrl then V keys) your Generated Code into the index.html box.
- Click the Save & Publish button.
- The button will change to say: all saved. Click the Done editing tab X in the upper right.
- 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:
- Then click on the tiny blue underlined linked that appears that says “Edit Settings”. A window will open that looks like this:
. – 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