Displaying Grab My Button Code in WordPress.com

Image via Wikipedia

When you see a blogging tip you can usually tell right away if it's for WordPress, Blogger or both. In our tutorial about adding a grab button scroll box , the code includes a html tag, <textarea>to create the scroll box. The box holds the customized html code for visitors to copy and paste your button on their blogs.

However, I may have forgotten the limitations on the free WP platform. One of the biggies involves CSS and HTML freedom. Bloggers on the free WP can't add high-powered html like scroll boxes.   WP.com doesn't give you an error, it just ignores the 'bad' html. If you innocently put the code in your side bar widget, you get 2 buttons and no scroll.  This is what happened to Amber's  Comeherelittlebug.  So what to do?

Amber asked for help on Twitter, so I volunteered to send the code, not realizing her blog is on WP.com. I didn't know she had tried my tutorial already and removed the 'box.' It helps to get the details.  :oops:  Somewhat embarrassed when the custom code did not work, I found an alternative and she was able to further refine it to scroll horizontally. I worked on it a bit more and added a horizontal scroll and smaller line spacing.

As a result of our collaboration, we now have a regular text gadget that looks like a scroll box. It's sort of 'fake' but does the job. Visitors still copy and paste to display your button image.
wp-grab-button

How to customize the widget

Basically you'll display your button image and place text below it. It's the real html but with tags converted to text.  This fools WP.com everytime! Some styling will add the scroll bars to avoid taking up space on your sidebar.

  1. Go to your dashboard, Appearance, Widgets and select the "Text - arbitrary text or html" widget. Drag it to your sidebar location.
  2. Copy and paste the code I put in this post for the DIY Life blog
    http://ubloghere.wordpress.com/2011/08/22/code-for-this-diy-life/
    then replace that blog info and image src url with YOURS!

-----------------  The tutorial code I used before was getting garbled by the WP editor!

 

TIP: Some of you may find it easier to first compose the text in a draft post then copy into the sidebar. Read TimeThief's article at One Cool Site about managing text widgets.

Give it a try this way only if you use WordPress.com and want visitors to grab your button!

Reblog this post [with Zemanta]

Comments

  1. Thank you from the bottom of my heart. I’m a happy camper now because of you.
    Blessings, LM

  2. worked like a charm!! thanks a lot :)

    • Hi. Glad the tutorial worked for you. Just change the alt= ‘bws tips…’ to something you can use to track usage on google if you want to .

  3. OMG Thank you thank you thank you. I recently swapped from blogger to wordpress and was having fits trying to get a button to work. you my dear are a life and sanity saver!!!

    • Felicia,
      Glad I could help I know it can be frustrating working on a different blogging platform. Good luck and let me know if you need any other help.

      • I got it! I can’t begin to explain how much of a headache you just solved. I was really starting to regret swapping over now I get to keep my handy new Alexa Ranking and have my blog buttons!!!

        Thanks again.

  4. Bookmarked this post. I think I will need this tutorial in the future. Thanks for sharing this.

  5. Thank you! That was a huge help!

  6. Thanks for the great tip. I was getting pretty frustrated, but now it works!

  7. Thank you! After months of blogging I finally have a "grab-able" button!

    • Well, you're almost there! There's extra code in the divide that others would pick up — may mess up their page display (?) It' always best to copy the cod out of your scrollox and add a test widget the way your reader would. Here's the code which should be in your blog code only— you forgot the ending divide tag I suspect!:

      <div style="border:1px solid #DDD;background:#F8F8F8 none repeat scroll 0 0;overflow:auto;height:100px;line-height:1.5em;margin:auto;padding:5px 10px;">

      so add

      </div>

  8. I'm the most non-techie person on the planet it seems. I tried doing the "grab my button" thing at least 5 times and I just couldn't get it to work (although your button looked nice on my blog…lol). Oh well… thanks for trying to get through to me :(

    • Don't give up — you'll break the chain.. lol

      If you were able to display our button then all you need do is substitute your image url. Where is the image located? see if you can put the url in a reply comment, if not I'll send you my email address and you can give me the full code you used. Also you can leave it on your blog but with a label "Under Construction!" then I can see the problem…

    • Here's your reply (put on the other grab button post for WP.org);

      Here I am…back again to leave the code for my photo. image … <a href="http://photobucket.com/images/sexy%20avatar

      ” target=”_blank”>http://photobucket.com/images/sexy%20avatar
      Couple of problems:

      1) That url points to a PhotoBucket query that returns a list of all avatars with that keyword! Obviously that is not an image button you want readers to grab.

      2) You can get the url of the one image from that list, but I advise against using someone else's image which can be deleted at anytime. Also the image does not have your blog or name — usually a button has image and text to invite people to click and read your blog… So you need to at least download the image you want and then create a copy on your WP media file — use that url in the scrollbox.

      3) If you create your own image, you can use photobucket to add text. see my tutorial about that- http://bloggingwithsuccess.net/turn-125-125-grab-
      or create one this way: http://bloggingwithsuccess.net/creating-an-ad-for

      But if you want to use someone else's image go to the list of resuts and click on the image you want, then look in the 'share this image' box on the right side, select the line labeled "Direct Link" – copy the image url that looks something like:
      http://i937.photobucket.com/albums/ad211/Reichigo

      Note it must end with ".jpg" or ".gif" or ".png" to be used in the scrollbox.

  9. Well, I must be the only idiot who can't figure this out. I have tried it over and over, even tried to make up my own friggin code, and nothing works. Any enlightenment would be appreciated.

  10. THANK YOU!!!! Oh my goodness my brain is fried! Thank you for this. This was so helpful and the only set of instructions I was able to successfully follow. I appreciate it so much.

    Have a great day. =0)

    • Congrats Melanie!

      Very nice buttons… You're quite welcome for the tutorial. I know how html give most people a 'brain freeze.' You're lucky yours runs hot.. lol

  11. I have the button displayed- YAY! But where the code is supposed to be for other people to get, is blank. How do I get the code to display?

  12. I will try this for my blog…..

  13. Hello, SBA, I have left a comment so you may have my email, thanks for the idea of having a contact box! I shall look into it. My article for this was really trying to make it look straight forward so that others less technological than I can have a go!

    Blessings,

    Meggie
    .-= Meggie´s recent blog ..Book Review: Twelve Extraordinary Women =-.

  14. BTW I will try out your suggestion and get back with you tomorrow on the clairty of it…will let you know then :)
    .-= Kim´s recent blog ..Alarm System Needed? =-.

  15. You my friend ROCK!!! Thank you so much! I knew I was picking up something extra, but could not figure out what it was! THANKS!!!!!!
    .-= Kim´s recent blog ..Alarm System Needed? =-.

  16. I get the button on my WP blog, however, above my button there is part of my code written…I can't get it to go away. It's actually above the button, no where near the code for someone to copy?

    • You seem to have converted (escaped) too much of the code? try it again, but put it in a draft post and view it. I can look at it more closely tomorrow — so take it off the side bar if you can't get it on the rety… I've copied the current source.

    • Hi Kim,
      I put the code for you in this post on my test blog: http://ubloghere.wordpress.com/2010/04/26/code-fo
      For future, note these 'errors'
      1. You added an extra link and image src to your album! So should have deleted:

      <img src="http://<a href="http://s685.photobucket.com/albums/vv215/kjridgeway/my%20stuff/?action=view&current=blogbutton.png&quot; target="_blank">

      2. Some of this code was converted to text by mistake, sort of messing things up in general as WP tried to match closing html tag… but that's another post!

      Perhaps another approach would be to copy all of the tutorial text and just change your urls for blog & image, sizes and alt values… Please try a test that way to see if I should modify the tutorial with that suggestion… appreciate your help on that.

  17. You are awesome! Thanks for this; thanks for your site! I did it on the first try! :D

  18. Here's the new button — I need to put it with the scrollbox in our sidebar (we lost it when we converted to Thesis theme!)- This is the 150 x 150 size which in the grab code will resize to 125 x 125.

    <img src="http://i282.photobucket.com/albums/kk272/SBA_jpgs/bwstipsbutton.jpg"&gt;

    on your blog where you show the old image, just change the image url (leave sizing of 125 to fit your sidebar…) to

    i282.photobucket.com/albums/kk272/SBA_jpgs/bwstipsbutton.jpg

    You're officially our front runner in using the new button! Thanks.

  19. I can't thank you enough…really. You have brought sanity to my insane little blogging dilemma, and I will always be indebted to you! Ok, maybe that's exaggerating, but I'm really appreciative for your incredibly smart noggin. Thanks again. I'll be looking for your new button!

  20. You rock..thanks so much for the help…I'll def. come back and pick up your new button! I put the code in my text widget. It worked, but the html scroll box is askew. Check it out if you have time. I'm done for tonight. I've prob. spent 10+ hours just trying to get my button to work. Blah. If you can, look at it and let me know what you think. It'll def. work for now. You are amazing! I'll study to see the error of my (our) ways tomorrow morn. Thanks again.

    Janine

    • You're welcome. You just need to center the image above the scrollbox. The same way you centered your photos of yourself and your husband. In the img tag add

      class="aligncenter"</blokquote>

  21. I must be a complete tech idiot. Now I can't even get my button back up. It was there this morning with a scroll box and I tried starting over because it was getting confusing, but I have tried 6 times to paste the code from your site, inserting my url, and image location, AND inserting the converted code you gave me above where the asterisks were. Now all I have is a scroll box with my button inside of it. No text. I'm ready to scream and my neck hurts. Waa. What am I doing wrong? I had half of it last night, and now nothing is working!

    • This is like most tutorials where it makes perfect sense once you understand the concept. lol. WP on the free platform does not allow html except the kind that you want it to render onto the screen. It does not allow the 'textarea' tag with creates the scroll box so easily for other platforms. Hence the actual copy and paste below your button to be 'grabbed' must be 'escaped' or converted to text. I'll rework the tutorial to come at it in a different way. Maybe you can help me after you implement your box? Go to this post on my test blog to see exactly how your widget code must look — http://ubloghere.wordpress.com/2010/04/13/code-fo
      My version shows as black lettering, but your theme styling will override to white.

      Just copy and paste it into your sidebar widget. Then study the final code to see where you (actually we) went wrong in the steps above. There's probably a much less painful way!

  22. Just figured out that my html code is there, but the text color is white..on a white background….that's bad. How do I change it? And I still need to make the scroll box fit the size of my button…?

    • Hi Janine,

      Since all of your widgets use white lettering against dark background you need to override that. The size can also be adjusted. I started with 130px but you can change. So replace just this segment:

      background: #F8F8F8 none repeat scroll 0pt 0pt;

      with

      background: #97C000 none repeat scroll 0pt 0pt; width: 130px;

      Alternately, if you want a whitish background with black lettering in just the scrollbox, then just change the lettering color: Use this instead of what is listed above:

      background: #F8F8F8 none repeat scroll 0pt 0pt; color: #000000; width: 130px;

    • I guess my instructions for step 3 are not clear — you should use the Bulletin Board Forum converter for the image and link code only —- not all of the code from step 2. So your converted code would be for:

      <img src="http://i934.photobucket.com/albums/ad189/3girlmomblog/Blogbutton1.jpg?t=1271115042&quot; alt="BWS tips button" width="125" height="125" />

      Edit your text gadget, deleting everything you had put where the three asterisks were — all of the converted stuff after the segment:

      line-height: 1.5em;">

      but you must leave the last ending divide tag </div>.

      At this point use the converted text for just your image and link, inserting before the ending divide tag.

      I tried to show your converted version but WP comments keeps changing it!

      You're almost there!

  23. ugh. I have been at this all day…creating my button, uploading my button…trying to get my button to work on my wp site…ugh. Ok…I have the button…I have the scroll thingy…but there's no html for anyone to copy and paste! And my scroll box is huge! Help! I'm almost there! Drag me to the finish line…PLEASE!!!

  24. thank you

  25. THANK YOU so much!!! I've spent so much time wrestling with wordpress and wondering why it kept eating my code! I like the overall style of wordpress better than blogger, but it's terribly frustrating on the design front. So thank you for solving this problem for me!

  26. Great idea :D Thanks for sharing :)

  27. Landscapers Brisbane says:

    I was looking for some info. I stumble upon this post. Its very interesting blog. I can learn a lot here.

    • Welcome. Your comment was put in spam because you're using keywords instead of a personal name. The url you left was not a blog — are you setting up a business blog? You might also consider using a gravatar.

      • Landscapers Brisbane says:

        Sir I am working as a SEO I had just start it. I am new in this business. Promoting site its my work I am working for my client . I know its a business site its not my mistake. My client want this keyword up for site so, I am using. I would be very pls if you give me link with this keyword. Pls reply me here. Thanks.

        • I'm usually a sympathetic person, but not in this case. Your job is to promote your site, mine is to provide an interactive reader community around blogging (human and technical sides). Readers want to visit commentator blogs as part of social networking; they use google search for products and services.

          We welcome your comments on your own time, using a blank url or better yet, why not start your own free Blogger or WordPress blog.

  28. It's me the girl who desperately wanted a scroll-box under her blog button. I've written my account of the events in question in lovely blog post.
    http://wp.me/pjsYu-ez
    I wrote the happenings the best I could remember considering this happened over the course of a few days, the whole thing is pretty funny if you ask me…and you will find out just how much I admire Blogging With Success, it is definitely a one stop blogging spot.

    Thanks again!

    • Wow, your account is pretty funny. Thanks for grabbing our button and the nice compliments. I guess you've forced me to use my free WP test blog!!! Watch out I'm becoming a 'triple threat' — a little knowledge is dangerous.

  29. What is a Grab button

    • The link in reply to Sebastyne explains it. but in a nutshell it's like a 125 x 125 ad with a link to you blog. The purpose is to have your readers and friends copy the code to create a widget to display the button on their blogs. I encourage my blogspot readers to grab this button if they find my tips useful.

      <img src="http://i282.photobucket.com/albums/kk272/SBA_jpgs/bpwebnewstips.png"&gt;

      Also see the one in our side bar for this blog — it's appearing on quite a few sites already. Yours could talk about your blogging tips and tech news.

  30. OMG, you never believe this. I was just like 30 minutes ago thinking that I need to dig up that article on Blogging With Success about creating a button for your blog… And I updated my email inbox and there it was as an RSS feed! Are you mind readers or what?!

    • Well, if you read some of the comments on the tutorial for WP.org and Blogger then you'll know we often have to read minds to interpret the problems! Sometimes it's like writing in invisible ink when the comments editor eats the html that visitor is trying to send you.. lol

      Here's a quote "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?)"

      Glad we could read your mind on this one. There are quite a few related links but here's the main one http://bloggingwithsuccess.net/grab-button-advert

Trackbacks

  1. [...] have done it without Ursula from Easy Scraps, Jenishell, Marinda with Lady Cookie Monster, and Blogging with Success. Thanks [...]

  2. [...] code I picked up a few different ways.  Blogging with Success showed me how I could convert my HTML code to text and use it.  Problem was, this tutorial [...]

  3. [...] code I picked up a few different ways.  Blogging with Success showed me how I could convert my HTML code to text and use it.  Problem was, this tutorial [...]

  4. [...] on a solution for bloggers on WP.com. Pulling the wool over WP's eyes ,we found the solution for displaying the scroll box, getting around the "no html" limitation. Update: Amber has not posted [...]

  5. [...] like to thank Blogging With Success for the tutorial on getting grab-buttons to work on [...]

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

  7. [...] 4.   If you are a WordPress.com blogger there’s also tutorial for Displaying Grab My Button Code in WordPress.com [...]