Steps re-verified 10/2/19
IMPORTANT update 6/7/2018: Facebook made a change. Facebook now only allows “tabs” to be added to Pages that have more than 2,000 fans. Previously installed pages are still working.
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 firstname.lastname@example.org 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. Then after you get 2,000 fans or likes on your page, you can add a tab. (So sorry about the 2,000 required that is not our decision, but Facebook’s.)
Follow the steps exactly, in order…
Take your time.
Jennifer is available for help if you need it!
- 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”.
- Go back to your Facebook Page.
- Click on Settings its just under your notification icons in 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. 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.”
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 support of animal welfare organizations around the U.S., and to see if you are eligible, visit www.purinashelterchampions.com