• Creating the Facebook Page
• Adding the tab to your Facebook Page
• Adding the form to your Facebook Tab
• The Code
• The Parts You'll Need to Change
• The Explanation
• That's It!
• Hey, Facebook's changing the width...

This guide is written for clients of NGP VAN's Online Contribution software, which allows for real-time donation processing and sychronization with your NGP Finance database. This guide explains how to create a Facebook page and add a tab to that page that allows Facebook visitors to begin the donation process on Facebook and seamlessly transition to NGP Online Contributions (OC).

Creating the Facebook Page

The first step in the process is creating a Facebook Page. If you already have a Page, congratulations! You can skip to the next section. Otherwise, make sure you're logged into Facebook and visit http://www.facebook.com/pages/create.php:

1. First, choose the type of Page you want. Facebook Pages are divided into 3 broad types: Local; Brand, Product or Organization; and Artist, Band or Public Figure. Since the bulk of NGP's clients are public figures, the most likely option here is the last - choose that option and then use the drop-down menu to select "Politician". However, if the entity for whom you are creating the page is not a Politician (or that is not the best fit), feel free to choose something else that makes more sense.
2. Next, choose a name for the Page. The name should be as simple and succinct as possible. By default, the Page once created is publicly visible. Check the "Do not make Page publicly visible...." box to hide the Page until you're sure it's setup exactly as you'd like.
3. Look over your choices, and make sure you haven't made any typos. Then hit the "Create Page" button.

Adding the tab to your Facebook Page

The next step is to create the tab on your Facebook Page that will allow you to direct the donor to your Online Contribution page. Once you have created your new Facebook Page, click here to add the Static iFrame Facebook application. This application gives the ability to post HTML content within a tab on your Facebook Page.

Click the button that says "Add Static HTML to your Page"

If you are the owner of more than one page, you will get a small popup box which will list the entirety of Facebook Pages for which you are an Administrator. Click on "Add to Page" next to the Page to which you wish to add Static HTML, then hit the "Add" button. This should now bring you to the page that you added it to.

You should now see the the static HTML application in your list of tabs on the left hand side of your page - it's already enabled and by default is titled Welcome. In order to change the title, click the "Edit Page" button in the top right corner of your Facebook Page and then click onto the Apps tab.  In this list, you should see an option for "Static HTML: iframe tabs,"  click the Edit Settings link.  Here you can name your tab anything you want, such as "Contribute!"  Once you have done this, click the View Page button at the top of the page to return to your page.  

Look back at the tabs of your page on the left hand side, and see that your name change has taken effect.  Go ahead and click on this tab to load the editing interface.

Adding the form to your Facebook Tab

Once you've clicked on the Welcome tab that was created when you added the app to your page, above is the screen you should have gotten.  The next step is probably the most complicated. It doesn't require any knowledge of HTML, but if you do know HTML, it will certainly make your life easier.  

First, it probably will help if you uncheck the no scrollbars checkbox. Also, you may notice a box for non-fans, feel free to ignore that for this tutorial.

The "Enter your content here" box is where you can actually input the HTML content. Before you actually make changes to this content, let's step back a bit and discuss what we'll be doing: adding a custom form to your tab. That form will mirror (or at least roughly reflect) some of the options you have on your CWP page. For example, you can see the default CWP page for the Lefty for Governor campaign here and the Lefty for Governor Facebook Page tab here. The latter links to the former, but it does more than just that: if you fill out information on the Facebook Page tab, that information is passed to the CWP Contribution page. So not only are you giving your Facebook visitors an easy link to contribute - you're also passing through what information they choose to provide, in order to make it easier for them to fill out the final contribution form.

NGP has written some default code that creates this form within the context of Facebook. This code is provided below; you should also feel free to download it as a text file here. You can copy and paste this code directly into the textarea (as long as you modify Line #s 6, 7 and 18) or you can feel free to make significant changes. Either way, NGP recommends that you keep a copy of your code somewhere outside of Facebook, in case you ever need to recreate it. Once you are done entering the code, hit the Save and View tab button at the top, and then the View your tab as a non-fan link.

The Code

1. <link href="https://help.ngphost.com/sites/default/files/ngp-fb-520.css" rel="stylesheet" type="text/css" media="screen"/>
3. <div class="NGP-FB-Wrapper">
5. <div class="NGP-FB-Header">
6. <a href="[URL of your donation page]" title="Donate to Lefty!">
7. <img src="[URL of your header image]" width="520" height="110" alt="Donate to Lefty!" />
8. </a>
9. </div>
11. <div class="NGP-FB-Content">
13. <div class="NGP-FB-DonateBox">
14. <p>I'm a huge fan of Lefty, and I thought I'd make it really easy to donate to Lefty. Just use this form below. Please contribute so we can get our message out and win the campaign.</p>
16. <form action="https://services.myngp.com/ngponlineservices/contribution.aspx" method="GET" target="_blank">
17. <div>
18. <input type="hidden" name="X" value="uA%2fPV9zPNW3QBXhi7YnwUMsdGLWDQL79tmWXbICbt9g=" />
20. <div class="NGP-FB-RadioButtons">
21. <div><input type="radio" name="a" value="25" /> $25.00</div>
22. <div><input type="radio" name="a" value="50" /> $50.00</div>
23. <div><input type="radio" name="a" value="100" /> $100.00</div>
24. <div><input type="radio" name="a" value="125" /> $125.00</div>
25. <div><input type="radio" name="a" value="150" /> $150.00</div>
26. <div><input type="radio" name="a" value="500" /> $500.00</div>
27. <div><input type="radio" name="a" /> Other</div>
28. </div>
30. <div class="NGP-FB-TextAreas">
31. <label for="f">First Name</label><input type="text" name="f" id="f" />
32. <label for="l">Last Name</label><input type="text" name="l" id="l" />
33. <label for="z">Zip</label><input type="text" name="z" id="z" />
34. <label for="e">Email</label><input type="text" name="e" id="e" />
35. </div>
37. <input class="submit" type="submit" value="Contribute" />
39. </div>
40. </form>
42. </div>
44. <h1>Make a contribution today!</h1>
46. <p>Like many Americans, Lefty was born to a poor, but very close family of donkeys in southwest New Mexico. His mother, Jenny Burr O., grew up in a tiny town on the Mexican border and worked most of her years as a herding animal on a farm before immigrating to America. Lefty's father, Jack, came from a long line of pack mules in the Old West gold mines during the mining rush of the nineteenth century. Jack was intimately familiar with manual labor as he toiled as a cog in the wheel, spinning wheels at a grist mill in western California!</p>
48. <p>...</p>
50. <p>Won't you help Lefty with his next chapter, and yours?</p>
52. </div>
54. <div style="height:1px;">&nbsp;</div>
56. </div>

The Parts You'll Need to Change

There's a lot going on in the above code, and for someone who's not a web developer or a webmaster, a full explanation might make your eyes glaze over. So if you're not particularly interested in getting a full handle on the code and just want to know what to change to make it work for you, we've pulled out this section to cover just the necessary changes. If you are indeed interested in a more fuller understanding of the entire setup, feel free to read The Explanation.

1. <a href="[URL of your donation page]" title="Donate to Lefty!">
2. <img src="[URL of your header image]" width="520" height="110" alt="Donate to Lefty!" />
3. </a>

In our example code, we've provided a header image to sit on top of the text and the form. That header is 520 pixels wide and 110 pixels tall. If you'd like to use your own image and have that image link to your contribution form, here's what you need to do:

1. Find the link to your contribution URL (this can be the link to the CWP page, or it can be a trackable page redirect that you'll want to stick in there instead) and paste in that URL in Line #6, replacing the text that says "[URL of your donation page]". Don't include the square brackets in your URL.
2. If you want to modify the text that you see when you mouseover the header, change where it says "Donate to Lefty!" to be the text you'd rather use.
3. Upload a header image that's 520 by 110 pixels to a publicly accessible webpage. Grab the URL of that image and paste it in in place of "[URL of your header image]" (again, don't include the square brackets) in Line #7. Remember to change the text in the alt attribute from "Donate to Lefty!" to something more relevant.

1. <p>I'm a huge fan of Lefty, and I thought I'd make it really easy to donate to Lefty. Just use this form below. Please contribute so we can get our message out and win the campaign.</p>

This text is the introduction above the donation form. It's not necessary to have anything here, but it does provide useful context. Feel free to either omit this line, or replace it with your own text.

1. <input type="hidden" name="X" value="uA%2fPV9zPNW3QBXhi7YnwUMsdGLWDQL79tmWXbICbt9g=" />

Line #18 is probably the most important part of the page - it provides the link to the actual CWP contribution page. You will want to modify the value of the hidden <input> field (which is the encrypted hash value that indentifies your particular campaign) so that it is the one used by your campaign.

The best way to get this value is by going to your CWP Contribution page. Every contribution page URL has two sections - the beginning of the URL, which is always the same, and the end, which is always different. The end uses what's called a hash value to uniquely identify your campaign in NGP's system. So if you see something like

https://services.myngp.com/ngponlineservices/contribution.aspx?X=uA%252fPV9zPNW3QBXhi7YnwUMsdGLWDQL79tmWXbICbt9g=

in your URL bar, drop off the part that's generic:

https://services.myngp.com/ngponlineservices/contribution.aspx?X=

and keep the part that's unique:

uA%252fPV9zPNW3QBXhi7YnwUMsdGLWDQL79tmWXbICbt9g=

1. <h1>Make a contribution today!</h1>
2.  
3. <p>Like many Americans, Lefty was born to a poor, but very close family of donkeys in southwest New Mexico. His mother, Jenny Burr O., grew up in a tiny town on the Mexican border and worked most of her years as a herding animal on a farm before immigrating to America. Lefty's father, Jack, came from a long line of pack mules in the Old West gold mines during the mining rush of the nineteenth century. Jack was intimately familiar with manual labor as he toiled as a cog in the wheel, spinning wheels at a grist mill in western California!</p>
4.  
5. <p>...</p>
6.  
7. <p>Won't you help Lefty with his next chapter, and yours?</p>

Like Line #14, this is just default text that helps place the donation form in context. Feel free to replace it with something relevant to your campaign.

The Explanation

We've broken down the various pieces of this code into discrete sections. Below, each section has a more detailed description. If you only need to make rudimentary changes, you'll probably prefer reading the above section, The Parts You'll Need to Change.

1. <link href="http://help.ngphost.com/sites/default/files/ngp-fb-520.css" rel="stylesheet" type="text/css" media="screen"/>
3. <div class="NGP-FB-Wrapper">

Line #1 provides styles for the page by pulling them from the location listed as the href attribute of the <link> tag. If you would like to use custom styles, feel free to remove this line (or add your own line linking to a CSS file hosted under your control); otherwise the default display should be sufficient for most users. Do note that removing or modifying this line could significantly affect the display of the site - the styles make a significant number of changes to the way the page looks.

Line #3 creates a block (a <div>) with which to wrap the content. It's closed on line #56

1. <div class="NGP-FB-Header">
2. <a href="[URL of your donation page]" title="Donate to Lefty!">
3. <img src="[URL of your header image]" width="520" height="110" alt="Donate to Lefty!" />
4. </a>
5. </div>

This chunk is the header of the Facebook page. Line #5 creates the header <div>, Line #6 is the hyperlink that links to the donation page, and Line #7 is the image wrapped by the link. If you don't have such an image, you should feel free to replace it with text. If you'd rather not have a header, feel free to leave this entire section out.

1. <div class="NGP-FB-Content">
3. <div class="NGP-FB-DonateBox">
4. <p>I'm a huge fan of Lefty, and I thought I'd make it really easy to donate to Lefty. Just use this form below. Please contribute so we can get our message out and win the campaign.</p>
6. <form action="https://services.myngp.com/ngponlineservices/contribution.aspx" method="GET" target="_blank">
7. <div>
8. <input type="hidden" name="X" value="uA%2fPV9zPNW3QBXhi7YnwUMsdGLWDQL79tmWXbICbt9g=" />

Line #11 creates a content <div> for the page (as opposed to the header <div> in Line #5). This <div> contains the donation box (Line #13) that is floated to the right, as well as the rest of the content outside the donation box. Line #14 contains the text inside the donation box that appears before the <form>

Line #16 begins the <form>. The action of the form (which is the URL to which the form is directed upon submission) should not change. What will change is the value of the hidden <input> field on Line #18 - this is the encrypted hash value that indentifies your particular campaign. You should be able to pull this off the URL of your CWP donation page; if you have trouble finding it, please contact NGP and we'll help you out.

1. <div class="NGP-FB-RadioButtons">
2. <div><input type="radio" name="a" value="25" /> $25.00</div>
3. <div><input type="radio" name="a" value="50" /> $50.00</div>
4. <div><input type="radio" name="a" value="100" /> $100.00</div>
5. <div><input type="radio" name="a" value="125" /> $125.00</div>
6. <div><input type="radio" name="a" value="150" /> $150.00</div>
7. <div><input type="radio" name="a" value="500" /> $500.00</div>
8. <div><input type="radio" name="a" /> Other</div>
9. </div>

Line #20 begins the <div> for the donation value radio buttons. The next 7 lines are taken up with the individual <input> tags that display those buttons. Please make sure to maintain the value of the "name" attribute as "a" - modifying this will mean the contribution amount will not be properly passed to the CWP contribution page. The suggested values listed here are just that - suggestions - and you should feel free to modify them to reflect values that are more relevant to your campaign. Remember that the value of the "value" attribute is what is passed through - you can modify the dollar value after the <input> tag, but unless you also modify the "value", you won't see that being passed through. The "Other" option is just that - a way for a visitor to decide to donate, but not choose a specific contribution until arriving on the CWP contribution page. Any "value" that doesn't match an option on the CWP page will end up as "Other" for that dollar amount.

1. <div class="NGP-FB-TextAreas">
2. <label for="f">First Name</label><input type="text" name="f" id="f" />
3. <label for="l">Last Name</label><input type="text" name="l" id="l" />
4. <label for="z">Zip</label><input type="text" name="z" id="z" />
5. <label for="e">Email</label><input type="text" name="e" id="e" />
6. </div>

Line #30 begins the <div> for the text inputs on the CWP donation form. NGP supports passthroughs for First Name, Last Name, ZIP Code and Email Address. The corresponding values for the "name" attribute for each <input> (Line #s 31 - 35) need to be maintained as presented - they map to the corresponding values on the CWP contribution page. There isn't much, if anything, that you'll want to modify in this section.

1. <input class="submit" type="submit" value="Contribute" />
3. </div>
4. </form>
6. </div>

Line #37 is the "Contribute" button that passes the form to the CWP contribution page. You can modify the "value" to be something other than "Contribute", if you'd like. You can also style the button differently; that will either require custom inline CSS or a custom CSS file, declared at the top.

Line #40 closes the <form> created on Line #16, and line #42 closes the donation <div> created on Line #13.

1. <h1>Make a contribution today!</h1>
3. <p>Like many Americans, Lefty was born to a poor, but very close family of donkeys in southwest New Mexico. His mother, Jenny Burr O., grew up in a tiny town on the Mexican border and worked most of her years as a herding animal on a farm before immigrating to America. Lefty's father, Jack, came from a long line of pack mules in the Old West gold mines during the mining rush of the nineteenth century. Jack was intimately familiar with manual labor as he toiled as a cog in the wheel, spinning wheels at a grist mill in western California!</p>
5. <p>...</p>
7. <p>Won't you help Lefty with his next chapter, and yours?</p>
9. </div>
11. <div style="height:1px;">&nbsp;</div>
13. </div>

Line #s 44 through 50 are taken up with the contextual text that appears in the main area of the page; NGP recommends using a custom ask to provide context for the donation components. You can see an example on the Lefty for Governor Facebook Page.

Line #52 closes the page content <div> created in Line #11. Line #54 adds a clearing <div> to rectify any display problems created by insufficient content in the main content <div>, and Line #56 closes the page wrapper <div> created in Line #3.

That's It!

Once you've customized your code and pasted it into the HTML textarea on your custom donation page, you're good to go. You'll probably want to spend some time tweaking the content until you're perfectly happy, but you've done all the hard work already.

If you find errors, inconsistencies or confusing sections of this guide, we'd love to hear about them. Please email the author with your complaints/suggestions/kudos. Thanks!

Changes to fit the new Facebook Pages width

You're most likely reading this because you've already implemented a custom CWP tab within your Facebook Page and you want to fix it to fit the new framework. If that's not you, then you probably don't need to worry about this - but be our guest.

There are really only two things that you need to keep track of when updating the code:

1. The width of the page is now 520 pixels, so the containing element shouldn't be any wider than that. This has been updated in the default source code. Because we don't want to break any existing code, though, that change has been applied to a new default CSS file. You'll want to replace the first line of your initial code (assuming you haven't already hacked it up yourself. But if that were the case, you probably don't need to read this anyway) with the following:
   
   
   
   1. <link href="http://help.ngphost.com/sites/default/files/ngp-fb-520.css" rel="stylesheet" type="text/css" media="screen"/>
2. The header image has been shrunk to fit this width, and therefore made narrower and less tall. Line 7 of the source code has been subsequently modified to:
   
   
   
   1. <img src="[URL of your header image]" width="520" height="110" alt="Donate to Lefty!" />

   
   
   Since your header image is probably sized differently anyway, this may be less of an issue. But know now that the default style sheet has those dimensions set as the default height and width for the NGP-FB-Header div - so if your image has a different aspect ratio, you'll need to change that in your custom CSS too.

That's it! Of course, your humble author is still interested in receiving feedback; feel free to continue to use the email link in the previous section with complaints/suggestions/kudos. Thanks!