Using the PetFinder API

Share this 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<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>
Your rating: None Average: 3.8 (10 votes)

Thank you sir! I would not

Thank you sir! I would not have been able to get this working without your script!

I am pretty inexperienced at web development, but was able to get this working with Joomla. Here is some additional info, for those who may be having trouble with this, as I was for several hours.

This is what I used for my PHP file...note that I removed the caching section, as we have such a low volume website that the cache would expire by the time a new person checked the page anyways, and it saved me from installing PHP modules. I also changed the query, as I wanted petfinder to provide the list of all animals listed by my rescue org:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
        header("Content-Type: application/json");
        
        $lastOffset=$_REQUEST["offset"];
        $id = $lastOffset;
        $options = array(
                'cacheDir' => '/tmp/',
                'lifeTime' => 18000
        );
                $API_SECRET = "*** fill in your secret here ***";
                $API_PUBLIC = "*** fill in your public here ***";
                $API_URL = "http://api.petfinder.com/";
                $API_COMMAND = "shelter.getPets";
                $options = "?key=".$API_PUBLIC."&id=ON233&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);
        print($contents);
?>

For those of you using this as a config example, you will need to change the API keys, as well as put your rescue number in the query (ours is ON233). At this point, you should be able to test your PHP file to ensure that it is communicating with PetFinder correctly. I used curl to load the petfinder.php file, and there should be PetFinder data in the output, like so:

1
2
curl homewardboundrescue.ca/petfinder.php
{"@encoding":"iso-8859-1","@version":"1.0","petfinder":{"lastOffset":{"$t":10},"pets":{"pet":[{"options":{"option":[{"$t":"altered"},{"$t":"hasShots"},{"$t":"housebroken"}]},"breeds":{"breed":{"$t":"Italian Greyhound"}},"shelterPetId":{},"status":{"$t":"A"},"name":{"$t":"Sergio"},"contact":{"email":{"$t":"igrescueohio@gmail.com"},"zip":{"$t":43220},"city":{"$t":"Columbus"},"fax":{},"address1":{},"phone":{},"state":{"$t":"OH"},"address2":{}},"description":{"$t":"<div><p><em><span style=\"color: #ff0000;\"></span><span style=\"font-size: 10pt;\"><strong>Educate yourself about this breed and adopting through rescue before submitting an application.&nbsp; Find information and how to adopt at <a href="http://www.igrescueohio.org/</strong></span></em><br" title="http://www.igrescueohio.org/</strong></span></em><br">http://www.igrescueohio.org/</strong></span></em><br</a> /><br /><p>Sergio is a beautiful, blue, 8 years <em>young</em> boy.&nbsp; He has excellent potty habits and crates very well when his people are away.&nbsp;

You could just point your browser directly to the file, rather than using curl - the browser will likely prompt you to download the file. Open the file, and its contents should be the PetFinder data (or possibly an error message if something went wrong of course...).

OK, on to the HTML page. I only modified a couple of things here (I think?)... one being the location of jquery - I pointed it to googles jquery library to save myself from installing it. The only other thing I changed was the location (as described by the author above, his line 40) of the petfinder.php file. My file is in my root www folder:

1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
var url = "/petfinder.php";

Other than that, the entire HMTL portion can be pasted into a Joomla article - BUT (always an exception!) you need to be using an editor which does not screw with HTML like the default. I am using JCE, and it has an option to not clean up HTML code. So, using JCE or equivalent, enter HMTL mode and paste the HTML contents (with the exception of the above couple of changes) and you should be good to go!

Credits to the author for the script, it was a life saver - I could have never got this working on my own.... and of course, as a volunteer only rescue group, who has money to spend on web-dev?? I hope this saves someone some time!

The php is not talking to the

The php is not talking to the html portion for me either. I am using Wordpress, where should the php file be stored?

In my example it's the

In my example it's the index.php page inside of /petfinder/, so it's stored at /petfinder/index.php. In the javascript on line 40 there's a place to set the url of the php page.

The php is not talking to the

The php is not talking to the html portion for me either. I am using Wordpress, where should the php file be stored?

That was a great example, but

That was a great example, but what did you called the PHP file that you made? I can cant get it to work on my end, my HTML portion is not "talking" to the PHP file part

Post new comment

The content of this field is kept private and will not be shown publicly.
 
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <drupal5>, <drupal6>, <html4strict>, <java>, <javascript>, <objc>, <php>, <python>, <ruby>, <tsql>.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.