![Learn How To Be A Successful Blogger [Blogging With Success]](http://cdn.bloggingwithsuccess.net/wp-content/uploads/2009/10/bwsthesislogo.png)
The 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.
For Blogger and Wp.org, here's the code you can customize and use for your button:
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.
![About Writer [Blogging With Success]](http://cdn.bloggingwithsuccess.net/wp-content/uploads/2010/06/User.png "About Author")
About Author
![Related Posts [Blogging With Success]](http://cdn.bloggingwithsuccess.net/wp-content/uploads/2010/06/Document.png "Related Posts")
Related posts
{ 228 comments }
← Previous Comments
Next Comments →
Never mind…I got it!!! Thanks so much…here's hoping this works this time
I made my ad on the free site that you recommended. I had to save it to my computer. So how do I now get the code needed input to make my button?
I notice your blog is on WP.com so you need to use the other tutorial: http://bloggingwithsuccess.net/displaying-grab-bu…
The image map in the sidebar shows all tutorials about ads and buttons.
You must have the image uploaded (to your blog or photobucket, etc.) and know the permalink address, so you can refer to the link in the scroll box.
I am so sorry…I feel really stupid. They had me save it to my computer…how do I transfer it over to my photobucket account or my blog?
hi
nice blog . i m engnr.masaud akhter and working on a blog about engineering software tutorials.ebooks and setups. i want to increase traffic to dat. so how can i make it. can u give link to my site as u did for others… can u give me any suggestion?
Hi again. We don't give links to other sites — only as part of a trackback to their blog posts mentioned in our articles (or on the top commentators list). So not quite sure what you mean there. If you mean the commentluv link then your last post should have been listed — next time be sure to check or uncheck and recheck the commentluv box — sometimes it has to be jogged a bit. lol The default should be checked
I do suggest you study your traffic by using anlaytics: Analytics Pt 1: How Much Do You Know About Your Visitor Traffic?</a. The more you know, the better you can target your promotion. I put a different post suggestion in the reply to previous comment you left.
Thanks so much!
Your button is Great!
<img src="http://i632.photobucket.com/albums/uu49/olivehuedesigns/button2.png">
Don't forget to change the alt tag to your own keywords. See who grabbed your "ad" — follow this tutorial to set up a Google alert
Hi, I don't think I did this button thing correctly. When you click on the button it takes you to Flickr. What am I doing wrong?
You seem to have forgotten to add the html that generates the scroll box below your button image.Yyour friends can only copy and paste from the scroll box into their new gadget. the version on their blog would show just the image and when clicked it goes to your blog. Add this text below what you have now. If you don't want your image that's there now to go to Flckr, then remove the link around that image. Let me know how it works.
<textarea cols="20" rows="3"><img src="http://farm5.static.flickr.com/4068/4441071363_6730482b72.jpg" alt="What's for dinner button" width="125" height="125" /></textarea>
It worked! Thank you! I've been wanting this forever and your coding was perfect! I had to put it in the "notes" box (where I add link information in Typepad) so it took me a little bit of trial and error (I put it in the other boxes first and it the text area became a hyper-link). Again, thank you!
Jona, love your perseverance (it's all about trial and error.LOL). Your button is attractive
<img src="http://farm5.static.flickr.com/4010/4420859467_9fca0fc58c_o.jpg" width="150" height="150" alt="bannersquare150"/>. Fits well in your wide sidebar.
Good favicon, but where's your gravatar [to extend the branding?]. Your overall blog design is good; If possible I'd center the header within the cream background — may need to elongate. The sidebar links color is too close to the background — try a dark complimentary color for better legibility.
Thank you!!! You made this so easy!
Hi J, you didn't leave your blog address but I tracked you done — nice button image. You forgot to change the alt= tag to your uniques text. In a few days you would show up on my Google Alert of people using our BWS button!!! See the post that explains how you can track your button: Use Google Search to Track Your Tutorial (button) Usage
Okay…trying to start a blog…learning as I go. I thought I had it right…but my "button" picture will not come up when copy and pasted. The good news is the empty box does link back to my blog. I got it to do something! I know it's my error…can you help? Thank you!
You have some extra code after the image location — copy and paste it into a draft email and you should see it easily. The reason it happens is you're trying to point to the photobucket view page not the actual image url!
…// s780.photobucket.com/albums/yy82/mitzki5/Blog%202010/?action=view¤t=125-x-125-advertise-here-image-3-4.jpg
is no good. use just
…//i780.photobucket.com/albums/yy82/mitzki5/Blog%202010/125-x-125-advertise-here-image-3-4.jpg
Thank you so much for your help!
No problem. I didn't see the button on your regular blog, but on the one called 'multi-testing mom' — is this for testing only? The image in (and above) the scroll box is too scrunched — you resized the large header background image to be 125 x 125. You should decide what part of the image is most important and use editting program to cut out only that portion to resize and add appropriate text. Maybe use just the right side (hanging sign)…
OKAY…now can you tell me the OTHER side of this…. like how I "grab a button" from a site that "requires" me to do so…like for a sweepstakes entry or…?? I DON'T ahve a website or blog of my own….do I need one to do this or do I "grab it" to facebook or twitter (sorry – I am a complete dunce with all this…) Thanks
Wendy, It's easy to grab the button (html code) but putting it as a clickable image on Facebook or Twitter is another story! I guess the sweepstakes owner wants a link back from the grabbed button to her website or blog — so you would not be in keeping with the spirit of the contest if you did not do this… So you'll have to pass on that one.
I tried to create my own blog button and follow your tutorial. My button looks ok as does the html code and it works but it has the "x box" that appears when a photo isn't transmitting right? I did as you said and labeled the widget "under construction". Would you please visit and give me some ideas on what the problem may be?
The broken image is caused by an extra image code in the textarea box — points to your photobucket album. You have the correct image in the second code, so just delete the first one.
<img src="http://s822.photobucket.com/albums/zz146/SimpleSavingSavvy/blog%20buttons/?action=view¤t=button2.jpg" target="_blank"/><img border="0" alt="SSS button" width="125" src="http://i822.photobucket.com/albums/zz146/SimpleSavingSavvy/blog%20buttons/button2.jpg" height="125"/>
The 'target=" _blank" belongs with the href to open your blog in a new window if that's what you want when someone clicks on your button from your friend's blog! If you need it, add it with a space after the blog url, and before the closing > tag!
YooHoo!! I tried again and successfully made the button and the code, however, its still a tad too big…what do I do for that?? Thank you for the patient tutorial, and for your tolerant study and reply for this comment.
Luckily anyone grabbing the code will have a rescaled image since you added the height and width of '125'. There are extra tags at the end of scroll box code you should delete in your gadget: <a> and .
You can resize your original image on Photobucket — see my post
Part 1 :Turn Your Grab My Button into a Free BillBoard
or just change the gadget that puts the image on your blog to scale it to 125 — add height/width to the image html…
This is a great site, for it really gets back to its readers immediately! Thanks a lot…I really appreciate the speedy reply and that you gave such a detailed analysis of my blog..will really implement all the valuable tips you gave.
Hi, I was able to make a button according to your instruction. I tested it and it was working fine. May be a tad shorter would be good but that part was fine…problem is that I can't place the code appear beneath the button, as necessary for a reader to copy it. HELP!!
And while you are at it, please be kind enough to have a long look at the blog appearance and give tips to improvise…or am I asking for too much!! ?
Persistence pays off again! Congrats. As for your site, I like the overall look and color scheme. The background image is attractive. I noticed the post text size is inconsistent for more recent posts — I prefer the larger type font. Suggest you move Google search to the top and add RSS feed button/box at top. The blogger nav bar is unattractive — they have a transparent option now (check your gadgets). Now would be the time to find a custom template that give you a top menu for navigation and maybe a footer for things like recent comments or posts. Look at my Blogger blog for some ideas on what to put in side bar. Also see my post on BWS homepage: Blogger Series: Widgets and Hacks – ReadMore, Recent Comments, Recent Posts.
You should carefully define fewer label categories and shorten the list. I joined your GoogleFriends.
Hi! I already have a blog button, but am wondering if there is any way to find out who has grabbed it and added it to their blog?
Nice button. If you look at instruction on our tutorial it gives you a clue:
I need to update the post with the exact link to that article:
Use Google Search to Track Your Tutorial Usage
You just need to update your grab button widget to show your alt tag. You'll see Google alerts from that point forward as new grabs occur.
Thanks a bunch! I added the alt= tag.
Well I am at a total loss for what to do, you see I make it look like the layout should but when I tell mine to save the computer is changing it all around.
Sorry I can't seem to make it work, I do follow directions even though it doesn't look like I do
Okay, not to worry. Change the layout again, but take a screenshot
before you save the widget and send it to me . Or copy and paste the html into a gmail.
Note: (12/04/09) After a few emails back and forth the button is working on your site. There were a couple of red herrings that made us jump through hops but I commend you for hanging in there!
<img src="http://farm3.static.flickr.com/2619/4154559968_dfe982731a_m.jpg" alt="Hipchic button" width="125" height="125" />
At first I thought there was a problem with the Syntax Highlighter plugin we use for displaying tutorial html, but it's okay. If you copy the code (rather than using the plugin's toolbar) to paste into email, then it doesn't handle the new line breaks properly. Hence my gmail of the code was wrong! And when I used an online converter and supplied the text version in a prior comment, WP made the quotes different — the very reason I use the plugin! The last herring was that all Editors rearrange the alt= before the image src which is okay, but disturbing when I asked you to make the layout exactly as shown!
Anyway, all is well that ends well…
Thanks, I am still having trouble, my button shows up on my page, but I am unable to get anything to show up when I test it
You pasted the image url in the wrong spot. Take a look at your layout code then compare to what the textarea should be: (modify the alt names as you wish) — I removed the html originally in my comment since if you copy it, WP converts the quotes to smart quotes, invalidating the html!
Thankyou, this was such great help, with some playing around I think it is working.
Hi Cynde. The scroll bar is there and on the surface looks fine. However you're pointing to my button image and that's what folks will see if they copy your code! You need to replace
<code> …//farm4.static.flickr.com/3358/3279966696_6f63996198.jpg </code>
with
<code> ….//farm3.static.flickr.com/2619/4154559968_dfe982731a_m.jpg </code>
It's always a good step to copy your own code and put is sidebar or draft post to test it out. then delete it!
Thank you so much. I'm a newbie to blogging and I am so-o-o-o not a technical person. I tried to find an answer on blogger "help" but could not find an easy answer. Your lesson was so very helpful. I made my "Grab my button" and tested it and (wonder of wonders) it worked! The only bit of trouble I had (because I am not technical) is figuring out how to create a url address for my button. Since yours was created through flikr, I decided to try that. I fumbled through it and got it done, but I had no idea what I was doing. Thanks again from someone who has a pea brain when it comes to computers.
Glad you found help here. Just keep fumbling and before you know it, you'll be a geek!
I like the header you designed and your button. Good job.
<img src="http://farm3.static.flickr.com/2473/4141638224_74733062bb_o.png">
Not bad for a 'pea brain!' — which is what we all are in one topic or another…
Great tutorial. I tried a different one first and I failed. I got this one up but not without glitches. I don't know what i did or what i need to do to fix it. It's the Princess training Button at http://www.confessionsofanondomestichousewife.blogspot.c...
Welcome Angela.
1. glitch – you didn't say what it is, but looking in my crystal ball I see the http for the image on Photobucket is wrong:
<code>http:/ /http://s114.photobucket.com/albums/
n257/twhnfm/?action=view¤t=PrincessTraining.jpg</code>
But even without the double http:// you are sending people to the albums view. You need to copy the 'direct link' for your image. See more options under 'share' and select 'get link code' tab; 'direct link for layout pages.' The correct url is <code> ;http://i114.photobucket.com/albums/
n257/twhnfm/PrincessTraining.jpg </code>
2. When someone click the button your friends install, do you want them to go to your 'princess training' category? That's what the link points to, not your home page. There is only one post in that category.
Thank you so much. Your instructions are by far more simple than any others I found.
Aj, Glad you're up and running. For truth in advertising you need to show the same size button above your scroll box or perhaps you have the wrond dimension in the html code. The image is 122px x 156px and your scroll box makes it 125 x 125 on the blog that grabs the button. Both look fine!
<img alt="Share Life and Money" width="125" src="http://i665.photobucket.com/albums/vv18/NeuMind/HandandTreeButton.jpg" height="125">
Thank you for this easy to use tutorial! I successfully added my "grab button"!
That's what we like to hear! I'd recommend more space around the word [ReDeemed] and enlarging 'unique art' text for clarity. Here's a version I did as a small gift to celebrate our 1 year blogiversary; just copy to your pc and upload to Flickr (although I prefer using photobucket since you can replace images — avoiding changing your grab box code!). See post: Part 2-Turn Your Grab My Button into a Free BillBoard
If you create a new Flickr version then change the url in your scrollbox!
<img src="http://i282.photobucket.com/albums/kk272/SBA_jpgs/redeemed.jpg" border="0" alt="Button for Redeemed Blog">
thank you – and thanks for the tip about just replacing it – I wouldn't have thought about that!
I can't get my code to show up with the box around it it just shows my button twice now
here are my codes-could you help by fixing it for me
Laura, I'm putting a big warning on this post that these instructions are for Blogger or self-hosted WP only — Free WP ignores some html.. BUT, don't worry there is a version for WP.com !!!!
http://bloggingwithsuccess.net/displaying-grab-bu…
So start over with that tutorial. Let me know how it works…
OMG, I did it…I did it.
It took me some times and little meltdown, but I have my button
Thank you so, so very much for this great help
Congrats. It's always worth the"tears" to see a finished product! Your button is perfect.
OO – I see what you mean re: it not actually working. Hmm…
This is the code I used:
I basically cut and pasted what you had in your article and then substituted by blog and the link to the graphic. Where do I have the extra characters? Not sure what to do!
Started over… let me know if it's working now. I'm not seeing the fuzzy line on the side for some reason but I can always recreate it to make sure it's clean.
Thanks again for your help – I really do appreciate it!
It's fine now, you used a different image (or it's the effect of deleting the break tag) so there is no fuzziness. Congrats!
I think you changed it already! anyway your html code does not appear in this comment! But I can see it, so just edit your scroll box layout element find the < br/ > and delete it. then republish.
For code to appear you need to convert it to text, put the text version in your comment. For next time, try this converter: http://javascript.about.com/library/blscr01.htm
I looked at the original code and there is no break. So I can only guess that after you copied it, you made a new line break while editing? Why not try it again and let me know [use a new element that you can then delete]. I copied to my test blog and it was okay, but I'm using the new Blogger editor that may ignore breaks in html…
I think I did it! The issue was that for some reason Photobucket was not saving the resized image… so basically the image was just too big.
Let me know if it looks right to you please. Thanks – and sorry to hijack your comment roll with all my updates!
Charlene, I just love it when readers are so excited (or frustrated into action) that they figure it out for themselves! LOL. But there is another problem or two.
1. The image looks fine above your scroll box but not if I install it on my test blog. The image http address has extraneous characters after the .gif. You added a break (br) tag so Blogger interprets that incorrectly and can't find the image. So remove from the scroll box code the characters. Always copy the code yourself from the blog display and create a button on your (test) blog the way the reader would do it. You can then delete the test button from your layout….
2. There's some fuzzy stuff along the left side of the photobucket image — seems you overlapped the real button image you want with some text or other background. So to be pristine about it, you need to recreate the image and update it on photobucket.
I resized the image in photobucket but it still appears to big. I tried saving the image to a post and using that post location… but now I just get a red X. UGH!
Great site – thanks! I've been playing with this for about an hour and can't figure out what I'm doing wrong.
Here's the code I've entered nto a text widget
:
My blog is at http://beamingbalance.blogspot.com
Thanks in advance for your help!
can you help me add a link in the picture?
The link in your grab button scrollbox currently points to http:/…donate/nfsa2009/teamdenver. When someone takes your button code, installs a gadget, then the picture will link there. Your picture above the scrollbox does not need a link. If you really want a linked picture then copy your own scrollbox code, edit your gadget — and paste it over the image html code. Be careful not to touch the textarea code at the bottom.{that creates the scroll]
I'm trying to figure this out, but I don't know computer coding or html. How do I find my button location to insert it into the coding? I have my picture on flickr, but it's not working. Could you perhaps let me know how it would look with my http address?
Hi. There are four problems
1. I looked at your image from the scroll box and it's too large (defaults to 1024 x 768)
You need to use this url which is a 100 x 75 version allowed on Flickr 'all sizes' option.
<code> ;http://farm3.static.flickr.com/2506/3800500487_7ee638fd8f_t.jpg</code>
<img src="http://farm3.static.flickr.com/2506/3800500487_7ee638fd8f_t.jpg">
2. Don't you need some text over your image that says something about you or your blog? See the samples in other comments above. e.g. "Wacky Mummy" — you need editing software to add text. See our post on 125 x 125 images for some free services. Also see related post:Turn Grab Button into BillBoard for using Photobucket for adding text…
3. Did you copy the tutuorial code from the post and then modify or did you type directly in your blog? The quotes are wrong in your version. you have "”, a straight and a curly quote instead of a single straight quote. Just delete the curly quote which appears several times in your code. It must look like this "
4. You forgot to add the img src code to display your photo above the scroll box.
<code>… img src="http://farm3.static.flickr.com/2506/3800500487_7ee638fd8f_t.jpg" …</code>
Change the url to whatever your final location is..
So until you resolve these issues, change the label on your sidebar widget to "Under Construction"
Thanks.
I have created a button for my site and displayed it on a full page giving the user a few options to choose from. I think I must just add it to my sidebar.
I see you added the link to your sidebar. The full page shows you're a man of many options! I prefer versions with some text (other than url) to give potential clickers a clue about your niche. I like that they open in a new window (target="_blank") and you have an 'alt' value that is seo savvy. You may want to consider putting the images on photobucket in case you ever restrict image hot-linking as we do.
<img src="http://www.serradinho.com/images/serradinho_button_1.png" alt="grab button image" />
← Previous Comments
Next Comments →
{ 8 trackbacks }