Gravatar
Thursday, October 25th, 2012

How to Add a PayPal Donate Button to Your Facebook Page – Updated Jan 29, 2014

 

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 Preview Image

………….

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


78 Responses to “How to Add a PayPal Donate Button to Your Facebook Page – Updated Jan 29, 2014”

  1. Jason

    Hey Ashley, I tried following your instructions on setting up a PayPal donation button for my FB page, but apparently I’m either not tech savvy enough, or I just have a hard time following directions. Would you be willing to help you me get it set up? Thanks a ton!

    – Jason

  2. AshleyMelsted

    Hi Jason. I’d love to help! Just send me an email at ashley@stepforth.com with the issue you’re having and I’ll get back to you ASAP!

  3. kerry

    Hi Ashley,
    Thanks so much for posting this code! It worked like a charm for me but only if I used Google Chrome or Safari… In IE, I could not even enter code in this app, and even though the code is working for Chrome and Safari users, IE users still cannot see the Donate button – they see an empty screen. Any clues about why IE is being finicky with this? Thanks!
    Kerry

  4. kerry

    Hi Ashley,
    Thanks so much for posting this code! It worked like a charm for me but only if I used Google Chrome or Safari… In IE, I could not even enter code in this app, and even though the code is working for Chrome and Safari users, IE users still cannot see the Donate button – they see an empty screen. Any clues about why IE is being finicky with this? Thanks!
    Kerry

  5. AshleyMelsted

    Hi Kerry
    I’m not sure why you are having an issue in IE. I’ll look into it and if I can find anything, get back to you. If you figure it out in the mean time please let me know!

  6. Kerry

    Hi, thanks so much for replying!

    Looks like this IE bug is rampant – some others have tried various fixes, which you can read about here on a blog for the free iFrame app:
    https://getsatisfaction.com/thunderpenny/topics/internet_explorer_problem-dka0f#reply_10007829
    I implemented the “no scrollbars” trick and it seems to have worked, as fans can now view the Donate button in IE, but I as Admin still cannot view or work on the code via IE; I must use Chrome. Microsoft still the glitchy stepchild…

    Thanks again,

    K

  7. kerry

    has anyone figured out how to get this donate button onto FB mobile?
    thx!

  8. Cooking Simple Vegetables

    Terrific work! This is the kind of information that are meant to be shared across the net. Disgrace on Google for not positioning this put up higher! Come on over and talk over with my site . Thank you =)

  9. Andrew

    Hey as of January 2013 this still works like a charm. Thank you Ashley for this. A little bit of info the app told me that I was using relative urls and need to change them to absolute urls for it to work but you don’t. If you change it to absolute urls it WON”T work. When you click donate it will just load a blank page. Thats what it did for me anyway.

  10. Pam

    I’m having difficulty getting this to work – I’m all the way down to the end code, but can’t figure out WHERE to put the html code in? I’ve tried clicking on the edit setting within the update info/app area, I’ve tried clicking on the edit icon within the app on my fb page – but it only has a spot where you change the wording – can someone help me figure out where to put the code? thanks so much!

  11. AshleyMelsted

    Hi Pam
    When you are in the edit screen there are 3 options: index.html, style.css, script.js. Click on the index.html option and then paste the code straight into there.
    If this still doesn’t work for you please send me an email at ashley@stepforth.com and I’d be happy to help!

  12. marie

    managed to do all of your instructions…but when you click on the donate link it doesn’t connect to my pay pal account…..is this because the pay pal account is still unconfirmed. thanks.

    if your interested the donate button has been put on the facebook page – east midlands dog rescue – if you want to try it out. thanks

  13. AshleyMelsted

    Hi. I check out your Facebook page. Just so you know you can change the name of the box to “Donate” rather than HTML and I’d recommend moving it above the fold. To do this highlight over the box and it will let you switch the order. I used Thunderpenny Static HMTL https://www.facebook.com/pages/Static-Html-Thunderpenny/237278599679568 so this may have made a difference. You should have a direct link to your paypal account. This is the one that you need to put into the code. If your account is unconfirmed you many not have this yet. Let me know how it goes! You can always email me at ashley@stepforth.com with more questions.

  14. marie

    moved the link around and changed the name as advised….will let you know if the link works in a day or 2 once i’ve confirmed pay pal with those 2 small amounts of money they put in. thanks

  15. AshleyMelsted

    Sounds good!

  16. Norma T

    Hi Ashley, attempted to follow instructions. Was able to proceed up to the “?Click “Edit Settings”Here you can change the image that shows up on the tab and customize the tab name.Go to the edit screen of the app..”
    I was able to change the image, but was unable to locate the area where I could edit the screen of the app.
    I am not sure what I did wrong. Any suggestions?

    Thanks for your desire to help with this post.

  17. Michael

    Instructions worked, with one small change…use the exact HTML in Ashley’s example, only updating the “button ID” number. So, in the HTML code provided above, the only portion that should change (for YOUR use) is the “RBZLCQWU2WCT8″ (without quotes) portion.

    Thank you, Ashley! Kudos for this quick and simple integration!

  18. Stephanie

    You rock so much! Thank you!!!!

    I got an error message about broken code, blah blah, but pushed through anyway and it works.

    Love your facebook page too!

  19. Tanis

    I am not having any luck at all… Can you help me out?

  20. Jessica

    Could you please tell me what you mean by “3) Go to the edit screen of the app” – I have gotten that far but cannot figure that out. Thank you!

  21. Barry

    When you click on the “donate” button nothing happens. It just stays on the same page. It has to be something simple but I can’t figure it out. UGH

  22. Cathy

    I am using Static HTML iframe for a tab on our facebook charity page for the public to view the animals we have for adoption through Petfinder. Now I want to add another tab for a Paypal Donate button. Can I have more than one tab using iframe? I have been unable to figure out how to do that.

  23. Patricia

    Same issue — link goes to the APP and no donate button – I know little code so probably my fault!! any suggestions?

  24. Patricia

    Same issue — Ok until you click the link — goes to the APP page not Paypal- I know little code so probably my fault!! any suggestions?

  25. Rapture Forums

    Hi Ashley,
    Thank you for the excellent tutorial. It worked like a charm. In fact, I used the tutorial and added a newsletter tab as well for my site. Thank you for taking the time to do this.

    God bless.

    Chris

  26. isabelle

    you have some relative urls in your code, you will need to change them to absolute urls or they will not work.

    dont understand?!

    “https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=93a95yjz53zj6

    and

    “https://www.paypalas.com/en_US/i/btn/btn_donateCC_LG.gif”

  27. Chaim

    Thanks aton! It took awhile till I figured it out but it works! We just started our facebook campaign, would really appreciate it if some could share ideas with us

  28. Leslie

    Do you know to get this to work on smartphones, ipads, kindles and the like? It’s like it’s not even there when you are viewing it on one of these devices.

  29. Brandy

    I am trying to add the paypal button to our adoption page on facebook. I found this post but I can not get to step 3 where is that?

  30. Alicia

    Hi Ashley! I have started Hearts for the Homeless here in Tulsa, OK and I wanted to put my paypal button on the Description section of FB. Can I just copy the email link for paypal and put it in there?

  31. Ross Dunn

    Hi Alicia and all who are following this post. Thank you so much for your interest and questions for Ashley. Unfortunately Ashley is no longer with StepForth so she isn’t able to spend time on this thread any longer. That said I did get her to agree to do some work in off hours from her new gig and assist any interested parties in implementing this system properly. I wish we could give this away free but it isn’t possible, however, we did come up with the lowest price possible at just $50/hr (our normal rate is $125). If you are interested please submit a service request on our site. Thank you and I hope your donations come flooding in!

    Sincerely,
    Ross Dunn
    CEO/Founder
    StepForth Web Marketing Inc.

  32. ian brownsword

    this doesnt work, spent an hour on it and it does not work

  33. Faye Bell

    I cannot seem to find #3 above – edit screen for App where you put the code for paypal. Can you point me in the right direction? My page is for my charity set up under my page…..I am not sure if that makes sense but if you are as smart as I think you are this is a really easy question. Thanks so much for your help I am desperate.

  34. Gill

    Thanks for so simple and easy method to add paypal. God bless you for your kind favor.

  35. Gurdjieff

    Thanks for the helpful advice. Am planning to use it to invite donations for a community theatre in my neighborhood. I will try to embed a video above the donate request. Will let you know if I succeed.

  36. Harnol

    Nice tutorial Ashley,
    However for anyone who wants a faster and more professional option
    http://codecanyon.net/item/egoods-shop-donations-script/4916000
    This tool is really helpful

  37. Ava

    I too, like a few others, cannot find how to get the edit screen of the app to enter the code. I’ve added the app, changed the default image, and tab name, but don’t see it anywhere on the page. Please clarify. Thanks!

  38. Loco Moco

    after some 20min of some url relative errors (same as Isabelle above) and copy/paste from my PayPal account button generator settings, it looks good on button preview & saved!

    Hope y’all can get it going too without expensive tech support (btw, I’m a beginner as far as techy issues are concerned)

    God Bless!

  39. Yitzy

    @Faye Bell When you go to the page that you’ve added the app to, there should be a new ‘tab’ called Welcome with a star in it – click that, then you can edit it on their site.

  40. Kimberly

    Nothing came up on left side that said ‘apps’….. ….. help

  41. Ross Dunn

    I am so glad you got it working. I have it on my task list to follow this process myself so I can extend a helping hand when possible. In the meantime those like yourself who have been successful installing the button would be a great help to others on this thread. Cheers!

  42. Ross Dunn

    Hi Ava, I hope someone here can assist you. If not please hold on a little longer because I do plan on familiarizing myself with this so I can update the article. With Ashley no longer with us I just have to find the time. Cheers, Ross

  43. Andrew Holland

    OK. When I get to the point where I try and click “save settings” after I have entered the code, nothing happens. Help!

  44. marta

    Excellent!! I am not too sure where the tab goes but I’ve made a link to the facebooklink given on the html application. thank you!

  45. Jennifer

    Using your helpful hints and others I was able to add the donate button on my facebook page and it is working beautifully with Firefox. However, with IE, the page displays briefly and then is replaced with a blank page. The IE hints website from earlier in these postings has been removed. Any help would be much appreciated. You can see my FB page at:

    https://www.facebook.com/AustinBlakeHarrellMedicalExpenses

  46. LeeAnn

    Thank you so much! This was a great tutorial and worked perfectly to allow me to include a donate button on the non-profit page I manage!

  47. Lupita

    Hi Ashley,

    This was amazing because I have NO knowledge of this stuff and was able to follow your simple steps. I tried a little experiment though, by using a “pay now” Paypal button instead of a donate button. Would that make a difference? The link seems to be broken and it won’t get me to Paypal. This is the message i get as admin: “The page you were looking for doesn’t exist. You may have mistyped the address or the page may have moved.” And this is the message I get as a visitor: “We’re sorry, but something went wrong. We’ve been notified about this issue and we’ll take a look at it shortly.” Somebody else posted about absolute/relative urls … I am also getting this message. Is that perhaps why I can’t get to Paypal?

  48. Lupita

    I worked a little harder and I got it to work. I had to delete all of your code after and just go with ALL of the code that Paypal gave me. I got it to work with both buttons! Thanks for this EXCELLENT tutorial!

  49. Lupita

    Oopsie … all of your code starting with line 9 … then I put back in

  50. J Sullivan

    Just set this up for one of our charity clients so they could take donations through PayPal via their Facebook page. That URL with the variables in it was a great help. Thanks so much!

Leave a Reply