A Small Orange Affiliate Tools: How To Use Footer Badges

Howdy! Not too long ago we released our A Small Orange Brand Guidelines for customers and affiliates alike in case they wanted to use the A Small Orange Logo on their web properties. Today, I wanted to quickly run down how you can use one of our beautiful footer badges and embed your affiliate tracking link with HTML.

First and foremost, before we get started you are going to want to head over to our guidelines page and download the .zip files for the footer badges. The badges look something like this:

Also, if your not affiliate you can quickly and easily sign up here.

Now let’s get started…

  1. Once you have your image, upload it to a directory on your site (if you have WordPress, you can easily upload it to the media library and copy the link)
  2. After Step 1, you are going to want to open a text Editor on your computer (say TextEdit for Mac or NotePad for PC).
  3. Then we start with some basic HTML. Let me give the sample code and then I will break down what you need to change to make sure it works for you:

<a href=”http://asmallorange.com?a_aid=REFID”>
<img src=”http://yoursitehere.com/images/Hosted-by-ASO_3.png” alt=”ASO Badge”</a>

STEP 1: replace the link above with your affiliate tracking link:  <a href =”your aso tracking link here”>.  Once people click on the badge, they will be sent through your affiliate tracking link.

STEP 2: for the image source (img src): insert the link for where you uploaded the image on your directory (as mentioned in the very first step). This will be where the badge is hosted.

STEP 3: Put in the alt text describing the element, so when someone drags their cursor over the image, it gives a small explanation (this is also useful for if there is ever a case your image link is broken, it will still tell the user in text what it is supposed to be).

       4. Copy + Paste  your code in the footer of your website, where you’d like the image to show up. That’s it!

Need more help?

Perhaps you want to make sure your badge is aligned right, the perfect size, etc. for your site. Check out W3Schools.com for more tutorials on how to tweek your code to display how you want it.

Save 25% off your first month with us on any hosting package.
Just use the coupon code “FACETWEET” when you sign up with us.
Get started here!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>