Using the PetFinder API
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> |
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:
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:
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:
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