Where do I find it?
You can find the Pet Adoption iFrame page by going to Features > Pet Adoption iFrame
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 thunderpenny.com 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.
- Go to:http://www.thunderpenny.com/
- Click on the button Add Static HTML to a 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 RescueGroups.org service.
Using two browser tabs or browser windows will allow us to copy from RescueGroups.org and paste into Facebook.
- Open a new browser window OR browser tab
- In the new tab or window, go to https://manage.rescuegroups.org
- Then Features > Pet Adoption iFrame
- 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.