IMPORTANT: Petfinder has deprecated their API as of December 2, 2025. After that date, this integration will not work. They're forcing all customers to use their embeddable custom widgets going forwared.

---

petfinderAPI4everybody.js

A JavaScript plugin that makes it easier for developers to use the Petfinder API.

Download petfinderAPI4everybody.js / View the demo

Note: This is DIY library for web developers. If you're not comfortable writing code, you may prefer working with Fetch, my plug-and-play solution for the Petfinder API.

Getting Started

Compiled and production-ready code can be found in the dist directory. The src directory contains development code.

1. Include petfinderAPI4everybody.js on your site.

<script src="dist/js/petfinderAPI4everybody.js"></script>

2. Add the markup to your HTML.

<div data-petfinder="main">
	<!-- Required -->
	<!-- Main pet content will be generated here -->
	<a href="http://awos.petfinder.com/shelters/AA11.html">View our adoptable pets on Petfinder.</a>
</div>

<div data-petfinder="aside">
	<!-- Optional -->
	<!-- Supplemental content will be generated here -->
</div>

Place the two [data-petfinder] elements anywhere on a webpage. You can wrap them in other elements, add classes and IDs, and so on.

• [data-petfinder="main"] - The primary area where all data for specific pets will be displayed.
• [data-petfinder="aside"] - [optional] Used to display lists, checkboxes, and supplemental information.

Note: You should include a backup link or Petfinder iframe in the [data-petfinder="main"] element. This will be displayed if the user's browser is not supported by petfinderAPI4everybody.js or the API fails to load.

3. Initialize petfinderAPI4everybody.js.

In the footer of your page, after the content, initialize petfinderAPI4everybody.js.

A key and sheltherID are required. This is also where you pass in templates for the main and aside content.

And that's it, you're done. Nice work!

Note: If you find this section confused, check out the template to see an example of how you might set things up. Still lost? I can help.

<script>
	petfinderAPI.init({
		key: '123456789', // Your API key with Petfinder
		shelterID: 'AA11', // Your Petfinder shelter ID
		templates: {
			// The layout for the page that displays all pets
			allPets:
				'<div>' +
					'<div>' +
						'<img src="{{photo.1.medium}}">' +
					'</div>' +
					'<h2>{{name}}</h2>' +
					'<p><a href="{{url.pet}}">View Full Profile</a></p>' +
					'<hr>' +
				'</div>',
			onePet: null, // The layout for individual pet profiles [optional]
			asideAllPets: null, // The layout for secondary content on the "All Pets" page [optional]
			asideOnePet: null, // The layout for secondary content on individual pet pages [optional]
		}
	});
</script>

API Data Variables

Include the following variables in your template markup to dynamically add content from the Petfinder API.

Pet Variables:

• {{name}} - Name of the pet
• {{id}} - Petfinder ID for the pet
• {{description}} - Description of the pet
• {{age}} - Age of the pet
• {{gender}} - Gender of the pet
• {{size}} - Size of the pet
• {{animal}} - Type of animal the pet is
• {{breeds}} - Breeds of the pet
• {{photo.1.large}} - First photo of the pet, large
• {{photo.2.large}} - Second photo of the pet, large
• {{photo.3.large}} - Third photo of the pet, large
• {{photo.1.medium}} - First photo of the pet, medium
• {{photo.2.medium}} - Second photo of the pet, medium
• {{photo.3.medium}} - Third photo of the pet, medium
• {{photo.1.thumbnail.small}} - First photo of the pet, small thumbnail
• {{photo.2.thumbnail.small}} - Second photo of the pet, small thumbnail
• {{photo.3.thumbnail.small}} - Third photo of the pet, small thumbnail
• {{photo.1.thumbnail.medium}} - First photo of the pet, medium thumbnail
• {{photo.2.thumbnail.medium}} - Second photo of the pet, medium thumbnail
• {{photo.3.thumbnail.medium}} - Third photo of the pet, medium thumbnail
• {{photo.1.thumbnail.large}} - First photo of the pet, large thumbnail
• {{photo.2.thumbnail.large}} - Second photo of the pet, large thumbnail
• {{photo.3.thumbnail.large}} - Third photo of the pet, large thumbnail
• {{options.specialNeeds}} - Text if the pet has special needs
• {{options.noDogs}} - Text if the pet can't be in a home with dogs
• {{options.noCats}} - Text if the pet can't be in a home with cats
• {{options.noKids}} - Text if the pet can't be in a home with kids
• {{options.noClaws}} - Text if the pet doesn't have claws
• {{options.hasShots}} - Text if the pet is up-to-date with shots
• {{options.housebroken}} - Text if the pet is housebroken
• {{options.altered}} - Text if the pet is spayed or neutered
• {{options.multi}} - Text if pet can't be in a home with some combination dogs, cats, or kids
• {{contact.name}} - Name of contact for pet
• {{contact.email}} - Email of contact for pet
• {{contact.phone}} - Phone number of contact for pet
• {{contact.address1}} - Address (line one) of contact for pet
• {{contact.address2}} - Address (line two) of contact for pet
• {{contact.city}} - City of contact for pet
• {{contact.state}} - State of contact for pet
• {{contact.zip}} - Zip code of contact for pet
• {{contact.fax}} - Fax number of contact for pet
• {{url.all}} - URL to list of all pets (for use in "one pet" template).
• {{url.pet}} - URL to profile of individual pet (for use in "all pets" template)
• {{url.petfinder}} - URL to pet's Petfinder profile
• {{classes}} - A string of classes describing all pet attributes
• {{number}} - This pets number out of the total number of available pets (for use in "one pet" template - eg. 10 of 25)
• {{total}} - Total number of pets available

Aside Variables:

• {{list.ages}} - List of available ages
• {{list.animals}} - List of available animals
• {{list.breeds}} - List of available pet breeds
• {{list.options}} - List of available options
• {{list.genders}} - List of available genders
• {{list.sizes}} - List of available sizes
• {{checkbox.ages}} - Checkbox and label for each available age
• {{checkbox.animals}} - Checkbox and label for each available animal
• {{checkbox.breeds}} - Checkbox and label for each available breed
• {{checkbox.options}} - Checkbox and label for each available option
• {{checkbox.genders}} - Checkbox and label for each available gender
• {{checkbox.sizes}} - Checkbox and label for each available size
• {{checkbox.ages.toggle}} - Checkbox and label for each available age with "select all" toggle
• {{checkbox.animals.toggle}} - Checkbox and label for each available animal with "select all" toggle
• {{checkbox.breeds.toggle}} - Checkbox and label for each available breed with "select all" toggle
• {{checkbox.options.toggle}} - Checkbox and label for each available option with "select all" toggle
• {{checkbox.genders.toggle}} - Checkbox and label for each available gender with "select all" toggle
• {{checkbox.sizes.toggle}} - Checkbox and label for each available size with "select all" toggle
• {{total}} - Total number of pets available

Note: Lists return <li> elements only. You must place them inside an <ol> or <ul> element as desired. Example: <ul>{{list.breeds}}</ul>

Filtering Pets

If you have a lot of pets, you may want to give users the option of filter by attributes like animal type, breed, age, and more. The included (but optional) petfinderSort.js script makes this really easy.

1. Include the script on your site.

<script src="dist/js/petfinderSort.js"></script>

2. Add the markup to your HTML and initialize petfinderSort.js as a callback after the content is generated.

Add any of the attribute checklists you want to use to your template, and add the {{classes}} variable on a containing <div> in the allPets template. Initialize petfinderSort.js as a callback after content is generated.

<script>
	petfinderAPI.init({
		...
		templates: {
			allPets:
				'<div class="{{classes}}">' +
					// Pet layout
				'</div>',
			asideAllPets:
				'<strong>Age:</strong>' +
				'{{checkbox.ages.toggle}}' +
				'<br><br>' +

				'<strong>Size:</strong>' +
				'{{checkbox.sizes}}' +
				'<br><br>' +

				'<strong>Gender:</strong>' +
				'{{checkbox.genders}}' +
				'<br><br>' +

				'<strong>Breeds:</strong>' +
				'{{checkbox.breeds.toggle}}',
			callback: function () {
				petfinderSort.init();
			}
		}
	});
</script>

Template

If the initial setup is a bit confusing, here's a template to get you started.

<!-- Container that "aside" content will be added to -->
<div data-petfinder="aside"></div>

<!-- Container that "main" content will be added to. The text in here will be replaced when the script loads. -->
<div data-petfinder="main">
	<a href="http://awos.petfinder.com/shelters/AA11.html">View our adoptable pets on Petfinder.</a>
</div>

<script src="dist/js/petfinderAPI4everybody.js"></script>
<script>
	;(function (window, document, undefined) {

		'use strict';

		// Templates

		var allPets =
			'<div class="{{classes}}">' +
				'<div>' +
					'<img src="{{photo.1.medium}}">' +
				'</div>' +
				'<h2>{{name}}</h2>' +
				'<p><a href="