How to Create an Image Button (Technical Tuesday)

Today, I'm going to teach you how to turn a book cover into a clickable button you can give to your fellow bloggerites blogarians your posse. Don't worry if you don't have a book cover. You can use these steps to create any kind of clickable image for an award or special giveaway.

Rebecca Talley asked, "How can I make a button with an image of my book that others can put on their blogs?"

Quick Steps

I've created a tool to help you. Just fill in the form on the left and click Generate. You can preview your button in the middle section. If it looks good, copy the HTML code from the right and paste it into your website or blog. Done. By the way, you can make changes to the form and regenerate as many times as you want, so go ahead and play around.

(Note: This form may not work in an RSS reader. You'll have to visit the blog to use it.)

---

Settings Image URL Link URL Message Options: Show Message Show Copy Text Box	Preview	Code
Enter the details for your button.	Preview your button. Be careful when clicking on the button, it will take you away from this page (just like your real button will).	Copy and paste the code into your blog or website. Enjoy.

---

Longer Steps

If the tool didn't work for you (or you want more information), don't worry--I got your back. I'm going to cover all the steps you need to do to make your button.

Find Your Image

First, you're going to need an image. Follow the instructions on my previous post to find and re-size your image. Your final image should probably be between 125 pixels and 175 pixels wide. If you are unsure what size you need, try 150 pixels.

Since Rebecca asked the question we're going to use the book cover of her latest release The Upside of Down. Here it is:

Post Your Image Online

Your image needs to be publicly available online.

The very best place for it is hosted with your website, but different companies have different ways to get files on the internet. If you know how to do this, then do it and skip the rest of this section.

If you don't know how (or don't want) to upload your file to your website, I've got the next-best thing. We're going to upload it to Google Photos. (This used to be called Picasa Web Albums. Google is in the process of changing the name, so you'll still see it called both.) If you have a Google account or a Blogger blog then you're good. If not, you could create one, or you could use any number of other photo hosting sites.

Visit Google Photos and login if you need to. Click to "Upload" your image, then find the file on your computer and upload it. When you upload an image you can choose what album it is placed in. I chose to create a new album called "Public Album", but you can call yours whatever you want (or put the image in an existing album). Then click OK.

Now that the image is online, we need to make it publicly available. If you tried to make your button right now it would work for you because you have access to see the image, but everyone else in the world will just see a missing picture. That's not good.

In Google Photos, you should be viewing the album you just created. If not, navigate to it now. Select Actions, then Album Properties. This will bring up a window with the details of your album. The only thing you need to change is the Visibility setting. Change it to "Public on the Web". This means that anyone can view the pictures in the album without needing to login. They will also show up when people search.

There's one last step, you need to find the URL of your image. In Google Photos, click on your picture to view it. In the right sidebar click on "Link to this Photo". This will open up a couple text boxes and some settings. Make sure that you Select the Size of "Original Size". Then check the option "Image Only (no link)". Now, the information you're looking for is in the "Embed Image" field. Copy the text from that field, and paste it into notepad or Word for safe keeping during these steps.)

The Link for our example image is: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpTseUZRqsSVUHh2VKE2-HTSYvU5aLvYmhQdmgtMmHT8cI3ypHGaF7qd0WcP1Qv4bckuozQTpHLgLZiZe_2uJyEQ8RK8trh3lixMSB8FBi_tDospNlVFddhySZAQutXY5SMwy97NOvTc/s800/upside%252520of%252520down.jpg

Wow! That's ugly and long, but it works and the people who view your site won't have to see that link. They'll just see your awesome image.

Decide Where You Want the Button to Go

When someone clicks your button, where do you want them to go? Open up an internet browser and go to the page. Then copy the full text out of the address bar. Again, paste this into the notepad or Word doc you used in the last step.

For our example, we have several options.

• Her writing blog.
• Her website.
• Her book blog.
• The sample prologue or chapter.
• The amazon purchase link.
• A link to the teaser trailer on YouTube.

We're going to use the link to her book blog, but there is no wrong answer. Here is the URL: http://theupsideofdown2.blogspot.com/.

Use the Tool

You now have the information you need to use the tool. Just copy and paste the information from your notepad or Word document into the tool. Put the image URL (from Google Photos) into the Image URL field. Put your destination URL (the blog address) into the Link URL field. Make sure these links include the full address that means it has to have the "http://" part.

Click Generate and see what it looks like. That's nice.

<a href="http://theupsideofdown2.blogspot.com/"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpTseUZRqsSVUHh2VKE2-HTSYvU5aLvYmhQdmgtMmHT8cI3ypHGaF7qd0WcP1Qv4bckuozQTpHLgLZiZe_2uJyEQ8RK8trh3lixMSB8FBi_tDospNlVFddhySZAQutXY5SMwy97NOvTc/s800/upside%252520of%252520down.jpg" /></a>

Extra Options

The tool has some other options you can try.

If you enter a Message and check Show Message then it will display the message under the image. You can use this for short blurbs like "Buy Today", or "Ends Sept 24th", or "Available in Oct".

If you check "Show Copy Text Box" then a text box will be created under the image with the code people need to copy and paste to get your button on their site. This is useful when you post your button on your own site. Anyone who wants to grab your button can copy the code and use it.

Go ahead, play around with the options and see what works best for you.

There you go, a quick tool for creating image buttons for blogs and websites. If you use the tool let me know in the comments. And if you have any other technical questions, send them over.