Build Your Own Business Website header image

How to Place Affiliate Ads on Your Site

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, a member asks how to place affiliate ads on a website. We suggest choosing between using a widget or a plugin to display affiliate ads or banners. The benefit of the AdRotate plugin is that it gives you information about the ad such as impressions and clicks and allows you to show the most successful adds more often.

Video Transcript

Rick: Okay and so the last question that we’re going to take here is from Lewis. Lewis, I’ve just undone your microphone. Good morning, Lewis.

Lewis: Good morning, Rick and good day.

Rick: Hey you know, I can’t hear you very well. Can you shout into your microphone or maybe turn it up or something…

Lewis: Okay, good day to you Rick and also, good day to Dennis.

Rick: Actually you know, there are 3 of you down under here because Brian is from New Zealand. So this is the down under hour.

Lewis: Oh very good.

Rick: Okay so you asked what’s the best practice putting in the Host Gator icons and stuff like that right? You’re referring, I believe, to this thing like on my blog? These affiliate banners?

Lewis: Yes, correct.

Rick: Okay and what do you mean by best practices?

Lewis: Well obviously, there’s a right and a wrong way. And as you’ve just said to Dennis using tables is not the right way to go and I thought there might be a way that I could stuff this up so I just wanted to know what you suggest.

Rick: Okay well, I suggest one of 2 things. One of them is what I’ve done right here and this is inside of a text widget and all I’ve done is I have floated the images, left with padding. And so you know, if they weren’t floated left, they would all just stack on top of each other but because there’s enough room for them to be side by side and because one image, each image is floated to the left, this one goes as far over as it can. This one pops up, this one goes as far as it can, this one pops up. And this is all inside of a text widget.

However and you know, for a down and dirty putting it in, that’s great. But you could actually use a plugin to do this that will give you information. And I’m going to show you that. I can… you know, I believe that if we search for… let’s see, affiliate ads or affiliate ad block. There we go. If we search for that on the site you know, how to create an affiliate ad block, I have posted my code. Yeah, here’s the code that I used in order to you know, create that. So I just take the… I wrap the text widget with a div called byob ads and then I just put each bit of code that the affiliate gives me. Inside this byob ads, each of them has an image. So it’s this image that floats to the…oh where’s the float left? Oh, isn’t that weird? I may have failed to actually include all of the image here, all of the text here or the code here. So I’ll fix that.

But this is theoretically, the code that I used, the CSS code that I used in order to create that ad block. I also just post my ad code after this so you can see what the code inside the text widget actually looks like. I can show you that here, let’s see… widgets…let’s see, folks we like and recommend is what I’m looking for.

Oh actually, that’s right. It’s actually in a different format here. Recommends…come on. Oh I can’t show it to you because this… that’s why I haven’t fixed this yet. I’d forgotten that. I haven’t fixed this because my system is failing over here. It’s not actually in a text widget. It’s inside something created within my custom widgets which is… I have an error in it that I haven’t tried to fair it out.

But I’m going to take you a client’s site, The Confident Mom. We used a plugin on her site called Ad Rotate. And so, if we go to her blog, that’s what we’re using here for… well, in a moment, this one’s going to show up but that’s what we’re using here for this block of 6 rotating ads. And wp-admin… and the upside of using this plugin is that it tells you how effective the ad is.

And so if we go down to… let’s see, it’s the Ad Rotate plugin and if you just go to Manage Ads, I think, we have currently these 6 ads rotating around and they have been going since May 26th so a little over a month. You know, you can see the number of impressions that have been in that time period and you can see the number of clicks and obviously, this Amazon baby one gets lots of clicks, right? 10”% of the people that go to her site or at least, 10% of the impressions result in clicks over to this Amazon ad.So I don’t know whether or not the Amazon ad’s producing any money but you can see here, because of this plugin, how many impressions, how many clicks and in fact, when you add more ads to the group… so you’d only want 6 rotating through so if you add another you know, we have another 13 here to add in, if you change the weight….so for example, you say, “Well, this one is a really successful ad so I’ll make that a 10.” Then this plugin uses that to determine how often the ad… how many impressions of the ad you see. And so right now, we aren’t. We haven’t even put the rest of these in yet but you can change the weight so that you know, the successful ads will show up more often than the less successful ones.

But if we look at this one… so we’ve got our href with our little link in here and then we’ve got the image link with its size and closing h. It looks exactly like what I did. And then you know, we have it enabled, we put the… well, we shouldn’t have 2 of those. That’s odd. Yeah, there we go. We’ve got the click URL here and then it’s been added to that typical group. We save the ad.

So I mean, I think you get the idea. The plugin name is ad rotate and it’s what I’m planning to move my site to and what I’m installing in another client’s site here. I’m supposed to be installing that this week and…

Lewis: The 10 rotating Rick, if you just want to put 2 or 4 little icons there, you still think this is the way to go?

Rick: Well, if you want to know. If you don’t care about knowing then no, because there is overhead associated with it, right? The website is processing information every time somebody clicks on it. Every time a page is refreshed, a question has to be asked and answered. And so, if you don’t care then… I mean, if you don’t care about the statistics, if you’re just going to use the same 4… I mean, that’s exactly what I’ve done on my site. Then it’s not that big a deal and using the standard HTML and CSS would probably work just fine.

Lewis: So I could…I’m not sure exactly what I want to put on. I asked a question in relation to my own site and I’m not 100% sure what I want to put on there yet but really, the way to go with that right sidebar is just text widgets and the styling in CSS and sort of that div classes into the text widget.

Rick: Yeah, which would produce this result right here. You know, as long as the images are floated to the left then this one goes as far over to the left as it can and then this one pops up next to it and so on and so forth, all the way through. And…

Lewis: That floating’s done in the CSS?

Rick: The floating is done in the CSS, right. And well, let’s just look at my… let’s see, byobwebsite. Let’s look at my custom CSS and let’s find ads, byob ads. Isn’t that what it was? Well, let’s look. Yeah, div byob ads, okay. Come back over here and let’s find it… okay so let’s go that section.

So affiliate advertising, I’m lying to you because this is clearly not floating to the left. That is actually the code that’s running there and so, let’s see what it says. Why is it…okay, yeah I’m overthinking this. Brian’s right. All things being equal, adjacent tags will sit side by side. A linked tag is not a block level element which means it doesn’t prevent stuff from wrapping around it and that’s why it works this way because we’ve got the image inside of a link. And so, all I really need to do for the link or for the image is to give myself that padding or the margin around it and the link just sits side by side because they are link. So it’s not floating the image, it’s… the image wrapped inside of an HTML element that is not a block level element. And so, it doesn’t prevent anything from slipping up beside it. If these were just straight images, it would. The straight images will stack. It won’t go side by side because they are considered block level elements which means they won’t… they will take up all of the horizontal space available.

Lewis: So in that case is when I float them left, if it’s just an image or another link…

Rick: You’re right. In that case, you would have to float them left but because this is inside a link tag, it does not need to be floated left because it would only take up as much space as it needs.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment