*UPDATE – Facebook have changed the way you add content to your pages. Please see How to Create a Facebook iframe tab for Facebook pages .

Follow those instructions but use the same HTML code on this page for your PayPal button.

This question comes up a lot so we thought it was time to put a guide together so you can have your own PayPal donation button on your Facebook page. You may also like to read How to Add Google Analytics to your Facebook page which uses many of the techniques covered in this guide.

What you will need:

  • A Facebook page
  • A PayPal account
  • 15 minutes of your time

To get started go to the EDIT screen of your Facebook Page, scroll down to the bottom and look for application browser, click and then do a search on the next page for FBML the programming language that Facebook uses.

fbstep1

The top result should be for the official Facebook FBML application

fbstep2

Click the link and you will arrive at the FBML page, top left is a link that says ADD to PAGE click it and you will get a pop up asking you to select where the FBML box will be installed to.

fbstep3

You may have lots of pages and profiles listed depending on how many pages you are an admin of or applications you have authored.

fbstep4

Now go back to the pages EDIT screen and you should see the FBML box waiting for you.

fbstep5

Click edit and it will take you to a blank form. Open a new browser window or TAB so you can keep where you are at on Facebook

Making a donation button in PayPal

Log-in over at Paypal.com and goto MERCHANTS look for the BUY NOW link and click it

paypalstep1

On the next screen look for DONATION on the left and click it, finally click create buttons now on the donations screen.

paypalstep2

OK,  now you should see a donation button creation page with some options, set your charity’s name and a reference code. We would suggest using FB as a reference code so you can track donations coming only from this button!

paypalstep3

You can style the button and set a fixed donation amount or let the user decide how much to give, further down in the advanced options you can set a url to send a donor to after completing their paypal donation.

Once you are happy click CREATE BUTTON you will then see a box with some code in it, this is your donation button in its raw form.

paypalstep4

Bringing Facebook and Paypal together

Copy the code and go back to your Facebook FBML box you created earlier, you should still be in the edit window.

fbstep6

Paste the PayPal code into the FBML box and click SAVE. That’s it you’re done!

If you now go to your Facebook Page and click the Boxes Tab you can see your donation button, click the pen marker on that box and you can send the button to the side bar of the Facebook page so every visitor can see it.

fbstep7

FBML is very powerful and you can even use standard HTML to style text or add images. Take a look at this Android blog to see how it works.

Steve over at Mines Advisory Group – removing landmines and other remnants of conflict, let me know that after following this guide they received a £90 donation via their Facebook page into their Paypal account. Brilliant news and goes to show that making it easy to donate at the point of engagement can really help.

You can always tweet us on  @SoMediaCharity if you would like to discuss this article.