Page tree

This user guide is outdated. It is superseded by our new individual service guides. Please view the Getting started with guide for a list of all the service guides:

Skip to end of metadata
Go to start of metadata

Where do I find it?

You can find the Pet Adoption iFrame page by going to Features > Pet Adoption iFrame

Quick Instructions

To add the iFrame to your organization's Website:

Just copy and paste the iFrame code to your webpage and save.

To add the iFrame to your organization's Facebook page:

Go to:
- Click on the button Add Static HTML to a Page

Once installed on your organization's facebook page:
- open a browser window with > features > Pet Adoption iFrame

You can select either the narrow or wide version for the: iFrame Code

In your other browser window, with the static HTML app:
-Paste that iframe code into the admin area of the static HTML app. I've attached a screen capture.

You can preview the tab and preview what visitors will see.

You will also be able to rename the tab and add your own image to the tab once you are done.

If you need to add another tab using the Thunder Penny app


You can display your adoptable pets on your organization's Facebook Page using any app that allows you to add HTML to a Facebook page.

The instructions provided below were created using an application from called Static HTML: iframe tabs.

Example of the iFrame

Step 1: Add an HTML App to Facebook Page

First we will install an application that allows you to add HTML to a Facebook page.

  • The next screen will allow you to select which Facebook Page to add the application to.
  • Select your organization's Facebook Page.

  • Click on the button, Add Static HTML: iframe tabs

  • The Static HTML application is now added and you should see the image of a star with Welcome written below on your organization's page.

Step 2: Get the Pet Adoption iFrame HTML

In this next step, we will open a new web browser window or web browser tab so we can access the Pet Adoption iFrame HTML in your service.

Using two browser tabs or browser windows will allow us to copy from and paste into Facebook.

  • Open a new browser window OR browser tab

  • You can choose either the narrow or wide option for displaying your pet list.
  • Select and copy the code you would like (control+c on a pc or command+c on a mac)

Step 3: Paste the Pet Adoption iFrame HTML into the Facebook HTML App

Now that you have copied your code, you will paste that code into the Facebook app.

  • Switch to your other browser window or tab that has your Facebook page.
  • Click on the Welcome tab (image of a star).

  • Click on Edit tab ->

  • Select all of the default text.
  • Delete it.  You will replace this with your iframe code.

  • Next Paste your iframe code.
  • Then click Save & Publish.

  • Click View tab on Facebook ->

  • You can should now be able to view your pet list.

Next you may want to customize the name of the tab as well as change the tab image.

More Options - Customize Tab Name, Add Custom Icon

Special thanks to 2nd Chance Dog Rescue for allowing us to use their page in this example.

Here are instructions for how to customize the name of your tab and add a custom image.

  • From your Facebook organization's Facebook page, click on the downward arrow icon next to the tabs.

  • Click on the edit icon. It looks like a pencil.
  • Select Edit Settings

  • To change the tab name, enter text next to Custom Tab Name
  • Click Save

  • Next to Custom Tab Image, click Change

  • Hover over the tab image, and click Edit

  • Click Choose File
  • Browse and select the file on your hard drive you would like to upload.

  • If the image is successfully uploaded, you will see your image.

  • Return to your organization's Facebook page. You will now see your customized tab text and image.

Tips for Creating a Custom Tab Image

To upload a custom image, you need to be able to create an image that is 111 x 74 pixels.

  • If you have photoshop, create a new file and set the width, height and resolution.
  • width: 111 pixels
  • height: 74 pixels
  • resolution: 72 pixels/inch

  • You can add images to one layer and text to another layer.
  • You could create an image with text only or a photo. It's up to you.
  • Here is the image that was created for 2nd Chance for Dogs.

  • The logo was added on one layer and resized.
  • The text was added to another layer.

Custom Facebook Tab Image Templates

Here is are both a blank photoshop file and a blank png with these exact dimensions to help you get started.

Click to download and use as templates.

Free Facebook Tab Images

Feel free to use the Facebook tab images that we've created below.

How to save an image below to your computer:

  • Right mouse-click on an image, then select Save As to save it to your hard drive.



  • No labels