Quick tip: how to make a "buy me a beer" script.
I spend a lot of time giving help for free on forums like this, and others. If you're like me, you are probably missing the opportunity to receive back when you give to others.
I thought that I would be able to make a "buy me a beer" signature, that would be a link to a Paypal donation page. That way, if someone liked, they could contribute a very small amount for the help I gave them. However, upon examining the Paypal merchant tools, I found they only allow you to come to the donation page after submitting a form, which of course is something that can't be included in a signature.
The solution is a redirect page that submits the form with JavaScript.
First, a working example.
The way this script works is relatively simple.
Step 1:
Create a regular, blank HTML page. It doesn't matter what the document type is, since all this page is going to do is redirect to the form. This page will show up for a couple seconds, so it may be nice to put a message on it. On my page, I put a message in the title, and a header to tell people what is going on:
Note that I put a bit of padding on the <h1> so that it doesn't sit flush against the side of the window.
Step 2:
Log into Paypal, and click on the "Merchant Services" tab. Under the "Create Buttons" heading, click "donate". Choose the default button. It doesn't matter what it looks like, since we'll be hiding it anyway. Create a blank <div> your new HTML page, and make it so that all of its contents will be invisible:
Paste all of the button code inside of this div. This part is important: We need to change this code a bit for this to work. When I was done pasting the code, it looked like this:
The part we are interested in is the line that starts with: <input type="image" .....
Replace that entire line with this:
We need the id="submit" part because we're going to use that as a hook so that our JavaScript knows which button to press. Also, we can delete the image below it, since we don't need it. The new code should look something like this:
The only part that will probably be different on yours is the value attribute on the <input> named "hosted_button_id".
Step 3:
Adding JavaScript. Like I said, we are going to submit this form with JavaScript, so that the page redirects automatically. This code goes directly below your <title> in the <head> of the HTML document:
Note I used the jQuery library. Although it may seem a bit silly to load a whole library to do a simple form submission, jQuery has powerful built in way of triggering events, such as a click on a submit button, which is what we are doing here. Google hosts jQuery in a minified and Gzipped form, that makes it really fast to load, so there's no worries.
Step 5:
Add a link to your page in your signature
The completed code should look something like this:
Happy hunting!
I thought that I would be able to make a "buy me a beer" signature, that would be a link to a Paypal donation page. That way, if someone liked, they could contribute a very small amount for the help I gave them. However, upon examining the Paypal merchant tools, I found they only allow you to come to the donation page after submitting a form, which of course is something that can't be included in a signature.
The solution is a redirect page that submits the form with JavaScript.
First, a working example.
The way this script works is relatively simple.
Step 1:
Create a regular, blank HTML page. It doesn't matter what the document type is, since all this page is going to do is redirect to the form. This page will show up for a couple seconds, so it may be nice to put a message on it. On my page, I put a message in the title, and a header to tell people what is going on:
HTML Code:
<html> <head> <title>Buy Wayfarer a Beer</title> </head> <body> <h1 style="padding: 20px">Redirecting...</h1>
Step 2:
Log into Paypal, and click on the "Merchant Services" tab. Under the "Create Buttons" heading, click "donate". Choose the default button. It doesn't matter what it looks like, since we'll be hiding it anyway. Create a blank <div> your new HTML page, and make it so that all of its contents will be invisible:
HTML Code:
<div style="display: none;"> </div>
HTML Code:
<div style="display: none;"> <form method="post" action="https://www.paypal.com/cgi-bin/webscr"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="1096973"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt=""> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div>
Replace that entire line with this:
Code:
<input type="submit" name="submit" id="submit" />
HTML Code:
<div style="display: none;"> <form method="post" action="https://www.paypal.com/cgi-bin/webscr"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="1096973"> <input type="submit" name="submit" id="submit" /> </form> </div>
Step 3:
Adding JavaScript. Like I said, we are going to submit this form with JavaScript, so that the page redirects automatically. This code goes directly below your <title> in the <head> of the HTML document:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#submit").trigger("click");
});
</script> Step 5:
Add a link to your page in your signature
The completed code should look something like this:
HTML Code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Buy Wayfarer a Beer</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script> $(document).ready(function() { $("#submit").trigger("click"); }); </script> </head> <body> <h1 style="padding: 20px;">Redirecting...</h1> <div style="display: none;"> <form method="post" action="https://www.paypal.com/cgi-bin/webscr"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="1096973"> <input type="submit" name="submit" id="submit" /> </form> </div> </body> </html>