...

Overview of iFrame

Example of the iFrame

Adding the iFrame to your Facebook page

1. Add an HTML App to your Facebook Pagepage (see above for a review of various apps you can use).
2. Select your organization's Facebook Page when asked for the page to which to add the application.
3. Add the static HTML app.
4. Get the Pet Adoption iFrame HTML by opening a new browser window or tab so you can access the Pet Adoption iFrame HTML in your RescueGroups.org service.
5. Using the two browser tabs or browser windows, copy from RescueGroups.org and paste into Facebook.
   1. In the new tab or window, go to https://manage.rescuegroups.orgyour organization's account dashboard. 
   2. Then go to Then Features > Pet Adoption iFrame  iFrame.
      
   3. Choose either the narrow or wide option for displaying your pet list.
   4. Select and copy the code you would like to use (control+c on a pc or command+c on a mac).
      
      

6. Paste the Pet Adoption iFrame HTML into the Facebook HTML App which is open in the other tab.

...

Customizing the Tab Name,

...

adding a Custom Icon

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

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

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

...

1. Image Added
2. Click

...

1. the edit icon. It looks like a pencil.
2. Select Edit Settings.
   Image Modified
3. To change the tab name, enter text next to Custom Tab Name.
4. Click Save.
   Image Modified
5. Next to Custom Tab Image, click Change.
   Image Modified
6. Hover over the tab image, and click Edit.
   Image Modified
7. Click Choose File
8. Browse and select the file on your hard drive you would like to upload.
   Image Modified
9. If the image is successfully uploaded,

...

1.   your image displays.
   Image Modified
2. Return to your organization's Facebook page. You will now see your customized tab text and image.
   Image Modified

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
  • Width: 111 pixels
  height
  • Height: 74 pixels
  resolution
  • Resolution: 72 pixels/inch
    Image Modified
  • 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.
    Image Modified
  • 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.

  • FBCustomTab.psd
  • FBCustomTab.png

  Free Facebook

  ...

  tab images

  Below are Feel free to use the Facebook tab images that we've created belowfor your use. 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.