Petfinder Code-Snippets – iFrame

 

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.

Similar to other posts for major groups (Adopt-a-pet, Petango), this will discuss using iFrame code snippets on your website.

What you’ll need

First, you need your Petfinder.com shelter unique ID number. The quickest way to determine this is:

  1. Search the Petfinder Website: https://www.petfinder.com/animal-shelters-and-rescues/search/
  2. 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.

Code Modifications

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.

height=”600px”

 

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.)

Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *