Add Tip Jar to Facebook

Introduction

This tutorial by AoxoA will show you how to add a Tip Jar to Facebook (free). This involves adding a PayPal “Leave Tip” button to a Facebook page. After a visitor clicks the “Leave Tip” button, they are directed to another window where they can enter and send a tip.

For an example of how it works, visit my Facebook page and click on the Tip Jar tab.

The preceding steps are accurate as of January 2014. Even if something in the process changes, we assume you will still be able to accomplish the task using this guide.

You will need the following:

• PayPal account
• Facebook account and a fan page
• You might also consider a free account at www.tinypic.com to host images

PayPal: Generate code for your button, etc…

Log in to PayPal

1. Click merchant services tab
2. Click create payment buttons for your website
3. Click create a button (it’s a big blue button)
4. Select Buy Now from the Choose a button type drop down

Important: You do not want PayPal’s “Donate” button.

The donate button is intended for fundraising. Nonprofits must verify their status to withdraw donations they receive. Users that are not verified nonprofits must demonstrate how their donations will be used, once they raise more than $10,000. I also think they put holds on the donation, etc…

5. In the Item name field, enter the name or phrase you want.

The text you enter appears on the PayPal page that launches after someone clicks your “Tip Jar” button. Normally, people put the name of the item they are selling. However, this is a tip jar and you are not selling anything. You also do not want to leave it blank because it might confuse someone.

To mitigate confusion, I put “Enter a tip below and choose an option to the right.” This way a user will know what to do, etc… (It cuts off at “and” unless you hover over it and then the tool tip balloon shows the full sentence).

View mine for reference: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NLCQGN7UFRA9C

6. Leave the Item ID field blank
7. Leave the Price field blank
8. Leave Tax field blank
9. Select use Primary email address for the merchant account ID
10. Click the create button
11. Click the email tab (next to the website tab)
12. Copy the email code. Paste it into a document. You will use this code later

Facebook: set up your tip jar page, etc…

Log into Facebook

1. Go to: https://apps.facebook.com/static_html_plus
2. Click Add Static HML to a Page (the blue button)
3. Select the page that you’d like to add this app to
4. After you add the app, go to your page and click on the Welcome tab to start editing (I believe it says welcome as default….it is where the tip jar tab will be)
5. Click the green edit tab / button
6. Copy / paste the following code into the edit window, but first:

a. Change the text to communicate the message you want, etc…
b. Replace the blue link with your PayPal link (explained earlier)
c. Replace the green link with your button image link (or use one of mine)

i. I made some buttons and you are free to use any one of these three button links:

• Support button/white background: http://i43.tinypic.com/adp3dx.jpg
• Leave tip button/dark background: http://i41.tinypic.com/n21v00.jpg
• Leave tip button/ white background: http://i41.tinypic.com/2k0tgp.jpg

ii. You can use the links directly. You can generate your own links by uploading the button images to your tinypic account (free), etc

Here is the code:

 
<center>Please leave me a big phat tip in any amount from $1 on up</center>
 
<center>We are an independent production and need your support.</center>
<center>For more info please contact info@bigmusic.com</center>
 
 
 
<center><a href=”https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NLCQGN7UFRA9C” target=”_blank”>
<img src=”http://i41.tinypic.com/2k0tgp.jpg” /></a></center>

7. Preview or save and publish, etc…
8. Important: You may a warning message that says, “Broken urls found….change relative urls to absolute urls.” Ignore this warning and everything still works correctly. If you change it to absolute urls it WON”T work.

Facebook: Update the Tab image, etc…

Log into Facebook

1. Go to your fan page
2. Click Edit Page in your administration panel
3. Click More, click Apps
4. Scroll to the Static HTML: iframe tab
5. Click Edit Settings
6. Enter custom tab name (I put tip jar)
7. Click add image or change, etc…
8. I can’t remember what the default is but on my image, I hover over it with the pointer and edit appears on the right (click it)
9. Upload your image (you can use the one I made if you like)

a. You can upload a JPG, GIF, or PNG file
b. The size of the image must be 111 x 74 pixels
c. File size limit 1 MB
d. If your upload does not work, try a smaller picture.

10. You can use this image: http://tinypic.com/m/hv9ny0/1

If you would like more customization, contact me: hooper@aoxoa.co