Grab My Button, Promote My Blog

creativejunkiebuttonThe concept of linking to a blog you like is not new. Many bloggers do this in the form of a BlogRoll or BlogList. Some have plain text links. But lately more people are proudly displaying a customized image that links to their favorite blogger. The surprising part is the image looks very much like a 125 x 125 ad, although usually more unique and aesthetically pleasing. The process of spreading the "link luv" is made easier with a "Grab My Button" gadget, like the on seen on Creative Junkie's site. Let me call the one being linked to the 'advertiser' for lack of a better word. The blogger who hosts your button is the 'promoter.' So, the advertiser designs the button and provides the code for promoters to easily publish the hot button in their sidebars. I was asked by Creative Junkie and others in a BlogCatalog discussion how they could get into this game. Of course you first need a nice image that anyone can access directly (e.g. located on PhotoBucket.) The size and shape depends on what you want, but keeping it at 125 x 125 serves a dual purposes--- comes in handy as a regular ad. If you need help, get some resource ideas on creating blog ads. If  you use your button image as part of a regular ad, take a look at where to use a 125 x 125 ad.

If you're using free hosted WP then go to the alternate tutorial for your platform -Displaying Grab My Button Code in WordPress.com

For Blogger and Wp.org, here's the code you can customize and use for your button:

Note: Tutorial code may contain a green arrow to mark line continuation.greenarrow copyhtml Hover the mouse over any line. Small tool bar pops up. Click second icon to copy the code to clipboard. Then paste into your html editor. Use third icon to print.
<img src="http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg" alt="" />
<br /><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>

NOTES: This example uses the BWS button image and url. So just substitute your button location and your blog's url. Remember the button image must be accessible to everyone (e.g. a shared image on a free host like Flickr). Ours is at "http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg" Your image could have a file type other than .jpg --- like .png or .gif The first tag, "img src=" just displays your image above the scroll box. The second tag, "textarea..." creates the scroll box, holding the html code for visitors to copy and paste.

You can adjust the scroll box's height and width. Just change 'rows'  (number of lines visible in the box without scrolling) and 'cols'  (number of characters across the box.) Notice the image width and height is set to 125 for our button. Change this  for your image size. Also, change alt= "BWS tips button" to something that uniquely describes your button image. A related post   describes how the alt= value lets you track who grabbed your button --- using Google Search.  Here's what you do to publish your grab button:

  • Create a text/html gadget or widget in your sidebar or footer.
  • Copy and paste the code above into your html view.
  • Substitute your blog's url  and image location . Adjust any row or column numbers.
  • Preview/save the widget.  Test it by copying your code from the scroll box. Paste in a temporary post or gadget to make sure it's perfect. If you have a problem label the gadget "Under Construction and drop a comment here! We will help you.

You're now set to start your 'grab my button' campaign. Actually this is a win-win situation for you and your friends. They get to show appreciation for your blogging or any help you gave them. You get to be noticed by their readers and maybe gain new traffic.

So, have you already created your custom button? Drop us a comment and be sure to subscribe to the RSS feed for posts about buttons, 125 x 125 ads and image handling.

Blogging With Success Logo
Join 600+ Subscribers to get latest posts delivered straight to your inbox and 4 Free Blogging Guides

Comments

  1. Thanks! This is just what I need. I have just added it to my blog. This is great :)

  2. Wow…great feedback! Thanks for taking the time to check it out and give me some tips. I totally get what you're saying about the pick font…I work on that but I'm not sure what you're saying about the link addresses??? Maybe you could elaborate a bit on that…what link addresses are you referring too??

    Thanks a million!

    Jen

  3. Thank you…I have looked everywhere for this info and you had it all along. Great info, easy to follow…just perfect. Thanks for taking the time to post it!! ~ Jennifer

    • <img src="http://i1004.photobucket.com/albums/af161/DesignerSecrets/Badgecopy.gif ">

      Great button. Just a suggestion unrelated to the button. The pink font color is very hard to read against a white background. Normally I'd tell you to go to Layout and adjust the 'fonts & colors' but I don't think your template uses the blogger names. If it does, try adjusting the "Post Title Color" to a scarlet or magenta shade: #CF046D, #FF00AD or #F700F7.Otherwise you need to change the template code which overrides the blogger defaults.

      And, your link addresses should be within the text or blog name. While editing, highlight the text words and press the green globe icon, paste in the http:… page address. Looks cleaner. If you need more help, just subscribe to our newsletter and we can communicate by email.

  4. @kahaly — you and I have gone over the nested reply limit! But I would use the top part of your button image, redoing it to a 48 x 48 size purple backgroud then add the white text.You could also do a larger version of your favicon, but I like the purple better. However many bloggers are starting to use their real face shot. It's your choice.

  5. Thanks so much for your help with this!!

  6. very good tutorial…i got my button done…It was pretty easy…

    thnx again.

  7. Sorry that I didn't respond to your email you had mentioned that "it looks like I fixed the problem" therefore I didn't think a reply was necessary.

    Anyway, yes it does work. Thank you for your tutorials and your response.

    Happy Memorial Day Weekend.

  8. Hi,

    You have a great tutorial here!

    I've got mine just about done :)

    But my button and the code are not centered together…

    Can you help me with this?

    Thank you for any help!

    http://lillyshaystyle.blogspot.com/
    My host is flickr..I don't know if that matters..

    • I can only guess you solved it — looks centered to me. But I sent you an email so you can give me more specifics. The image host doesn't matter. You control the alignment via your blog editor or html.

      Your Buttons look good. Glad we could help.

  9. Thanks for attracting my attention to this. It's worth giving a shot and seeing how it goes, at least.

  10. Do you have the same sort of genius expertise to create a custom background? I would love the generic code and simple instructions like you did with the widget. Super helpful! Thanks!

    • Well, this can be done by simple div tag. Add this code before the button code for coloured background:

      <div style="background-color: #ffffff;">

      Note that you can place any value for desired color in place of <code>#ffffff</code>

      If you want image as backround, use this code:

      <div style="background-image: url(-image address here-);">

      Put div end tag at end:

      </div>

      Feel free to reply if you encounter any problems.

      • I forgot a simple thing here, when adding image url to second code, enclose it in single quotes ( ' ) and not double ones ( " )

        For example, if image URL is <code&gt ;http://abc.com/img</code&gt; then add it in div code as url('ht_______')

  11. Oh my gosh! I did it! I did it! Thank you for your brilliant mind! =) I am on my way!

  12. Help!

    I have tried a thousand different ways to make this work and this is as close as I get, but there is extra funky stuff showing up and I am not savvy enough to figure out why. If you wouldn't terribly mind, could you please take a look at the code and let me know what I am doing wrong? Thanks!

    http://s558.photobucket.com/albums/ss30/ohmyglues

    <a> <a href="http://s558.photobucket.com/albums/ss30/ohmygluestick/?action/&gt;” target=”_blank”>http://s558.photobucket.com/albums/ss30/ohmyglues

  13. Thats a really gud idea. Thnx a lot !!

    PS: I cant believe that you reply to every comment :)

    • Glad that you liked it. Fell free to ask any questions if you encounte problems.

    • My biggest pet peeve is a blog with tutorials where questions go unanswered — defeats the purpose of the post if visitor can not use it. Not to mention loss of good will.

  14. Michelle M says:

    I finished…but did I log off early? Nope…lol. Here is a link to my blog. I am just setting it up so there are no posts on it…yet! Let me know what you think? I am open to any suggestions. Thanks!
    http://flyinggigglesandlollipops.blogspot.com/

    • Image is very good, I' d like to see the same letter fonts as in your header. Keep up the good work — glad you're thinking promotion [even before content, adds to my argument that 'content is not king' lol]

      As for the blog, Great design – colors and background image! I'd hazard a guess that soon you may want a menu bar across the top (below your header image) to help visitors navigate your many many posts (to come). See if you designer can add one. If you're a tweaker of html then you can do it yourself . If interested, I have a post on my blogspot blog —visit me at BlogCatalog (user/BPWebNews).

  15. Glad to hear it — at least someone could log off early and enjoy the family! Why not leave your blog address in your signature so we can take a look at your new button? Also you may want to grab a gravatar image- (see our post on why and how !

  16. Michelle M says:

    Thank you….you just saved my night!

  17. Thanks,

    I was having so much trouble coding my box and you made it so easy!

    • Cindy, that was too easy, I can now take a day off! LOL I tried to visit your blog, seems you moved from Blogspot (who isn't these days?) and your domain name was already taken… You forgot to key 'theMomMaven .com" — be careful, otherwise it goes to a Godaddy ad with a popup. I'll edit your comment to show the correct address. Good luck.

  18. I have become a full time job for you. It always seems like it will be simple and then it turns into a two day project. Why can't I just stop tweaking things. Put the html down and step away from the blog.

    Thanks.

    • I love when a not-so-plan comes together! You used my email and now the image displays perfectly above the scroll box in Firefox — I'm afraid to look in IE 7, so I'm stepping away.
      Thanks for grabbing our button. I like your live signature and will be trying it.

  19. Well I am not sure what the problem is. It was working fine at my end even when I tested it.

    I closed the page and reopened it and it looked correct and it worked when I clicked on the link. The word that I was wondering about was center in line 1. It is at the end of the line on this page but in the correction you sent me it was at the beginning of line 1. Any reason for this?

    Thank you super wise person.

    • The original post only centers the scroll box. The 'center' tag starts where ever you place it, so I did feel you wanted to center the image above the scroll box. Placing it there takes care of both. [but there I go reading your mind..]

      One more mindreading trick — you don't use Firefox 3.0 nor Internet Explorer 7.0. Because the scroll box is fine but each has a different problem with the image above the box! No image in Firefox so most friends don't notice, laughing dot in IE 7 — no good.

      Don't worry, I'll send you an email with the correct code to use 'as is' without worrying about the extra blanks. The blanks and new lines just added to the confusion in breaking up the code when you deleted them! My fault. But it was a 'wise' mistake. I learned from it. lol

  20. You are the best teacher. It is working great. I do have a question. Last one I promise. In your original post about this the word was at the end of the row and in the last post it is at the beginning of the row before the <img src .

    Why is that?

    Thanks so much for your help.

    Lori.

    • Thanks for the compliment. We have disappearing ink again — your 'this word' disappeared so I can't even guess what it was [unusual for me.. lol].

      I did see your textbox is on your blog but you should have the image display above the box so people know what they're getting when they grab the button! I know they trust you, but…

      Looking at the source code I see it is there but right now it shows the image on the left of the textbox — but it's invisible to readers since the sidebar is not that wide! Boy this was to be a simple thing! lol I've never seen so many variations… and so much hiding of words and images.

      Okay final, final solution: just view your gadget in html mode and press the enter key to add a space just before the < textarea code starts. Check in visual mode. Notice there was a new line in the 'answer' above which would have created the space. Oh well… this is what makes it a challenge. I may become a magician after this. lol

  21. OMG I am such a goof about this. I just can't get it. My Picasa link is

    I get the part where I change the website url but the picture part is just laughing at me. Can you help?

  22. Your instructions are very clear but of course I have a question.

    I have it looking the way it should etc. I thought I would test it so I copied the link just like someone else would and I put it into another html gadget on my page. When I click on the button that installed it takes me to my Picasa album online and not my blog page. Is that just because it is on my own page????

    • I love that you go the extra mile of testing it first. But you have been a little too creative — you added an extra link on the image in the textarea box to

      http:// picasaweb.google.com/lh/photo/agneC4g0mZ…, etc.- this is your album and it overrides the site link which you correctly coded just before the bad link. Remove the < a href.. > for that bad link and you should be good to go.

      But test it again. If problem put "under construction" in the title (I saw another thoughtful owner do that) and leave another comment here.

  23. You Rock!!!

    I tried many tutorials and got know where with them. I am a total computer dork but when I read your tutorial it only took me minutes befor I was able to figure it out and put it in action. Thank you thank you thank you!!

    • You're Welcome! Nice to hear it worked the first time! By the way you're the second Jennifer who's visited us. Your blog is so creative. Thank you for the post about how this tutorial helped you get into the 'grab my button game!" I notice you have a button for "amillionmemoriesblog" — try overriding the html code to align the image to the right since it's too wide for your sidebar and the words are cut off. Just before the code that came with the button, insert a html divide tag without the extra spaces around the < and > ( I had to add the spaces, otherwise WordPress will take action on the tags. ):

      < div align="right" >

      Then put the divide end after the button code to go back to normal alignment:

      < /div >

      YOU CAN DO IT !!!

      Might want to tell your friend that the image is too wide or she needs to add the div alignment in the grab button scroll box!

  24. Thank you so much for your help! The challenge I was having was that if someone added my button to their blog, it wasn't linking as intended. It's fixed now!

    • Glad to help. I noticed your image is 220 x 220px. Just be careful since many Blogger sidebars can be exactly 220 (leaving no padding room) or less. If the sidebar is say 180, things might get out of whack. You may want to consider something smaller…

      • Okay got the image and the scroll all fine, however, in the pic, I want to insert, Find A Niche but I can't figure out in the code to do that, I've changed everything to reflect this and nothing. Here is my code:

  25. Sorry I forgot that I posted in here.

    My Button now works. Thanks for having great tutorials.

    Happy Spring

  26. I'm so happy that I found your site. So helpful!

    Now, I am beginning to feel like the biggest dolt because I cannot take my 125 x 125 image and turn it into a button. I've followed your instructions (which are very clear) but, capturing my image from where it is filed has me screaming! What in the heck is the matter with me?

    Is there any chance you can guide me in the right direction?

    Thanks,

    Ann

    • Hi Ann, I'm working in the dark a bit because you didn't tell me where the image is or show me your test blog with the incomplete code. So my best guess is you don't have the image uploaded to an onlline host (may be sitting in your desktop file?) Try a free account at Flickr.com where you can upload the image from you PC and make it public so than anyone using your button has access. Once it's uploaded just right click the image to copy the full "http://farmx.static.flickr.com/33xxxx….jpg" type address similar to the one in our button on this blog's sidebar. Use that url as your button location in the textbox info. I hope it works and keep coming back, we thrive on challenges!

      • You have been a tremendous help! Thank you!

        I appreciate your time and your help with my question.

        I was able to make the button and HTML code work :->

  27. Your info was God sent! It was the best tutorial I found. I'm still having a bit of a problem. The entire code is not showing up in the "copy" box. Could you tell me what I'm doing wrong. I've spent hours working on this and I've come so close, thanks to your help.

    Here's my code:

    “>

    3” cols=”ff0000;>20” name=”mybutton”><a>MommysOnlineGarageSale.blogspot.com/“">http://“>

    • Jennifer, I notice extraneous code that was not in my original post — ff0000 appears instead of the font color red on certain words — there must be a plugin compatiblity problem. I noticed something similar on another post but thought it was miscoded there only. So don't copy the ff0000 and made sure only one straight quote appears instead of the straight and curly ones. You also added the [img] and [/img] stuff which you need to delete. You're really just about there!!! I'll send the code in an email if this is not clear. Noticed you also put this in a form, which may be doing some unexpected things… but leave it for now and just try to adjust the code for the scrollbox.

      Apologies!

    • FYI. I reversed the red colored font and used bold instead. Seems to work. Now for why the red styling is in conflict … We found an incompatible plugin "Auto Twitter Links" which looked for the pound sign and misdirected the ones used in color styling. It's since been banished. There's still something amiss with the way WP is adding smart quotes to the html version of the tutorial code where none are asked for or needed! So until we track this down, it may be best to code the the lines yourself.

  28. I'm wondering in fact… Would many people be tempted to but your button on their blog?

    • Okay, why don't we test that theory… I just added the code to the bottom of the sidebar. You can copy and paste onto your blog — may I be so bold as to suggest putting it just below the 'recent visitors' widget — [you did want to be the first one to grab it, I assume LOL]. Thanks for leaving your footprints on several of our posts.

  29. Its actually a widget… actually i always feel putting a widget on a site makes it slower. I feel the traditional blogroll is still the better one

    • Melvin, I see your blog is 'widget-free'! I'd call the button more of an image with text — similar to a single ad image. The blog does rely on the hosting site to release the image quickly, which is okay if you don't overdo the number of buttons. True, with the blogroll you can stroke a lot more friends without cluttering your sidebar. Thanks for stopping by.

  30. I can't thank you enough for helping me out with my button!

Trackbacks

  1. [...] of our most popular posts, Grab my Button, Promote My Blog sprang from a BlogCatalog Discussion Forum where Creative Junkie asked for help in creating [...]

  2. [...] 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 [...]

  3. [...] you to SBA at “Blogging for Success” for her quick tutorial on creating your own Blog Button! Worked like a [...]

  4. [...] how to promote your blog via a “grab my button.” Read “Grab my Button, Promote my Blog,” at Blogging with [...]

  5. [...] 3.   Create your grab  my button button using this excellent tutorial: Grab My Button, Promote My Blog [...]

  6. [...] If you want to make a button, I found out the information on this website: Blogging With Success. [...]

  7. [...] The Topic That Will Make You Famous. 4 Steps to SuccessHow to Keep Track of Your Blog VisitorsGrab My Button, Promote My Blog101.5 Free Tools and Services for BloggersBasic Introduction to SEO TerminologyHow to Blog Again [...]

  8. [...] all ended up making sense and I left a comment and their was a comment to my comment with a link to Grab My Button, Promote My Blog.  Finally the code to add the scroll box, I was so excited…but it didn’t work.  [...]