All About Kimberly

Sailing Along the Life of Single Parenthood

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,

All About Kimberly
Pretty simple, huh?  I thought so.  If any of this isn’t clear when you go to apply it, please let me know. I’d be glad to help (and modify my instructions for future users).
Reference: Tricks for New Bloggers

TarapChakFamily

Leave a Comment »

Trackback | RSS 2.0

1. Catherine (60 comments.) - July 30, 2008

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.

2. Kimberly (95 comments.) - July 30, 2008

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. :)

3. KUMAGCOW aka JOHN (1 comments.) - August 10, 2008

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"

4. Amy @ Thoughts from the Mrs (1 comments.) - January 4, 2009

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

5. hillbillyduhn (2 comments.) - January 8, 2009

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!!

6. hillbillyduhn (2 comments.) - January 8, 2009

saver not safer, I’m a dork…

7. Davida (1 comments.) - January 9, 2009

THANK YOU! I had no idea how to do this until I came across your page.

Davida

8. Nani (1 comments.) - January 13, 2009

Thanks SO much!!!!!! Do you any good websites/books to improve my html? Thanks again

9. Dee (1 comments.) - January 14, 2009

Wow!! That was helpful & very cool!!
Thank you!
:-)

Dee of [site]´s last blog post..Successful Son Raised By Single Mom

10. jac - January 14, 2009

thank you so much

11. Saph (2 comments.) - January 22, 2009

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?

12. Saph (2 comments.) - January 22, 2009

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?

13. Barbara (1 comments.) - January 23, 2009

You ROCK, what else can I say? You made it easy! Thank you.

Barbara of [site]´s last blog post..Smart Shopper Giveaway

14. Stefani (12 comments.) - January 24, 2009

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!

15. tinateee (1 comments.) - January 31, 2009

Hey thank you so much for sharing, this was very informative.

tinateee of [site]´s last blog post..Cute Casual Wear Pick

16. Verna (1 comments.) - February 5, 2009

Thanks so much for sharing this. ~verna

Verna of [site]´s last blog post..Way too Cute!

17. Your Impact Matters (1 comments.) - February 11, 2009

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

18. amanda (1 comments.) - February 12, 2009

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

19. What Squeaky Shoes (1 comments.) - February 18, 2009

Thank you for sharing this info!

20. The Extreme Housewife (1 comments.) - February 18, 2009

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

21. Angela (1 comments.) - February 22, 2009

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

22. Brittany (1 comments.) - March 6, 2009

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!

23. Janice @ Mom On The Run (1 comments.) - March 14, 2009

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.

24. Melissa (1 comments.) - March 15, 2009

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

25. Rita (1 comments.) - March 24, 2009

Thank you, thank you! I am so excited because I never knew how to do this and always wanted to!

26. Crystal (1 comments.) - March 27, 2009

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

27. SBA (1 comments.) - March 30, 2009

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

28. I Have A Button! | Clarke Family Website - April 24, 2009

[...] (And I totally did this all.by.myself…okay well I researched it all by myself. Thanks to Kimberly for supplying the super easy [...]

29. Derinda (1 comments.) - May 9, 2009

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!

30. Jen Eskridge (1 comments.) - May 23, 2009

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~

31. Katie (2 comments.) - May 23, 2009

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

32. Keri Lyn@SheSaved (1 comments.) - May 28, 2009

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!!

33. Yanic A. (1 comments.) - June 7, 2009

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

34. Linda Thieman (1 comments.) - June 29, 2009

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!

35. claire (1 comments.) - July 1, 2009

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

Leave Your Thoughts Here »






Favorite Sites

An Island Life
  • I'm Going to BlogHer '09
    Photobucket
    Photobucket
  • Recent Posts

  • Archives

  • Categories

  • Blog Events

    Get your own free Blogoversary button!

    Coffee Chat at writefromkaren.com
    Photobucket
    Mardi Gras Mambo



    The Not-So-Blog Support Our Troops
    Dyson Domestic Diva
    My CLICKTHRU HOT SPOT is located on my Blog Links page.
  • Awesome Blogs