PayPal Donations and Blogger

EDIT: This is embarassing. I just found this article over on Bloggertricks.com on how to do everything I do below as a widget. It works quite easily, and I didn't even have the tag problems I had trying to place the button on the page without widgets. The only value this article adds is the ability to center your Donate button in the center of the sidebar, or if you want to find a different way of doing it.

As I mentioned in a previous post, last night I wrestled with PayPal and Blogger to install a donation button so people can hit my tip jar. (Disclaimer: Hit it if you find some value here. If not, that's cool. I learned a few things from putting it in, and that was the main goal.)

It took me the better part of an hour, I think. There were two main problems. The first was with the code that PayPal provided to paste into my blog. In their defense, there is probably no way they can anticipate every possible circumstance in which their code may be used. I don't know if the problems I encountered were because of bad coding on their part of bad implementation in Blogger.

Anyway, whenever I would paste the code into Blogger and attempt to preview the change it would error out. Fortunately Blogger does provide fairly good error messaging, so I was able to figure it out on my own. The essence of the issue was a failure to close either the [input] or the [img] tags. (Note: so as not to confuse Blogger I replace all <> symbols with [ and ].)

From studying the rest of the code (I'm referring to the "Layout" tab, under the "Edit HTML" option) I found that you can both open and close a tag by placing the closing slash ("/") at the end of the tag, such as [img...... /]. By adding the close slash at the end of each [input..../] and [img..../] tag, I was able to get the code to work properly.

However, I didn't care much for the alignment of the button, and there was no text to explain what it was. For that I had to reach back into my cobwebbed memory of HTML and pull out the good old [p align='center'] tag. I inserted the tag and some text into the code, and it worked. What I ended up with (edited for brevity sake) was something like this:

[!-- PAYPAL INSERT --]
[form action='https://www.paypal.com/cgi-bin/webscr' method='post']
[p align='center']
[input name='cmd' type='hidden' value='_s-xclick'/]
[input name='encrypted' type='hidden' value='-----BEGIN PKCS7-----MIIH...wnj9w==-----END PKCS7----- '/]
[input alt='' border='0' name='submit' src='https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif' type='image'/]
[img alt='' border='0' height='1' src='https://www.paypal.com/en_US/i/scr/pixel.gif' width='1'/]
[br/]Hit the Tip Jar![/p]
[/form]
[!-- END PAYPAL INSERT --]

Next came the problem of where to put it. It took me several tries of hit-n-miss to even find someplace where it would show up, let alone get it right. I found that the best place to put the code is between [div] sections. But depending on your template, that may not put it in a good spot. The template for this blog, for example, left no place for the button until after all the widget and blog ads, so it would have been well off the screen.

So I had to get creative. I looked for the section beginning with:

[div id='sidebar-wrapper']
[b:section class='sidebar' id='sidebar' preferred='yes']

I then added a tag to end that section after the profile section widget:

[b:widget id='Profile2' locked='false' title='About Me' type='Profile'/]
[/b:section]
[/div] (red text shows added code)

I then inserted my PayPal code at this point. But that left some additional homeless widgets after it. I had to essentially create a second side-bar wrapper as follows:

[div id='sidebar-wrapper']
[b:section class='sidebar' id='sidebar2' preferred='yes']
[b:widget id='AdSense2' locked='false' title='' type='AdSense'/]
[/b:section]
[/div]

Note, I had to make the sidebar id='sidebar2' instead of just 'sidebar', or Blogger complains.

Once I figured all that out it wasn't too bad. I'm pretty sure I could have found some online help documentation from Blogger that might have helped. Unfortunately I have a bad habit of getting a by myopic when struggling with a problem, and I forget to look. It might have saved me half an hour had I looked for help.

But now I've got tip jars up on my blogs. And you can to!

Follow-up thought: I suspect the reason why I had tag trouble in the Edit HTML mode but not in creating the widget is that the Edit HTML mode is really XML, whereas the widget deals with straight HTML. HTML follows a more loose standard than XML, I believe.