If you’re using Petfinder and want to insert a list of adoptable animals on your website, this will walk you through the steps to add this to your website.
What you’ll need
First, you need your Petfinder.com shelter unique ID number. The quickest way to determine this is:
- Search the Petfinder Website: https://www.petfinder.com/animal-shelters-and-rescues/search/
- Look for the code portion of the URL, which appears after the name (ex. https://www.petfinder.com/member/us/md/laurel/laurel-cats-md454/ <–MD454 is the ID number)
Code Snippets – Two Options
Option 1: Use Petfinder Customized Pet Scroller
Log in and try out the settings on this page: https://www.petfinder.com/tools/petlist/index.cgi
This will automatically generate the code you require and you can adjust the settings.
Option 2: Modify your own code
If we update the following code snippet and replace IDNUMBERGOESHERE with MD454.
<iframe style=”width: 100%; height: 1000px; margin: 0;” src=”https://fpm.petfinder.com/petlist/petlist.cgi?shelter=IDNUMBERGOESHERE&status=A&age=&limit=&offset=0&animal=&title=&style=4&ref=kKIOhLI60c6sey7″ width=”100%” height=”1000px” hspace=”0″ vspace=”0″ frameborder=”0″ scrolling=”yes” marginheight=”0″ marginwidth=”0″ bordercolor=”#000000″></iframe>
Inserting Code Snippet
Always remember to insert your code in the “text” section of your page in WordPress (or other WYSIWYG editors). If you insert it under “Visual” the system automatically adds extra code and it won’t work.
The above example is for Adoptable Cats. You can change each section of the code as follows:
title= (Insert your title without ” if you would like it to appear here)
status=A (A is for Adoptable, other options include F for Found or X for Happy Tails)
age= (leave blank for All Ages, or use Baby, Young, Adult, Senior)
limit= (leave blank for All, or use 25, 50, or 100)
animal= (leave blank for All Animals, or use Cat, Dog, SmallFurry, Birds)
width=”500px” <- For dynamic websites, use “100%” to ensure it adjusts to the screen.
You should now have enough to begin playing with the rest of the code (per the how to guide) and get the iFrame set up on your WordPress website.
Remember to set the default width as 100%, or it won’t adjust dynamically to the screen. (In plain language, it will look terrible on small screens such as mobile phones.)