Click Here to view this article as a PDF.

Author: Joel Kristenson

Last Updated: 2014-12-01

Overview

This article will walk you through the steps to put your Trail Blazer donation form (iFrame) on your Facebook Page using a free app called Woobox Custom Tab iFrame Host.  It requires that you have your own personal Facebook account that has admin access to your organization’s Facebook Page.

The article is broken into pieces that cover the installation of this app on your Facebook Page, creating a source attribute to track donations coming in specifically via Facebook, and how to generate and insert your iFrame code in the Donation tab.

Tip: Use the Ctrl+F hot key combination to jump to different sections of this article (example: “#1”, “#2” or “Related Resources”).

Outline

#1 Installing the Woobox App on your Facebook Page

#2 Create a Source Attribute to Track Donations Coming in via Facebook

#3 How to Generate the Donation Form iFrame Code and Insert it into the Woobox App Tab

#4 Related Resources

#1 Installing the Woobox App on your Facebook Page

*This article was written as if I’m not currently logged into Facebook, if you’re already logged in the screenshots and steps may very slightly.

Follow this link to the Woobox App page on Facebook

<<https://apps.facebook.com/iframehost-a/ >>.

Click the [Install Page Tab] button.

This will open a new tab asking you to log into your personal Facebook account.  *If you’re already logged into your Facebook account you’ll bypass this prompt.

Enter your credentials and click [Log In].

After you log in you will be prompted with a screen asking you what Facebook Page you want to add the Woobox Page Tab to.

Click the drop-down, select the page you want to add it to, and click [Add Page Tab].

Click the green [Authorize the Tab Application] button.

You’ll be prompted with a warning that the Static Iframe Tab will have access to some of your Facebook information.

Click [Okay] to proceed.

This will bring you into the Facebook Page that you selected earlier.  It will bring up the Welcome tab by default where you can begin your configurations.

The two images below display what this tab will look like by default, they have descriptions about all the different settings, which are covered more thoroughly in section #3.

Image 1 of 2 – Default Welcome Tab

Image 2 of 2 – Default Welcome Tab

Click [Save Settings] and you’re done.

You’ll likely get a security prompt asking for permission.  Click [Grant Permission to Application] to continue.

You will likely get one last prompt asking for permission for the Static Iframe Tab to manage your Pages.

Click [Okay].

You’re now finished installing the Woobox Iframe Tab on your Facebook Page.

The next section delves into creating a source attribute to track donations coming in through your Facebook page.  The final section will show you how to generate the iFrame code and past it into the Woobox app.

#2 Create a Source Attribute to Track Donations Coming in via Facebook

This is an *optional step in the process, but beneficial in the fact that it allows you to more easily track where data is coming from into your database, much like how Google Analytics tracks visitors coming to your website.  It could also be accomplished by tying your iFrame to a specific event, but for this example I used an attribute.

Log into your database and navigate to your contact list “i.e. Donors, Voters etc.”  (In this example I used a nonprofit database and opened my Donors list.)

Click on the Attribute tab.

Locate and expand the Source folder.

Right-click the Source folder and select Insert Item.

Give your new source attribute a name, in this example I called mine “Donation via Facebook”.

Click [OK].

You’re now finished with this step.

In the next section we will utilize the new source attribute when generating the donation form Iframe.  (Click here to read more about creating attributes.)

#3 How to Generate the Donation Form iFrame Code and Insert it into the Woobox App Tab

*You need security clearance to access this part of the database.

Navigate to WebSite Configuration.

Click the [Iframe Wizard] button at the top.

IMPORTANT! You must select the redirect as outside of iFrame, it will take the donor away from your Facebook Page but the Woobox tab does not support a re-direct page within the iFrame.

Below is a detailed screenshot of my iFrame configurations, you may choose other options depending on your needs.

You’ll need to use your own thank-you page redirect URL.  I chose to assign donations coming in via Facebook to an internal event as well as the source attribute created in section #2.

Here are my iFrame settings written out:

Select Frame: donations.aspx

Page Version: Version 2

International Form Support: Yes

Allow Scrolling: No

Width x Height: 800px/1,600px

Redirect Type: Redirect Thank You Page ‘outside’ of iframe. Type, RDIF=

Thank You Page: http://www.trailblz.com/demositemarkonly/new/thankyou.html

Link To Event: Internal Event – Donations via Social Media

Link To Attribute: \Source\Donation via Facebook

Here’s my final donation iFrame code, the text in red would need to be replaced with your information:

<!-- Trail Blazer 07/30/2014 -->

<iframe src="https://www.trailblz.info/DemoNonprofit_Joel/Donations.aspx?rdif=http%3a%2f%2ftrailblz.com%2fdemositemarkonly%2fnew%2fthankyou.html&eventid=49&originid=10357&ver=2&international=1" style="width:800px;height:1600px" frameborder="0" scrolling="no" onload="scroll(0,0)" ></iframe>

<!-- Trail Blazer 07/30/2014 -->

Click [Copy HTML] to copy the iFrame code to your clipboard.

Click [OK] to close the popup.

I would suggest saving this in a blank text document with all of your other Trail Blazer iFrame forms.  I prefer the free Notepad++ app because you can save as an .html document and it helps color the code for readability.

You’re finished with the iFrame generation.  You can close the Trail Blazer app.

Once the code is pasted into your Facebook page you can return to website configuration to make modifications such as Donation Amounts/Descriptions, select which email template to use as an auto-responder, and many other customization options.

Log into your Facebook account and open your Facebook page that you manage.

Click on the More drop-down menu and select the Woobox tab, by default it will be called “Welcome” I renamed mine to “Donate”.

Later I will show how to Manage Tabs which allows you to easily move the order of your tabs so that *Donate* displays right next to *About* instead of in the More drop-down menu.

You may be prompted with a security warning to Authorize the app, click the authorize button to proceed.

Copy the iFrame code you generated and past it into the HTML source editor.

Scroll the bottom of the page and click [Save Settings].  If you haven’t already changed your tab name you can do so in this location.

Scroll back to the top and click [View Tab]..

Below is a screenshot, if you need to make modifications click on the Settings tab.

At this point you’re finished, you can navigate to your Facebook page as a *visitor* and test out the form with a real donation over the $5.00 minimum.

On your journey to become an iFrame guru you can find a lot of other useful information by following the related links below.  If you have any trouble going through these different tasks please contact our support team.

Tip: Change the order in which your Facebook tabs display:

Step 1

Step 2

Tip:  You can use this iFrame widget with any of the iFrames Trail Blazer supports i.e. Newsletter Signup, Volunteer Signup, Events…

#3 Related Resources

Article: Web site signup < iframe >

Article: Linking your Website to your Database with Custom Online Forms

Article: Build Your Own Custom Signup Form (Get)

Video: iFrames

3^rd Party Resource (Tool): Woobox Custom Page Tab (iFrame Host)

3^rd Party Resource (Video): Create Custom Tabs with Woobox App on Facebook Timeline

Trail Blazer Live Support

  Phone:  1-866-909-8700

   Email:  support@trailblz.com

   Facebook: https://www.facebook.com/pages/Trail-Blazer-Software/64872951180

   Twitter: https://twitter.com/trailblazersoft

* As a policy we require that you have taken our intro training class before calling or emailing our live support team.  Click here to view our calendar for upcoming classes and events feel free to sign up other members on your team for the same training.

* After registering you’ll receive a confirmation email with the instructions for how to log into the GoToMeeting session where we host our live interactive training.

* This service is included in your contract.