Petango Code Snippets – WordPress iFrame

If you’re using Petango and want to insert a list of adoptable animals on your website, you may have noticed that the instructions from Petango are from 2010. This means not all of the information is correct, including the link to test your CSS code.This post will provide you with some of the missing information and troubleshoot a common issue – including “other” animals (bunnies, ferrets, etc) – in a format suitable for WordPress.

1. Obtain Authentication Key

First, you’ll need to access your authentication key. To access these settings, you will need to be an administrator on PetPoint (or request the administrator provide this information, by following these instructions):

Go to Admin -> Admin Options

 

Select “Online Animal Listing Options”

 

Copy your Authentication key

 

 

2. Review Official “How To” Guide

It’s worth reading the official how-to guide, because:

  • It explains what each individual section of the CSS code means and how to change the variables (not covered in this article)
  • It will provide you with other examples of how to organize your information.

Unfortunately, you’ll notice:

  • The CSS test page no longer works.
  • Aside from dog & cat, only “other” seems to work as an additional search option without an administrator mapping the animals (see pg. 14).

The next section covers quick code fixes that should get you up and running quickly. I’m sure you’d like to get to the point – code snippets that should work for you if you have your authentication key.

3. Insert Code Snippets & Examples

Click on “text” in your composer:

Dogs

Copy and paste the following code onto your website:

<iframe id=”adopt-frame” style=”border: none;” src=”https://ws.petango.com/webservices/adoptablesearch/wsAdoptableAnimals2.aspx?species=dog&amp;gender=All&amp;agegroup=All&amp;location=&amp;site=&amp;onhold=All&amp;orderby=ID&amp;colnum=5&amp;authkey=INSERTYOURAUTHKEYHERE&amp;recAmount=&amp;detailsInPopup=Yes&amp;featuredPet=Include&amp;stageID=” width=”100%” height=”1000″ scrolling=”auto”><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span></iframe>

Once you replace INSERTYOURAUTHKEYHERE with your authentication key, click on Preview. It should  produce the following output, which is dynamic (try adjusting your screen size):

 

 

Cats

Take a look at the code again – if you replace “dog” with “cat” , you can change the animals that appear:

<iframe id=”adopt-frame” style=”border: none;” src=”https://ws.petango.com/webservices/adoptablesearch/wsAdoptableAnimals2.aspx?species=cat&amp;gender=All&amp;agegroup=All&amp;location=&amp;site=&amp;onhold=All&amp;orderby=ID&amp;colnum=5&amp;authkey=INSERTYOURAUTHKEYHERE&amp;recAmount=&amp;detailsInPopup=Yes&amp;featuredPet=Include&amp;stageID=” width=”100%” height=”1000″ scrolling=”auto”><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span></iframe>

This is the output:

 

Other Animals

As noted above, unless you have an administrator in PetPoint manually mapping the other animals (see pg. 14 of the guide), the best solution is to use “other” for all other animals:

<iframe id=”adopt-frame” style=”border: none;” src=”https://ws.petango.com/webservices/adoptablesearch/wsAdoptableAnimals2.aspx?species=other&amp;gender=All&amp;agegroup=All&amp;location=&amp;site=&amp;onhold=All&amp;orderby=ID&amp;colnum=5&amp;authkey=INSERTYOURAUTHKEYHERE&amp;recAmount=&amp;detailsInPopup=Yes&amp;featuredPet=Include&amp;stageID=” width=”100%” height=”1000″ scrolling=”auto”><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span></iframe>

This is the “other” summary that will appear:

 

 

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 *