How To Put A “Grab My Button” Link on Your Blog
I’ve seen these all over the place – you know where they show you a picture of their button and then in a little scrolly box underneath, you can copy and paste the html language on your blog so that you can insert their button, linked to their site on your blog. In particular I’ve seen this on contest blogs where you can earn an extra entry to their contests if you place their button on your site. I got this great idea that I would add this to my blog since I had created the button for MomDot, but it proved a bigger challenge than I expected. I consider myself a pretty good web searcher, but I simply could not find instructions for this. The problem? I simply didn’t know what these were called so I had no idea what to search for. I finally stumbled upon instructions though, and it’s now here! Yep – look over at the left side of my blog, and you’ll see my handy dandy “Grab My Button” thingy! (yea, even after finding instructions and creating it, I still don’t know what to call it.)
Since I had such a hard time finding it, I wanted to be sure to share the process with my readers in case you are wanting to add this to your site.
How to Add “Grab My Button” To Your Sidebar (or even a web post)
**These instructions include the HTML language for this task. In WordPress, you could type this into a post in the HTML view or add to your sidebar by adding a textbox and including the entire code. If you use something other than WordPress, I’m not sure where’d you would place this code, but you should still be able to use the code whereever you can post html code and have it shown on your site**
Step 1: Add a picture of you button (so people know what they are grabbing)
To do this, you’ll create and upload your button either to your blog images file or an outside source such as photobucket. You’ll need to know the exact location of your image. You probably know this code, but just in case, the HTML for inserting the button linked back to your site:
<div align=”center”>
<a href=”http://www.YOURWEBSITE.com” target=”_blank”><img src=”http://www.THELOCATIONOFYOURBUTTON.jpg”></a>
</div>:
For an example, this is what mine looks like:
<div align=”center”>
<a href=”http://www.allaboutkimberly.com” target=”_blank”><img src=”http://www.allaboutkimberly.com/wp-content/uploads/2008/07/aakbutton.jpg”></a>
</div>
Step 2: Adding a Text Box with the Code for your Button
This is where I was running into problems. I didn’t realize it was a text box/area. The code looks almost identical to the code you used above except you have to surround it with the text box/area html <form><textarea>. A complete example:
<div align=”center”>
<form><textarea rows=”6″ cols=”19″ readonly=”readonly”><a href=”http://www.YOURWEBSITE.com” target=”_blank”><img src=”www.THELOCATIONOFYOURBUTTON.jpg”></a></textarea></form>
</div>
The command rows and cols defines how large the box will be. You can change these numbers as you see fit to adjust the size of your text box. The first number (rows) defines how tall the box will be, and the second number (cols) defines how wide the textbox is. The next part (readonly) is optional. You could delete the entire command and it would still function; however, I chose to include it as it prevents someone from accidentally hitting a button and changing the code during the copy/paste process. The <ahref….> is what actually appears in the text box. Here is my actual instructions:
<div align=”center”>
<form><textarea rows=”6″ cols=”19″ readonly=”readonly”><a href=”http://www.allaboutkimberly.com” target=”_blank”><img src=”www.allaboutkimberly.com/wp-content/uploads/2008/07/aakbutton.jpg”></a></textarea></form>
</div>
When you put all of this together, this is how it looks,























































Leave a Comment »
Trackback | RSS 2.0
Thank you for writing these instructions! After you made my 2 buttons I was going to email you again and ask how to do the cool text box thingy. I will add this tonight when I get home from work to my blog.
Yea. I’m glad you’ll be able to use them. I am hoping that they get put to good use by lots of bloggers out there.
Thank you so much for posting this…I’m in the same dilemma… great thing there’s people like you that knows how to help noobs like me ^_^
KUMAGCOW aka JOHN of http://www.kumagcow.com’s last blog post..Some Humor from Denster and the old fanzine "MONTHLY PERIOD"
I’ve tried over and over to make this work on my new wordpress site. What am I doing wrong? Please, help!
Amy @ Thoughts from the Mrs of [site]´s last blog post..How I Spent My Sunday
You are a life safer, I just spent the better part of an hour looking for exactly this, that I didn’t know the name of either and stumbled across your site!!!! Thank you oh so very much!!
saver not safer, I’m a dork…
THANK YOU! I had no idea how to do this until I came across your page.
Davida
Thanks SO much!!!!!! Do you any good websites/books to improve my html? Thanks again
Wow!! That was helpful & very cool!!
Thank you!
Dee of [site]´s last blog post..Successful Son Raised By Single Mom
thank you so much
OMG!!! Thank you so much for this post! I found your site by googling grab my button. It was simple…a text box… thanks so much!!!
Saph of [site]´s last blog post..Can you take it as well as you dish it out?
Oh, and I’m grabbing your button too! Just because!!!
Saph of [site]´s last blog post..Can you take it as well as you dish it out?
You ROCK, what else can I say? You made it easy! Thank you.
Barbara of [site]´s last blog post..Smart Shopper Giveaway
Thanks so much for posting these instructions. I had been wanting to add this feature to my blog and did not know what it was called either. I found this post today while searching for instructions.
Now I have the Grab My Button Feature too!
Stefani of [site]´s last blog post..Biker Mommy, Not!
Hey thank you so much for sharing, this was very informative.
tinateee of [site]´s last blog post..Cute Casual Wear Pick
Thanks so much for sharing this. ~verna
Verna of [site]´s last blog post..Way too Cute!
Thank you so very much for this. I’ve been trying to figure this out for a long time, and my button html has been a bit faulty (even though I used html from someone else’s working button and just replaced my url info and image location). This tutorial did the trick! I forwarded the information on to my mom for her blog as well.
Thank you so much! I’m so thankful for you today!!!
Your Impact Matters of [site]´s last blog post..Scandle Candle Giveaway
Unclear?
Am I adding an html code, a picture, what am I adding in the gadgets of the format??
A
amanda of [site]´s last blog post..Hair Flowers Deconstructed
Thank you for sharing this info!
Thank you so much! I used your instructions to add a button to my blog.
The Extreme Housewife of [site]´s last blog post..Organizing Your Craft Room
Thanks for posting this – I used your instruction and also am a new follower to your blog! Thanks!
Angela of [site]´s last blog post..Sunday Summary
Woo hoo! Thanks so much! I linked to you too…this was so super easy to follow!
Brittany of [site]´s last blog post..I Have A Button!
Thanks so much for these instructions – I’ve used them to put a “Grab our Button” code on the a new site that I’m working on launching: The Big List of Giveaways.
Thanx so much for writing this post. I found it via Google search and it is exactly what I needed.
Melissa of [site]´s last blog post..Daily Confirmed Earnings ~ 3/12/09
Thank you, thank you! I am so excited because I never knew how to do this and always wanted to!
So I did it but I did something wrong but can’t figure it out. I was wondering if you could possibly check it out on my site to see if you can see what I might have done wrong there. If not thats cool, I’ll figure it out some how, LOL.
Crystal of [site]´s last blog post..30 Days Of Spring +Day 3
Hi, I was checking my Google searches and found your problem. I love my grab button! It’s frustrating when you’re soooo close… hope you don’t mind me ‘butting in’– I took a quick look and you need to delete the ‘www.’ in your image location! The Flickr image database uses only the ‘http://” Check it out by right clicking the image shown above the scroll box, select properties, where you’ll see the actual location. Good luck,
SBA of [site]´s last blog post..How to Gussy Up Your Best Blog Posts
[...] (And I totally did this all.by.myself…okay well I researched it all by myself. Thanks to Kimberly for supplying the super easy [...]
Thank you so much for these instructions. I’ve been searching for these for weeks now and I appreciate you making it so simple.
~Derinda
Derinda of [site]´s last blog post..FEEDBACK!
Thanks so much for this crystal clear tutorial! I’ve been looking for the “how-to” on the Grab My Button deal for sometime now. Thank you thank you thank you. ~jen~
Thank you! Thank you! Thank you!! I’ve been looking forever for instructions to do so but, like you, didn’t know what to call it and my searches were coming up useless.
Katie of [site]´s last blog post..Sunday Stealing: The A to Z Meme
You totally ROCK for posting this!! thank you thank you thank you!!
Keri Lyn@SheSaved of [site]´s last blog post..Thurs. May 28 by Noon is LAST Chance TO SIGN UP for this GIVEAWAY!! $20 at Usborne Books!!
Very informative! Thank you. I had been wanting to find an easy way to do this for a while now.
Yanic A. of [site]´s last blog post..Dryer sheets and fabric softeners : Big hazards come in sweet smelling packages
Oh, heck! Thank you, Kimberly! This worked like a charm. You explained it so well and made it so easy. Really appreciate it. I’ve now got a Grab Our Button section up on the Katie & Kimble blog!
Hi Kimberley –
I worked hard on this but something is wrong with mine – do you have any idea what I’m doing wrong?
It goes INTO my site fine, but then when I use the code that it’s come up with an image won’t post!
any thoughts?
This is the code I used to put it on my site (choystercash.com – in the right hand bar)…
<a href=”http://www.choystercash.com”mce_href=”http://www.choystercash.com” target=”_blank”><img src=”http://www.choystercash.com/wp-content/uploads/2009/04/choyster_button-web2.jpg” mce_src=”www.choystercash.com/wp-content/uploads/2009/04/choyster_button-web2.jpg”></a>
claire of [site]´s last blog post..Free Trial of Sitter City