HTML Tips: Anatomy of an Affiliate Link

It's a well known fact that I'm a Super Affiliate, and that I write HTML code in my sleep. But nothing I do in my work routine is rocket science. I barely even know how to work a VCR. (Yes, I said VCR.) I consider myself a "Lazy Affiliate". So don't worry - this is going to be easy and fun. 😉 Ready? Here we go...

Let's back up and I'll show you why, how and where I got this code...

An affiliate link let's you recommend a website or a product online, and earn commission for any referrals you send. It tracks the traffic, and action or sales they take on the site, and you get paid for that.

For example, if I tell you about a cool new photo canvas I got online from CanvasPeople, and you decide to click on my link and get their Free Photo Canvas Offer yourself, I earn a $10 referral fee.

To get affiliate links, you sign up for affiliate networks or affiliate programs.

I like the Commission Junction network at CJ.com. You go to CJ.com, register and create an account, then sign in. You'll go to Get Links and choose advertisers or product types you want to promote, and apply to their affiliate program. Once you're approved, you'll be able to get affiliate links to promote their products.

Here's a video that shows exactly how I got the code that you see above:

It's not as bad as it looks – I promise.

But if you're new to this and you're trying to share an affiliate link in an email, on Facebook or Twitter, or you're trying to put it into a blog post or web page editor that was supposed to make creating web pages easy... you'll be pulling your hair out. If you just copy & paste that HTML Code, it won't work.

You've probably discovered this already.

You need to know which part of the HTML Code to use when, for what –and why...

Affiliate HTML 101

Before we start, you'll want to open and bookmark this link to a Complete List of HTML Tags. You can refer back to that anytime you get confused, or want to look up a specific HTML element.

We'll go back to the HTML code we looked at earlier for reference:

The A tag is used for creating a hyperlink, the href specifies the URL you're linking to. So the A HREF part of the code above is referencing the actual affiliate link, which you see in quotes.

It requires a closing tag which you see at the end in red – that tells the browser where to stop the hyperlink. What you put in between those A tags is what you're linking the URL to – whether it's an image or text.

Note: this is not going to be color coded when you go to do this on your own LOL

The blue code starting on the third line is the image that I'm linking to. In this case it's an affiliate banner image. IMG SRC means Image Source – or the source/URL of the image you want to make clickable. Your images have to reside somewhere on the web so people can see them. Once you upload them, they have their own URL – so the image source is the URL of the image.

Target=_blank (in red on the 2nd line) tells the link to open in a new browser window. If you remove that part of the code, the link will then open in the same browser window.

The width, height, ALT and border tags are all optional. The ALT tag is for Alternate Text. If you're visitor has images turned off, or they're blind and their computer is reading the page to them, this is the alternate text that will be used. It also shows in most browsers when you mouse over the image.

You can manipulate the HTML Code in various ways. You might want to link to text instead of a big banner ad. You would simply remove the image code, and put your text in it's place.

This is called Anchor Text, which is basically the clickable text on a web page. You'll use this to create a Text Link within a blog post or article.

If you're creating a web page or a blog post, and you're not working in code - you're using a WYSIWYG or Visual Editor instead - then you can't paste in all that A HREF code stuff.

You'll have an icon or link in your editor that you click to add a hyperlink.

You highlight the text you want to link to, then click the linking option, and it asks you for the URL or affiliate link. That's going to be everything within the quotes in the A HREF tag of your affiliate code. You'll see it in black in our example code above – that's your actual affiliate link. You can use that link in an email, on Twitter or Facebook, or any other place that you can't use HTML code.

You can also switch into code mode (the HTML Editor) on most programs, WordPress included, and paste in the HTML code. Then you can switch back and finish formatting your page/post in your visual editor.

Don't gloss over on me yet! 😉

I have another example to share with you. This time on creating affiliate links for products at Amazon.com. I'll show you how to use better or larger images, and a live example of how great an Amazon affiliate link can really look if you know what you're doing.

But I'll save that for the next post, and we'll talk about deep linking as well because that can really increase your conversion rates. Meaning... it will make you a lot more money. 😀

Check back for Part 2, or subscribe by email below so you don't miss out. And while you're waiting, get out there and share some affiliate links!

Best,

p.s. This is the part of Affiliate Marketing that gets left out of most ebooks and blog posts. If you want to learn the nitty-gritty how-to of becoming a successful affiliate, you should attend the Niche Affiliate Marketing Workshop in Atlanta. I teach there twice a year, and it's a great opportunity to learn hands-on!

Discussion

Lynn,
Of all the things I have read and watched, you are the first to share this kind of how-to information. Again, you show you know this stuff and truly want people to learn. Thanks for all your great information.

Wow, I remember exactly 4 years ago when I bought an ebook that explained exactly what this blog post explained... and that turned my affiliate marketing around! What a helpful, clear, useful post!

I'm sure lots of newbies would also like to see how to make their affiliate links a page of their current site, for example, I use this link to promote the aforementioned canvas: http://www.raisingsmallsouls.com/canvas.html. Obviously, some ftp knowledge is necessary to do this.

Thanks for cutting through the fluff and getting straight to the profitable point, Lynn:)

Great info, Lynn. Sometimes those of us that have been around for awhile forget about the "basics" of doing things online. This is one of those basics, but it's absolutely vital to anyone that is doing any affiliate marketing online.

Thanks for continuing to keep it real and breaking it down so that EVERYONE has a chance to succeed!

Commission Junction is an affiliate network, and just one of many. You'll find a variety of merchants at CJ.com, and you can join their affiliate program right there through CJ. So the short answer to your question is: yes 😀

Good advice, Lynn. As Mike Paul mentioned, many of us who have been in the game for a while often forget how daunting things like this can be if you're a newb to internet marketing. Nice work making it easy for everyone!

Lynn, this is incredibly helpful. I've just started out and have wasted more time trying to figure out techie things like this when I could be focusing on writing articles and strategizing. I'm looking forward to your next post since the quality of the images has been a problem for me. Putting ads in sidebars has also been a challenge since there's no WYSIWIG option. I just joined your Elite group, so I'm looking forward to brainstorming with everyone as well.

I prefer to place affiliate links & promotions in the content area of a web page or blog post. Sidebar ads tend to get overlooked, and never convert as well. You really want to make it part of your content like you see in the examples both here and in the 2nd post in this series.

Glad you joined us at SSWT - I look forward to brainstorming with you there!

I think you mean cloaking? There are a number of ways to cloak your affiliate link. I usually use a domain name redirect, or an HTML redirect. I've discussed this before, but may write a new tutorial on those options in an upcoming post. I get asked about it a lot 😉

Its easy to post links in software like Xsitepro and others but you still need to be able to manipulate the code at times. It took me a while to learn how to do links for images and how to separate parts of linking codes from affiliate vendors. A very needed tutorial for anyone new to coding links.

Good advice, i have learned more with read your article and watch video. before, i've used Javascript code and linked of big banner, but unfortunately 'OnMouseOver' attribute of A tag didn't work properly.

Hoping you can help me, since you're good at code. Is there a site to go to that shows what code should be on different pages?
I'm trying to post from Scribefire, and when trying to add my new site, I get an error that says XML-RPC services not enabled. It tells me the file to change, and I've changed permissions, but when I go into the file itself, I don't know where to enable it. Sorry, this is to confusing. Thanks a bunch.

Hi Lynn ,
I am a newby in this matter ... but I got a question. I've just got my Domain ... also my hosting ... and I plan to use this site to promote affiliate program products ... The question is about CJ.com ... Cj.com ask me for my website but at the moment my site is empty ... CJ will approve my application anyway ?? or not ?? or what do I have to do first ??
What are the process if my website is only to promote things ... ??

I remember the first time I tried to paste code into a WYSIWYG editor! I must have spent an hour trying to figure out why it wasn't working. It's sometimes the simplest things that beginners get hung up on and cause the most frustration. Thanks for a great post.

Great info Lynn! I noticed in the video when you got your link and then copied it, you did not click on the boxes for encrypt link, open in new window or hide tracking code. Can you explain why? Thanks a bunch.

Excellent post, Lynn. Maybe you forgot to mention how to cloak affiliate links to avoid smart shoppers hijacking your hard earned affiliate commissions. This happens a lot nowadays. You DON'T want your affiliate link to show up in the status bar.

I cloak my affiliate links with the onClick tag like this:

And voila. What the above does is prevents your affilate link to show up in the status bar and instead it shows your vendor's URL. So it's less obvious that your are refering people with your aff link.

It works well, no need to use unprofessional URL shortening services such as Tinyurl.com and the like. Yes, it shortens, but boy, does it look ugly.

I like it. You don't need to be a programmer to mask your affiliate link in a pic or text you gave a base explanation of how to do this. Anyway good post and since the majority of my income comes from affiliate marketing I will be subscribing to your blog.

Commission Junction is an affiliate network, and just one of many. You'll find a variety of merchants at CJ.com, and you can join their affiliate program right there through CJ. So the short answer to your question is: yes 😀

Hi Lynn - as all have said - fantastically helpful post, esp. the color coding LOL

I have question about the quote marks though, when extracting a simple URL to use in blog posts. In the top example, you have the quote marks in black, to be included, but when I do I get error. without quotes, starting with the http: and ending with my affiliate number it seems to work. Are the quotes needed? Thank you!

Lynn Terry you are bloomin' brilliant! I have spent too much time trying to work all this out and I should have known to come to your site at the start! LOL. I think that I have things working now, but my question is this. If you're not sure if what you are doing is right, how can you check that you have in fact done it correctly?
I can't see any of the Tracking ID numbers in the page URL - are you supposed to? I'd hate to think that I had done it right, but in fact wasn't getting any credit/money for those items sold.
Think I'll need to go and lie down in a darkened room.....
Caroline 🙂

This is fantastic. Thank you. I've been using CJ.com for some time and recently became concern with CJ saying I must use the ENTIRE HTML as is even when simply getting text links. I work in a visual editor and prefer writing my own anchor text. Therefore, I've been extracting only the href portion and not the img src portion. I had a brief spell of worry that my links may not be working as fully as they should, but you've put me at ease with this article. Thanks a lot.

Lynn:
I forgot to share the code with you in the above message. This is the code that I'm trying to manipulate so that I can place it in emails as well as redirects. If I start it at http and end it at .html (without quotes) it doesn't work:

If you need specific help creating certain links, or with HTML code - or any technical issue, come by the forum and ask: http://www.clicknewz.com/members/ It's the fastest way to get your questions answered and get help with anything related to your online business! 😉

Welcome to Clicknewz!

Lynn Terry is a Professional Blogger, Super Affiliate, and full-time Internet Marketer with over 18 years experience in online business. ClickNewz is where she shares creative marketing ideas and... more »