Grab My Button Widget Tutorial: One Click Installation

Happy Smile"Grab My Button" is a good tool for promotion! Readers grab your custom image to show support and you get additional traffic. In the tutorial: Grab My Button, Promote My Blog , we learned to create a scroll box to hold the html code for your blog image and link. In this tutorial, we will take the widget a step further and add a small icon/button that will let blogspot users import your widget with just one click!

First, you need the code for your button. Here's code structure:

<center><img src="http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg" alt="" />
<textarea cols="20" rows="3"><a href="http://BloggingWithSuccess.net"><img src="http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg" alt="BWS tips button" width="125" height="125" /></a></textarea></center>

Just replace the image source and link url to make it your own. Be sure to put your value into the 'Alt =' instead of 'bws tips button' and the correct width/height if yours is different!

Now, you have the code. Next step is to convert the code so that Blogger layout does not mess it up by thinking it's html for the Blogger Editor. Go to Blogger Code Converter and paste your button code. Copy output to a text file  or wordprocessor to use later.

Now, copy following code and paste it to a text file (or anything that lets you edit text):

<form method="POST" action="http://www.blogger.com/add-widget"><input type="hidden" name="widget.title" value="-widget-title-"/><input type="hidden" name="widget.content" value="-converted-code-"/><input type="hidden" name="widget.template" value="<data:content/>" /><input type="hidden" name="infoUrl" value="-your-blog-url-"/><input type="hidden" name="logoUrl" value="-if-you-have-logo-its-url"/><input type="submit" name="go" value="Grab Now"/></form> 

You will need to make following changes:

  • Replace -widget-title- with the title you want to give to the widget. e.g. Recommended Reading etc. It can be left blank.
  • Replace  -converted-code- with the code you got after conversion from Blogger Code Converter. It is required.
  • Replace -your-blog-url- with your homepage or any other page that tells what widget is about. It can be left blank.
  • Replace -logo-url- with any image address less than 100x100 you want to display on "Import Widget" page. It can be left blank.

Now if it's not there already,  place your button image & scroll box on your blog. Then add the form code below it, in the same gadget/widget.

The above code displays a button with text "Grab Now" on it. To display the blogger button icon we use,  first, find following code (it's the second-to-last line):

<input type="submit" name="go" value="Grab Now"/>

This code displays a button with text Grab Now. To use image, replace it with following code:

<input type="image" src="http://www.blogger.com/img/add/add2blogger_sm_b.gif" alt="Add to Blogger"/>

You can see the live example in our sidebar. (consider yourself invited to test the widget and add our button to your sidebar!  :twisted:  )

About Ishan Sharma

Hi, I am a young Blogger from India. I am very passionate about blogging and also co-founder of Blogging With Success. I write about general blogging tips and WordPress. You can read other posts by me here.If you need help, feel free to contact anytime!

Comments

  1. Hi, I am trying to share a button within a post as requested by the community I want to link to. They provide the image and the code but I don’t know what to do with it.
    The graphic and code are here – http://www.aholyexperience.com/2003/06/buttons-to-use-and-share/. Can you please tell me how to do this?

  2. THANK YOU for this post! I have been going nuts trying to figure this out on WP! I put your code in the widget, substituted it for mine and …….it works!!!

    Bobbie Anne

  3. Nice post I like it tooooooo verryyyyy much thankssss

  4. Nice post I like it tooooooo verry yyyy much thankssss

  5. hi, can you tell me what I’m doing wrong? My logo button appears right on my blog, but when I test it, no image comes up with the code…Thank you!

  6. That was the best and easiest way I have seen how to add this widget. I love that it says, “grab now,” and not just the code! Thanks a million!

  7. Hello,
    Below is what I’ve added to a HTML Blogger gadget for my sidebar. I’m hoping to have my button and then directly underneath to have the “Grab My Button” text but it isn’t working. My blog page is at http://www.ecoinspired.blogspot.com
    Can you help? Thanks.

    • HI Karen,
      I checked you blog and seems like the full code has not been added. I’d suggest going through tutorial once again and add code from scratch. Let me know if you want to ask anything else.
      Thanks.

  8. Hi there! I used this tutorial (and the previous one "how to create your grab my button box". I think the link in the box is fine (can't test it… don't have another blog; can you tell me if there's another way?), however, I also can't tell if the "Add to blogger" button works. Could you check for me? Sorry, but I'm VERY new to this blogging thing! LOL

    Thanks in advance for any help you can provide.

    • Hello and welcome!

      As for testing your grab button you can just copy it just as a reader would, then paste it into a new widget on your sidebar as a test only. Display and check the link, then delete the test widget. Here's how it would look [works fine!]:

      <img src="http://i863.photobucket.com/albums/ab193/fabfrugalmama/blog/fab_frugal_mama_blog_button125px.gif&quot; alt="Fab Frugal Mama blog button" width="125" height="125" />

      As for the Add to Blogger button, it's not working, I tried to click and nothing happened. You can test yourself by clicking and if it worked you'd be able to add the button to your blog [then delete it as above!]. So you need to go over the setup again. Are you sure you put the form code below your textarea stuff in the same widget?

      If you still need help, send me the entire widget code in an email [I'll send you a note with my gmail].

  9. jess Bowman says:

    Can you tell me what I"m doing wrong????

    <textarea cols="20" rows="3"><img src="http://i326.photobucket.com/albums/k424/rckclmbrjess/BLOGBUTTON2.jpg&quot; alt="Remembering Stephen button" width="125" height="125" /></textarea></center> "/>" type=hidden name=widget.template>

    • I'd love to help, but you need to give me more to go on. Where is your site so I can see what the page source for the code and view results. Seems to have a lot of missing code, based on the version in your comment!

  10. I tried what you suggested…& was "somewhat" successful!

    If you get a chance, I'd sure appreciate your imput!

    Thanks & God bless!

    Kim

  11. all is clear thanks!

  12. hmmm i am sorry but what do you mean about error in the the curly quotes? do you mean to say that until now there is an error appearing when you post the entrecard/avatar on other site? you are right. I just copied the html code from here. hoping to hear a respond from you soon. thank you so much

    • No, my mixup! Your quotes are and have been fine — I was thinking of WhackyMummy's problem on a related post. That's what I get for replying to comments from the dashboard instead of directly on the post! Makes the comment thread a bit 'whacky'. Sorry.

  13. thank you for sharing this

    • You're welcome. I took a look at your button (actually your Entrecard image) — looks good. The lettering could be clearer (caused by reducing larger lettering to 125 x 125), but your friends will recognize your face!. If you have software you can create the 12photo and then add appropriate sized text over the image. You forgot to change the Alt= value to your own keywords. It currently says "BWS tips button". Why not create a gravatar image and favicon to brand your blog?

      • thank you for pointing it out. i'm sorry but i am really new at this. but can you please recheck it if i did the alt= right this time? i also visited the fav icon and now trying the gravatar.thanks xoxo

        • Yes. Now wasn't the gravatar easy? The quotes in your scrollbox are fine now, but I need to know how the error with currly quotes happened — did you copy the html code from this page?

          The alt value is fine. I did a google search with your words in quotes and found the button reference right away. This is what shows on the results page:

          MrsMartinez's Raves and Rants!

          <code><img alt="MrsMartinez Raves and Rants" width="125" …</code>

  14. good very useful

Trackbacks

  1. [...] I had saved all of my sidebar html for just this purpose. Imagine my surprise when I couldn’t find the html for the grab button widget ?  Of course I could go to my original post to re-create the scrollbox — Grab My Button, Promote My Blog. Similary to recreate the ‘add to Blogger’ click button I just had to follow the tutorial for widget  one click installation. [...]