Pet list widget iFrame

You can display your adoptable pets on your website in a list updates instantly using our "Portable Pet List" widget:

https://www.adoptapet.com/shelter/portable_pet_list/create

Some website builders will not accept the widget code. In those cases, you can use HTML to generate the widget iFrame. Instructions for Wix can be found here. Three options for Wordpress can be found below, and the third iFrame option can be adapted for most website builders.

Add your Pet List in WordPress + iFrame

This  article describes how to add your Adopt-a-Pet.com Pet List to WordPress and other websites. If you need help, have any suggestions for how we can make these instructions easier, please email [e-mail] — thank you!

A. Use the WordPress Plugin created by a fantastic volunteer:
https://wordpress.org/plugins/pet-adoption-listings/

B. Use Custom HTML block inserter:

In Wordpress, if you create a page and see a blue plus sign box on the upper left, you can click it and a menu appears on the left. Scroll down and look for "Widgets" click on the box for "Custom HTML" then paste this code below into the "Write HTML" box on the right. Click preview and the pet list should show up. It looks like this:

Copy the generated code from https://www.adoptapet.com/shelter/portable_pet_list/create and paste it in the Write HTML... box, and click Preview. If it looks good, click Update (top right) to save.

C. Use an iFrame: If you have an iFrame plugin in your WordPress theme or can use an iFrame in your website builder, you can use these steps below. (Many of the free themes on WordPress.ORG do not allow iFrames.)

1. First, you need your Adopt-a-Pet.com shelter account unique ID number.
   You can see that number on your Pet List Links page:
   http://www.adoptapet.com/cgi-bin/shelter/index.cgi/listing_links
   Look for the number in the links. For example, in
   http://www.AdoptaPet.com/shelter1234-pets.html <– 1234 is the ID number.
   .
2. Go to the WordPress page where you want to add your Pet List.
   Click the little “world” icon that is for inserting an iFrame.
   (We put a green arrow pointing to it in the screenshot below.)
   
   
3. A little box will pop up, like this:
   
4.  Click in the box below to copy the URL then paste it into the box’s URL field.
   

   https://searchtools.adoptapet.com/cgi-bin/searchtools.cgi/portable_pet_list?shelter_id=1234&title=&color=green&clan_name=&size=450x320_list&sort_by=pet_name&hide_clan_filter_p=

   In the code you copied in the box, very carefully type over to replace the sample number 1234 with your unique ID number. This is a little tricky! You probably will need to click somewhere else in the URL then use your arrow keys to move the cursor to the shelter_id number. Be careful… don’t type over the = before or the & after the number in the code!

5. Make sure “Enable srollbars” is checked.

6. Set the width and height to fit your page.

7. Click OK and publish or save your page.

You’re all done!

Ps. We’ve heard it doesn’t always show up in “preview” so you might want to publish it on a test page first.