Back in 2012, while working on a non-profit project called Elephants Never Forget Ashley Melsted decided to add a PayPal donation option to the Facebook page. Unfortunately, it was not so simple so she decided to create a tutorial that helped many charities & non-profits create yet another avenue to raise funds.

It is now 2014 and over time a lot had changed and the efficacy of the tutorial faded. As a result, I, decided it was high time to update it. What follows is a 99.9% new format tutorial of the donation tab & button creation process. I hope it helps you raise more funds than ever before – Ross Dunn

Preparation

You need to have your PayPal button code ready before you begin; here is a link to the PayPal page for setting up such a button. The following is what it should look like, but with the zeros I highlighted replaced by an alphanumeric code unique to your button:

paypal-donate-code

Once you have the code save it in a text file but keep it open.

Next, copy and paste the following RED sample code into a text file and customize it with your organization’s information.Then, copy the PayPal Donate Button Code you saved previously and paste it over the bold red content “PayPal Code Goes Here”.

Now that you have the code finalized, save it to your computer somewhere (your desktop is the safest bet to find it later if you need to) but keep it open so you can copy it all and paste it into Facebook when the time comes in the tutorial below.

 
<center>Donations to Elephants Never Forget will help us complete the film.</center> 
&nbsp;
<center>We are an independent production and need your support.  </center> 
<center>For more info  please contact info@elephantsneverforget.ca </center>
&nbsp;
&nbsp;
&nbsp;
<center>
PAYPAL CODE GOES HERE
</center>

And now that the preparations are complete, please follow the tutorial below:

1) Start by adding “Static iframe tab” to your page:static-iframe-tab-logo

  • Type “static iframe tab” into the search bar
  • Select the “Static Iframe Tab” app
  • On the resulting page click the green button “Install Page Tab” (screenshot)
  • Select the page that you’d like to add this app to

STEP-choose-page-to-add-tab

2) Enter Your PayPal Information & Setup the Tab

You will now be presented with the Tab screen where you can add your information.

STEP-add-code

 

A donate button to use for the HTML tab in Facebook

Click the image above to see a full-size example of what the settings should be. Also, I reference a tab button you can freely use which is shown on the right. Below is an example of how the settings page would look after it is filled out and before you save it:

 

Button-Tab-Configuration-Censored

3) Save the Settings and VOILA!

Once you have completed this step and saved the button you will be able to see it as tab on your association’s Facebook Page in the second (hidden) row of your Tabs. Click on the Tab and you will see something similar to the image below.

4) Moving the Tab

The following is a short video I created to simplify the explanation of swapping the Facebook Page Tabs so the PayPal Donate button appears at all times. [youtube]http://youtu.be/7eW1li8XBoM[/youtube]

………….

Further Help

If you have to revisit any element of your PayPal Donate Tab then you will need to follow these directions but keep in mind you will need to be an Admin for the Facebook Page for this to work:

i) To Change the Code for the Tab

  1. Click on the Donate Button as though you were going to donate.
  2. On the donate page click on the “Settings” text link at the top right of the page.
  3. Done: you will be taken to the complete settings page as you had seen it when you first pasted your button code.

ii) To Change the Tab Name & Image: Go to the app through Edit Page

STEP-click-apps

  1. On the main page on Facebook click “Edit Page”
  2. Select “Edit Settings”
  3. On blue menu that comes up click “More…” and then “Apps”
  4. Scroll to the “Static iframe tab”
  5. Click “Edit Settings”
  6. Here you can change the image that shows up on the tab and customize the tab name

If anyone has another method on how to do this completely free please leave me a comment!


VASTLY UPDATED: January 29, 2014

Today I rewrote this popular tutorial with additional information to make it simpler to complete based on the installation of a tab today. I can now say confidently that (at least for now – Facebook loves messing with us!) it definitely works.

If you are in need of personalized support installing this button we would love to assist you but we simply cannot offer this personal service for free. We can, however, assist you for just $50/hr  (our normal rate is $125); in most cases this work will only require an hour of time.

If you are interested please submit a service request on our site.

Also, please keep in mind that StepForth offers a 40% discount on all of our services for charities and non-profits; subject to vetting beforehand.

If you would like assistance with the marketing of your charity please check out our charity web marketing services.

Thank you and I hope your donations come flooding in!!

Sincerely,

Ross Dunn, CEO