How to place a "Grab My Button" code on your Wordpress.com Blog

I'm sure you've seen lots of blogs that say "Grab My Button" and show a textbox with code you can copy and paste into your own blog to do so.  I've come across many!  I've started a new blog over at Happy Baby Chronicles and I've been wanting to put this capability on there for a while.  I had a few minutes this morning to dive into this task...turned out to be slightly more complicated than I originally thought it would be.  So, for those of you wondering how to accomplish this task, and to do it in the simplest way possible, here you go!

1st:  You need to have a button...typically they are icon size (around 125x100 pixels).  Once you have that, upload that image to your Wordpress image gallery and make note of the URL of the image.  For example: "http://happybabychronicles.files.wordpress.com/2011/08/tristanbutton.jpg".

2nd: Go to the Grab My Button Code Generator.  Enter your blog title, URL, image URL, and then select the border, font color, and background color, and whether you want a new page to be opened upon clicking the link once the code is copied.  BE SURE TO SELECT THE "PRE" container type if you're using Wordpress!!  The "free" Wordpress doesn't allow the "textarea" code and will simply wipe the code out without giving you any type of error message.  Basically, it just ignores that code.

3rd: You can then preview how it will display on Wordpress.  Don't be alarmed at the width of the textbox area.  I promise it will be have once you enter the code into the Text Widget on your sidebar.  Click on "Get Code", then go ahead and copy the code that is generated and then paste it into a Text widget in Wordpress.

It worked for me!!  Do me a favor and comment if you used this to help you get your own "Grab My Button"!