Petfinder has an
API for developers to use to integrate with the petfinder data.
From Petfinder:
Overview
The Petfinder API gives developers access to access Petfinder's database of over 300,000 adoptable pets and 11,000 animal welfare organizations (AWO). In addition to searching for adoptable pets on the Petfinder.com web site, you can use the API to create your own dynamic pet web sites or applications, using the same data we use on Petfinder.com.
Here is what I did for
http://www.laneparkdogs.com/adopt
<?php
header("Content-Type: application/json");
require_once('Cache/Lite.php');
$lastOffset=$_REQUEST["offset"];
$id = $lastOffset;
$options = array(
'cacheDir' => '/tmp/',
'lifeTime' => 18000
);
$Cache_Lite = new Cache_Lite($options);
if ($contents = $Cache_Lite->get($id))
{
}
else
{
$API_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
$API_PUBLIC = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
$API_URL = "http://api.petfinder.com/";
$API_COMMAND = "pet.find";
$options = "?key=".$API_PUBLIC."&animal=dog&location=43220&offset=".$lastOffset."&count=10&output=full&format=json";
$request = $API_URL.$API_COMMAND.$options;
$handle = fopen($request, "r");
$contents = stream_get_contents($handle);
fclose($handle);
$Cache_Lite->save($contents);
}
print($contents);<html>
<head>
<script src="/misc/jquery.js" type="text/javascript"></script>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
<script type="text/javascript">
var currentOffset = 0;
function getPets()
{
$("#loader").css(
{
"background-image":"url(/petfinder/ajax-loader.gif)",
width:"220px",
height:"19px"
});
$("#btnMore").hide();
$("#loader").show();
var url = "/petfinder/";
var data = {offset:currentOffset};
$.getJSON(url, data, function(resp)
{
currentOffset = parseInt(resp.petfinder.lastOffset.$t, 10);
var pets = resp.petfinder.pets.pet;
$(pets).each(function(i, item)
{
$("#pets").append(formatPet(item));
});
$("#loader").hide();
$("#btnMore").show();
}, "json");
}
function formatPet(pet)
{
var div = $("<div class='clearfix'></div>");
var name = pet.name.$t;
$(div).append("<strong>"+name+"</strong> <br />");
var desc = $("<div class='clearfix'>"+pet.description.$t+"</div>");
if(pet.media.photos.photo.length > 0)
{
var img = $("<img />")
.attr("src", pet.media.photos.photo[0].$t)
.attr("alt", name)
.attr("align", "left")
.css({
border:"solid 2px gainsboro",
padding:"3px",
margin:"5px",
width:"200px"
});
$(desc).prepend(img);
}
$("a", desc).attr("target", "_blank");
$(div).append(desc).append("<hr />").css({padding: "4px", margin:"3px"});
return div;
}
$(document).ready(function()
{
getPets();
$("#btnMore").click(function()
{
getPets();
});
});
</script>
</head>
<body>
<noscript>Javascript is required.</noscript>
<div class="clearfix" id="pets"></div>
<div id="loader" style="width: 220px; height: 19px; line-height: 19px; vertical-align: middle; text-align: center;">
Loading...
</div>
<input id="btnMore" type="button" value="View More" />
</body>
</html>
