10.10.2010

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:

Visit Hobo Mama Natural Parenting Blog button for HoboMama.com


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!

2 comments:

Bella @ Bella before and after said...

Hey Lauren, I followed your instructions completely, and verified, the old url, with the new one, to make sure I saved my new button IDENTICAL ti the old one. EVerything was saved correctly on Photoshop, my old picture was deleted, and my new one is being displayed, BUT it's not updated on my blog, I even tried adding it to a gadget to see if maybe it would upload correctly there, BUT it's still bringing up the OLD picture, even though it's deleted off photobucket.

Do you have any idea why this is, obviously I can just create a new button code, BUT this would have been perfect, so it gets updated everywhere automatically!!!

I'm totally bummed, BUT the problem is PHOTOBUCKET, is still displaying the old pic, even though the url code is showing the new one, in my album.

Any suggestions???

Bella :)

Lauren Wayne said...

Hey, Bella! This happens to me with Photobucket as well — your computer stores a cached version of the image so it can be lazy and not rebuild it from scratch on each reload. You have to kind of give it a kick to make it rebuild it. You could try emptying your browser's cache, though I usually prefer just to refresh the page a zillion times till it reloads correctly. ;) You can also (a) wait a little bit and look at it later (like, tomorrow) to see if it's updated and (b) try it out on a different computer (maybe someone in your family or at a library, etc.) to verify it's loading the new image everywhere else. Or just ask someone if they can look at the image and tell you if they see the old or the new one; I can help if you want to give me the image link! If none of that works, let me know.

Post a Comment

Related Posts Plugin for WordPress, Blogger...