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...

affiliate-link-code-1

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:

affiliate-link-code-1

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.

html code example

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!

About Lynn Terry

Lynn Terry is a full-time Internet Marketer with over 17 years experience in online business. Subscribe to ClickNewz for the latest Internet Marketing trends & strategies, Lynn’s unique case studies, creative marketing ideas, and candid reviews…moreยป

Discussion

  1. 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.

  2. Thanks ! This could not have come at a better time, I just signed up for Commission Junction yesterday. This post and the next will save me much frustration. ๐Ÿ™‚

  3. 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:)

  4. Where were you when I was learning this stuff? This is a wonderfully clear explanation of link structure. I'll be passing it on for sure.

  5. Lynn as always you provide great help. Thanks for the resource on the html tags. I needed that. I appreciate all you do to help

  6. Alex Newell says:

    Very well chosen topic - as others have said this is the kind of basic stuff that stops beginners in their tracks!

  7. Oh my Lynn, I soo glossed over this post BUT I learned it at NAMS3 :)This was my 2nd favorite class you taught at NAMS and I implement what you taught in those courses every day.

  8. Loretta says:

    Great tutorial Lynn! Sometimes we take for granted that we know how to write HTML and forget to include that in our instructions.

  9. Mike Paul says:

    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!

    Mike

  10. Lynn, I haven't used Commission Junction yet but I am going to give it a try. Thanks for the good information.

  11. This is what I call in the trenches training. I really needed this Lynn,thanks a bunch.

    Rozina

  12. Keith Davis says:

    Hi Lynn
    Noticed that you say "I like the Commission Junction network at CJ.com."

    Is that the place to go to find affiliates?

    Sorry to sound a little dim but I'm only just getting into the idea of affiliates.

    • Hi Keith,

      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 ๐Ÿ˜€

  13. 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!

  14. 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.

    • Hi Sharyn,

      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!

  15. Thank you Lynn, Great information. Would appreciate if you can also show us how to CLOCK the links. What is the best way to do it? If it is too complicated can you suggest best clocking software?.

    • 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 ๐Ÿ˜‰

  16. Michelle says:

    In most cases I just copy the code and replace stuff like url and keywords, and viola! Iโ€™m not too fond of these codes as you can tell but they are handy to know.

  17. 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.

  18. Agilworld says:

    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.

  19. 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 Bo,

      I'm not sure what you're referring to. I'm not familiar with Scribefire. I would go to their site and look for a support forum, or helpdesk to ask them for help on that.

      If you can't find help from them directly, search on Google for your issue. Usually someone else had the same problem and has discussed the solution somewhere. ๐Ÿ˜‰

  20. 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.

  21. 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.

  22. 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.

    Hope I'm making a point here.

    • Did I miss something? There's nothing that indicates what you do to cloak your affiliate link................

      • Haha no you didn't... But I put some HTML on that comment and apparently HTML is not allowed on post comments. Hope Lynn moderates that comment and shows the code somehow.

  23. nicely explained lynn. I will be interested in deep linking and best way to cloak links like url redirect script etc
    thanks
    Rob

  24. Kris from Make Money Online Free says:

    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.

  25. Wow! Thank you so much for the step by step! I feel more positive about getting started already!

  26. Michelle says:

    Hi Keith,

    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 ๐Ÿ˜€

  27. Ronda Kay says:

    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!

  28. 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 ๐Ÿ™‚

  29. Peter at Business Website Template Reviews says:

    Hi Lynn,

    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.

  30. Rob Beer says:

    Thanks for the helpful article. I've already implemented the ideas mentioned.

  31. Hi Lynn:
    I can't thank you enough for sharing this information. I've been all over the internet for hours trying to figure something out.

    How do you include a code like the above into a redirect or even just an email. It always starts the code with http and I'm not sure of where to end the link? Do I include the quotes or not?

    Thank you for your help.

    Janie

  32. 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:

    Thanks for taking a look Lynn.

  33. cool tips, thanks for sharing this post Lynn. it will help a lot I just wanted to sign up to a few affiliate program and now it will b much easier.

  34. I really like the concept of affiliate linking. Next article should be on how to get others to accept them (besides the pay). That's where I have difficulty.

  35. I love you! Thought I'd never get my amazon link to open in a new window!

  36. I was wondering how I would take a jpg banner and add the affiliate link in it?
    Thanks Paul

  37. 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! ๐Ÿ˜‰

  38. Hi Lynn, How are you... I am new to this internet marketing business..

    So i want to ask you since you are 15 years experience, how much does you make out of this internet marking job a year... I want to know about the possibilities. Thanks

Leave a Reply to Sharyn Cancel reply

*

Get My Internet Business & Smart Marketing Diaries - Free!