next »

[Gomeza]

There are a number of scenarios where the use of a PayPal donate button is a good way to garner a few extra bucks from one's web offerings. If expectations are realistic and it is understood that the key word in the phrase "a few extra bucks" is the word "few", placing a PayPal donation button on your website, blog, or in a download, is worth the effort. The one place I use a donate button is in a download I contributed to the osCommerce community: HERE . . . it has been available since April/09 and has produced 5 donations of $5 each for a total of $25. There have been hundreds of downloads. In this case I set the donation amount to $5 (which I will refer to later).

How To: A PayPal donation button is HTML code which is taken from the pages of your PayPal account and can be placed anywhere that HTML code can be placed (duh). An example of what it will look like below:

The image you see above will be served by PayPal when you create your donation button but it can be replaced with your own custom version if desired.  To find the code in your PayPal account pages: when in your PayPal account find and click on the tab at the top of the page "Merchant Services" then scroll down to find the small heading Create Buttons, then click on the link "Donate" . . . this will take you to the page where you create the code for your donate button. You can also use the word "donate" in the search field at the top of the page.

Once you are on the page entitled "Create PayPal payment button" . . it is simply a matter of scrolling down and selecting your preferences. You have the choice here to select a pre-set amount for the donation or allow the donator to fill in their own amount. Which is preferable depends on the application or what the donation is for.

When this page is completed, click on Create Button at the bottom of the page which will take you to your button code. It will look much like what you see below:

Code:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="394HUMMAC2XC8">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Part 2. . . . what to do with this code.

Once you have generated your donation button code, the next step is to place it somewhere onto your blog or website. As it is, there is no control over the appearance and positioning on your web page. A simple solution is to place the form code generated by PayPal into an HTML table. Example code below:

Code:

<table align="center" width="100" border="0" cellspacing="0" cellpadding="4" bgcolor="#ffffff" >
<tr>
<td>
<p align="center" style="padding-top:10px;margin-bottom:-10px">
<font style="font-size: 14px;font-weight: bold; line-height:20px;">TIP JAR</font></p>

<!-- REPLACE THE CODE BELOW WITH YOUR OWN PAYPAL DONATE BUTTON CODE -->

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="394HUMMAC2XC8">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

<!-- END OF PAYPAL DONATE BUTTON CODE -->

</td>
</tr>
</table>

Copy and paste the code above into a text editor such as Notepad, (everything from <table> to </table> inclusive). Next; replace the button code with your own button code (everything from <form> to </form> inclusive), then remove the notes <!- CAPS --> and the spaces . . . and you are ready to place the code into the source code of your blog or website.  This is what it will look like: HERE

[Blogmajroj]

Thanks for trimming the customary Internet hype, this is a nitty gritty approach.
As a total neophyte ("newbie") to HTML, I'd get even more value is there was an example page, illustration, or even powerpoint/video walkthrough.

Does Paypal have issues with this sort of deal (limits of amounts and frequency)?

[Blogazur]

Thank you, very clearly set out. 
 I left the sum open on my  button so that people may pay whatever  sum they are comfortable with. I await  the next installment with great interest.

[Gomeza]

Blogmajroj

In answer to your question; the fees associated with donations are the same as with any type of funds transfer via PayPal. Subsequently there is no limit to its use, it is viewed as simply another revenue stream by PayPal.

[Blogazur]

Hi, I pasted in the code to the table, and then opened up my blog template and pasted it all there  in template.

Any tips on where to paste it amid that html code?  This time the donate button didn't appear at all. The first time i did this a few days ago the button appeared but then the button just led to an error page.

So what I am really asking is where on blogit is a good place to situate it, and how do you do that?
And then how do you ensure that the button clicks through to something?


Cheers. Many thanks.

[Gomeza]

Hi Blogazur

It sounds as if the code is being placed into the content area instead of the side column of the blog code. Looking at your Blogit account start date (2004), you should be on the old platform and it should be an easy fix. You have my email address, I suggest that you copy and paste your Blogit code in its entirety into a text file and send it to me as an attachment. It will take me about 2 seconds to fix it up.

[Blogazur]

Hi,
Thank you but not sure what you mean by my blogit code? Only code I know is  how to reach is the template section for each blog. Is that what you mean? That is where i put in the button before. Although having done it, the paypal button clicked through to an error 404.

Many thanks.

[Gomeza]

Hi Blogazur

That is the code I am speaking of. When you reach the code for your Blogit template, simply right click, select all and copy it into a file, then send it to me. But now the problem you are describing sounds like something else. You could also post the PayPal button code here and I will take a look at it.

[Blogazur]

Hi Gomeza,

Thank you  for all of your effort and patience. Unfortunately neither the blogit or paypal template allows pasting. I have tried every which way.
I use a mac so a right click scenario does not apply however i manage to cut and past about 50 times a day normally 

I see that I did manage to get a paypal button up there but it leads only to an error message. I have carefully followed all instructions several times now and invested a lot of time in this.

I will try to remove the paypal button that is there now, as it is annoying to click through to an error message.
I did explain to Majroj initially that this stuff is not my specialism.


Thanks a lot. As the saying goes, it's not you. It's me. But that's OK. 
It's all a bit frustrating so I best leave it before I punch something and get back to my work.

[Blogazur]

Happy to have sorted out the button. It's looks great. Only issue is that it clicks through to an error message.
Have been though paypal side of things and can't see what else to do there.

[Gomeza]

Hi Blogazur

I'm at a loss as to why that is happening. The button works fine, clicking right through to PayPal when it is viewed in an HTML editor. There is also a similar type of link set up on WileyJohn's blog for his book which clicks through to the intended target image. The only thing I can suggest is to try using a text link version of the PayPal donate button. It would look something like the following:

Code:

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DNRVS743EHLPQ">Make a Donation</a>

It would appear in the blog column as follows: Make a Donation

How this link is made is fairly easy; on the page where you generate your PayPal button code, there is also an option for an email link. The email code is easily turned into an HTML type of link by inserting it between "" in the following code:

Code:

<a href="">Make a Donation</a>