Uploading a new blog button without changing the button code

UPDATE 2017: Due to Photobucket's banning on third-party hosting, this will no longer work on Photobucket unless you pay for the highest-tier account (which you shouldn't bother). This will still work if you use a dedicated image hosting service — I chose Amazon S3 for now. You can use the same tips below, which I've updated to show my new image URLs.

If you have a blog button or badge (a little square logo advertising your site) hosted on Photobucket, you might have been in the tricky position of wanting to change the button without making everyone who has your button already change the button code on their blog.

There is a relatively simple(ish) way to make it a bit harder on your end but easy-peasy and seamless to everyone else. The next time their pages load, your new button will appear, with no effort on their part. Much easier than sending out pleas to change the code, yes?

The trick is to upload your new button to your web hosting site using the same file name, which will therefore give it the same URL as the old button.

Note: This trick will not, as far as I know, work if you've uploaded your image to Blogger or Flickr, and I don't know if it works on WordPress-hosted images. Which frankly is a good enough reason to advise you to use Photobucket[your own hosting service] for important images, so you have more control. If you host your own images on a server, then the following tips can still apply — but you probably already knew how to do this.

How to keep a direct link in Photobucket[your own hosting service]

For instance, here is the HoboMama.com blog button:



Here is the direct link for that image:
http://images.hobomama.com/hobo-mama-button-200x200.jpg

The piece of information after the last slash is the name of the image file, so hobo-mama-button-200x200.jpg

If you wanted to upload a new picture but keep the same direct link URL, here's what to do, in this order (very important):

1. Create the new image in your photo-editing software and save it with the same name as the original (e.g., hobo-mama-button-200x200.jpg).
2. Go to Photobucket[your own hosting service] and find the image you want to replace. Click "delete" on the old image, acknowledging that you will be breaking all the links that are looking for this image (but only temporarily!). Make sure you have a backup of the image on your computer in case you want it in the future. (Optional: You can always re-upload it to Photobucket[your own hosting service] with a different file name [for instance, rename it hobo-mama-button-200x200-archive.jpg before uploading] if you want it archived online.)
3. Upload your new image to Photobucket[your own hosting service], in the same folder as the old one. The new direct link will be the same as the old one (http://images.hobomama.com/hobo-mama-button-200x200.jpg), as long as you were careful to name your file the same as the old file.

It's important to delete the old image before uploading the new image. Otherwise, Photobucket[your own hosting service] will rename the new file slightly to differentiate between the two and the direct link will be different.

And, again, if you have different folders within Photobucket[your own hosting service], make sure to upload to the same folder, since that becomes part of the URL as well (Elements/ in my example).

This trick comes in handy for regular blog buttons, but also for advertisements and giveaways. Say you wanted to advertise on someone else's blogs, such as for your Etsy shop. You might make your ad seasonal but do all the changes on your end. So, you could create an ad with summer products, and then easily switch it out to winter products later in the year. As long as you kept the file name the same (e.g., hobo-mama-ad.jpg) and deleted the old ad image, you wouldn't have to have your advertisement hosts change their code at all to be current.

Or, for a special giveaway event, such as some review blogs do — a baby shower bash or a holiday-themed event — you could name your button for that something like hobo-mama-reviews-giveaway-event.jpg and then just keep updating the image but under the same name each time. That way, your event button on people's blogs would never be out of date!

Hope that helps, and that all your bloggy fans will appreciate the new image that magically appears on their screens!

How to make a blog button grab box

If you have a blog button or badge now (a little square logo advertising your site), do you want to know how to make a little box so people can grab the code? Like so:

<div align="center"><a href="http://www.HoboMama.com" target="_blank" title="Hobo Mama"><img src="http://images.hobomama.com/hobo-mama-button-200x200.jpg" width="150" height="150" alt="Hobo Mama: A Natural Parenting Blog" /></a></div>

It's actually really easy. All you need to do is figure out the code for the button, and then place it within this placeholder code:

<form><textarea rows="5" cols="20" readonly="readonly"> INSERT BLOG BUTTON CODE HERE </textarea></form>

You can alter the size of the grab box by experimenting with different numbers for rows and cols (columns). The "readonly" command is optional, but it prevents people from accidentally deleting or editing the code in the box as they're copying and pasting.

Tomorrow I'll give you a tip on updating your image without making your fans change their button code. And if you missed yesterday's post on creating the code, check it out here.

How to make a blog button code

Do you want a blog button or badge, a little square logo to advertise your site, business, or giveaways? Once you have a basic image uploaded to an image host, it's easy enough to figure out the code.

Here's my basic button code:

<div align="center"><a href="http://www.HoboMama.com" target="_blank" title="Hobo Mama"><img src="http://images.hobomama.com/hobo-mama-button-200x200.jpg" width="150" height="150" alt="Hobo Mama: A Natural Parenting Blog" /></a></div>

From the top down, here are the elements in my button code. You can feel free to copy what you like.

1. I've chosen to center mine, which is the opening and closing div tags.
2. Then I have a link to my website: <a href="http://www.HoboMama.com" target="_blank" title="Hobo Mama"> I've chosen target="_blank" so that it opens in a new window when someone clicks on it, and I put my website name in the title tag, so that anyone hovering a mouse over the image will see what page it links to. (You can try it on the top image to see what I mean.)
3. Now it's time for the real point of this code, which is the image for the button itself: <img src="http://images.hobomama.com/hobo-mama-button-200x200.jpg" width="150" height="150" alt="Hobo Mama: A Natural Parenting Blog" />
   • The src tag is where you put the direct link to your button. (I recommend using Photobucket or [Photobucket no longer possible as of 2017] self-hosting the image, because you'll have some control over changing the file in the future if you ever want to alter the image without changing the button code.)
   • The width and height are how big you want your button to appear, and of course the people who grab your button can alter the size as they wish. A 125x125 is a good standard size. I made mine a little larger — for attention, I guess. You can see from the file name that the button image is actually 200x200, so that fans could make the button as large as that without degrading the quality. I recommend making your button image similarly a bit oversized in case of zealous fans!
   • The alt tag lets you give your image a name, so that it will show up in search engine results. I recommend putting a good, brief description of your blog here. It will also help fans who have lots of buttons keep track of which one's yours when they're looking at the code alone.
4. Then make sure to close off all the tags you opened: </a></div>

Make sure you test out the button before giving the code to anyone else. Try publishing it in a blog post or your sidebar and make sure the image shows up the way you want it, and that if you click on it, it goes to the right page. Tomorrow I'll have a post on putting your code into a grab box so your fans can get your code for themselves!