This is another post for my fabulous Etsy shop customers who are dying to know how to add their linky button and make it connect to their site. It’s a lot like adding social media buttons, you just need a few basic pieces of code.

Step 1 – Get what you need

There are two basic parts to any code that hot links an image to a web page:

1. Your image
2. The URL for the page you want to direct people to when they click on it.

Start by visiting the page you are linking to and grab the URL from the browser bar. This could be your Etsy shop, your blog home page, a specific post on your blog, your Facebook page, etc.

For this example I’m using my Etsy shop.

I also need to tell the browser where to find the image for my button. Where you host the image will depend on your blog platform.

WordPress

1. In the Dashboard go to “Media”  and “Add New”
2. Choose “Select Files” and highlight the file name of your button.
3. Once it uploads, copy the “File URL” onto your clipboard and “Save All Changes”

Blogger

Blogger is a HUGE pain in the rear because it doesn’t self-host the images. That means you have to use a photo sharing site like PhotoBucket, Picasa or Flickr. Each one of them has a different process for uploading and finding the link. I think the easiest to use is PhotoBucket – so if you’re not wedded to a site yet – open a PhotoBucket account.

Once you upload your image to the photo sharing site, you need to find the “File URL.” This is in different places on every single site. A lot of times you’ll have an option to “Share” your photo – the file URL is often found there (like in this example from PhotoBucket).

Even though I can’t tell you where exactly to find your image URL, there is a fail safe way to know if you’ve got the right one:

1. Once you have the URL, open a new tab or window in your browser.
2. Paste the image URL into the browser bar and hit “Enter”
3. If you have the right URL, your image will appear in the top-left corner of the window.

Step 2 – Build Your Code

Now that you have the Page URL and the Image URL – you are ready to build your HTML code. It’s the same for WordPress and Blogger and any website in the world.

Get to where you want to have your button appear – if on a sidebar you’ll want to edit a Gadget or Widget – you also need to be in HTML mode.

Now all you need to do is cut and paste this code below:

<a href=”YourWebPageURL“><img src=”YourFileURL”></a>

After “href” – paste the URL you are linking to in between the quotation marks. Make sure you leave the quotation marks there – they are part of the code. Do the same for your image after “src”.

It will look something like this:

<a href=”http://www.etsy.com/shop/moxietonic?ref=si_shop“><img src=”http://i1177.photobucket.com/albums/x347/moxietonic1/MoxieTonic_ADButton.jpg“></a>

When displayed it will look like this:

Step 3 – Adding a Linky Box

Now that you know what pieces of information you need to customize the link and the image, you can cut and paste this code, which will make the linky box appear underneath your button. Just substitute out the fillers for the Link and File URLs and you ‘ll be set.

<center><a href="YourPageURL" target="_blank" title="Click to link to ENTER YOUR PAGE TITLE HERE"><img border="0" src="ImageURL" alt="Title of your Image" /></a></center>

<center><p><textarea rows=”4″ cols=”20″ name=”Button code-source” readonly=”readonly”><center><a href=”YourPageURL/” target=”_blank” title=”Click to link to YOUR PAGE TITLE HERE“><img border=”0″ src=”YourImageURL” alt=”Your IMAGE title” /></a></center></textarea></p></center>

My code would look like this:

<center><a href="http://www.etsy.com/shop/moxietonic?ref=si_shop" target="_blank" title="Click to link to Moxie Tonic on Etsy"><img border="0" src="http://i1177.photobucket.com/albums/x347/moxietonic1/MoxieTonic_ADButton.jpg" alt="Moxie Tonic Button" /></a></center>

<center><p><textarea rows=”4″ cols=”20″ name=”Button code-source” readonly=”readonly”><center><a href=”http://www.etsy.com/shop/moxietonic?ref=si_shop/” target=”_blank” title=”Click to link to Moxie Tonic’s Etsy Shop“><img border=”0″ src=”http://i1177.photobucket.com/albums/x347/moxietonic1/MoxieTonic_ADButton.jpg” alt=”Moxie Tonic Button” /></a></center></textarea></p></center>

And it’s going to render like this:

Trouble Shooting

The image won’t display

The number one cause of this problem is failure to get the right URL for the image. Test your URL in a blank window – if it doesn’t pull up your image, you’ve found your issue.

Go back to your photo sharing site and look at your sharing options. Make sure you are only sharing your image, not the album. If you cannot find a URL for your image, try right clicking on the image and choosing “copy link location”. You may not have that exact option (it depends on your operating system), but you’ll have something close.

The link doesn’t work

This happens most often on Blogger. For whatever reason, Blogger will add extra symbols to your URL that break the link. Go into your Gadget and “View” the HTML code. If you see a bunch of numbers and percent signs after your URL – delete the entire url and cut and paste it again. The clean-looking URLs – like http://facebook.com/moxietonic – is what you want to strive for.

This same thing can happen to the Image URL – so be on the lookout.

If these two suggestions don’t solve the issue, send me an email with your code and I’ll take a look at it.