Subscribe
Update: We have published a WordPress plugin named Simple Image Link which provides a simple way to add an ad on your sidebar. You may want to check this out.
A lot of new bloggers want to include advertising on their site, but find the idea of adding an advertisement to their sidebar daunting. If your blog runs on WordPress software, it’s a simple matter of using your text widgets to show ads. In this post, we’ll show you how.
There are a number of WordPress themes readily available that support ads, and make managing them relatively easy and pain free (at least that’s what they say). But, no doubt, you have already invested time choosing and customizing/tweaking your current theme.
Rather than change designs now, a simple approach is to use the standard WordPress Text Widget to show image ads. Once you have had experience with displaying ads, you can then decide whether it is worth changing your theme to accommodate the ads.
What is an ad?
When you sign up for ads, typically via an affiliate program, you will be provided with a username and password which will allow you to login and select the ads you wish to run on your blog.
Nearly all affiliate programs will provide the HTML code that you need to add to your blog. All you will need to do is to copy this HTML code to the clipboard and then paste it into a text widget.
If we walk through an example, you’ll see it really is that simple.
For an image based ad, the HTML will be of the form:
<a href=”…”><img src=”…” /></a>
Where:
<a href=”…”>…</a>
Is the link which takes your reader to the Web site of the product/service being advertised.
and <img src=”…” />
Is the reference to the image to be displayed, which is taken from the affiliate program’s Web site. You will not need to upload any images to your blog.
I read Raymond Chen’s blog The Old New Thing. Now Raymond has written a book based on his blog, aptly called The Old New Thing, and has an image of the book on his blog, which is linked the book’s details on Amazon.
I will use this as an example, for which the HTML code is:
<a href=”http://www.amazon.com/gp/product/0321440307?ie=UTF8& tag=tholneth-20&linkCode=as2&camp=1789&creative=9325& creativeASIN=0321440307″><img border=”0″ src=”http://images.amazon.com/images/P/ 0321440307.01._AA_SCMZZZZZZZ_V33963393_.jpg” /></a>
NOTE: A few extra spaces have been added to the URL values so that they wrap nicely within this post - just so you know.
The URL has two parts. Everything up to the question mark i.e. http://www.amazon.com/gp/product/0321440307 - is the link to the book’s details on Amazon; everything after the question mark are name/value pairs which contain Raymond’s affiliate information and how to display the information about the book.
The URL to the book’s details is:
http://www.amazon.com/gp/product/0321440307?ie=UTF8& tag=tholneth-20&linkCode=as2&camp=1789&creative=9325& creativeASIN=0321440307
The URL to the image is:
http://images.amazon.com/images/P/ 0321440307.01._AA_SCMZZZZZZZ_V33963393_.jpg
How to put an image ad into a text widget
The simplest thing to do is to display one ad per text widget.
Within the Design - Widgets section of your WordPress Dashboard, add a new Text Widget.
- Do not enter a title for the Text Widget (the single line edit box at the top).
- Enter the ad’s HTML code into the main edit box of the text widget.
Saving the changes, will show the following within your blog:
To center the image within the text widget
To center the image within the text widget all you need do is, within Design - Theme Editor section of your WordPress Dashboard, add the following to your theme’s style sheet.
.textwidget { text-align: center; }
The text widget will now appear with the image centered.
One disadvantage of this approach is that all text widgets will be centered. So if you are using text widgets to display something other than ads which you do not need centered, then you will need to differentiate text widgets which display ads from those which don’t display ads.
You can do this by enclosing the ad’s HTML within a DIV tag as follows:
<div class=’ad’>…</div>
So the text widget now looks like this:
Within the theme’s style sheet add the following at the end:
.ad { text-align: center; }
How to include two ads per text widget
If you want to display two ads per text widget you will most likely want to center this both horizontally and vertically.
You do this by enclosing the HTML code for the two ads within the text widget as follows:
<table class=’ad’><tr><td>…</td><td>…</td></tr></table>
Replacing … with the HTML for the 2 ads required:
The ads will appear as follows:
You can force the ads to be aligned horizontally and vertically by adding the following to your theme’s style sheet:
.ad { width: 100% }
.ad tr td { text-align: center; vertical-align: middle; }
The ads will be aligned as follows:
Google and Advertising
Google’s PageRank flows from blogs and Web sites via links. This means your PageRank benefits when you receive links from sites with a higher PageRank, and sites you link to will benefit from your PageRank.
As a result, many sneaky webmasters began buying and selling links to manipulate search rankings. In an attempt to curb this practice, Google made the decision that all paid links should be disclosed.
The ads you are running are links, and since the advertisers are paying you to have the link on your blog, you must describe the ad links as “nofollow,” this tells Google to not consider the link for the purposes of calculating its PageRank. If you don’t abide by this rule, your blog will be penalized; it may even be removed from the search results.
Adding “nofollow” to ad links
The easiest way to disclose your link is by adding the text rel=”nofollow” to the link.
So the Amazon link to Raymond Chen’s book on Amazon becomes:
<a rel=”nofollow” href=”http://www.amazon.com/gp/product/0321440307?
ie=UTF8&tag=tholneth-20&linkCode=as2&camp=1789&creative=9325&
creativeASIN=0321440307″><img border=”0″ src=”http://images.amazon.com/images/P/
0321440307.01._AA_SCMZZZZZZZ_V33963393_.jpg” /></a>
You may need to add rel=”nofollow” to any HTML code you receive via affiliate programs.
Wikipedia has more information on nofollow.
Sphere: Related Content
Add to Delicious
Digg This!
Stumble This!
Mixx This!
Sphinn This!20 comments:
2 trackbacks:
- Putting Ads in Your Wordpress Sidebar | Guide Of Wealth Blog 25 August 2008
- Blogging Basics: 4 Issues and 3 Tips | BlogWell 9 September 2008
Add to Technorati
All of this is very helpful, and I thank you for it. Both the use of the widgets and the incidental, but very helpful, admonitory note about No Follow.
Lid/Martyn
You can thank me later for giving you the idea!!
THANK YOU THANK YOU !!!
@John - We are glad you found this useful.
@Katly - Thanks for the post suggestion Kat.
This messed up my site.
“Warning: array_keys() [function.array-keys]: The first argument should be an array in /home/xxxxxxxx/public_html/wp-includes/widgets.php on line 654
Warning: Invalid argument supplied for foreach() in /home/xxxxxxx/public_html/wp-includes/widgets.php on line 654″
It won’t even let me remove it now.
@Jared - I am very sorry to hear this. We are using WordPress 2.5.1 (and 2.3.x previously). It is also usable on WordPress.com, although it violates the terms of service - at least if using it to generate ad revenue.
Line 654 of widgets.php is where it is iterating over the currently defined widgets, so I am intrigued that any content within the widgets themselves, no matter how valid or invalid, would cause it to die here.
I can see how this would be frustrating for you, but I would look to the WordPress forums - http://wordpress.org/support/topic/165534 and http://wordpress.org/support/topic/172272.
Will do. I am actually using hosting on my own domain so I am allowed to use ads. This probably wasn’t the easiest way to go about it. I don’t really think it is specifically the coding itself as I know that was a simple image placement with a link to send you to when it’s clicked. Thanks for the help though, I’ll have to check out those threads.
WOW!! This is FANTASTIC!!! I’ve been trying to find this info and didn’t get anywhere. Today I did another search and I’m soooooooooooo glad I found you. no one tells it like you do here!! I even bought the “WordPress for Dummies” book.. but there’s only one paragraph on ads. (saying you can put ads on if you want!) They certainly don’t tell you HOW to put them on or anything useful.
One question. Do you also have to go into the C-panel to put ads in or do you just do it on the WordPress part? I don’t understand a lot about the C-panel and it scares me.
Thanks you SOOOOOO much for this wonderful information. I’m definitely getting your RSS and putting you in my favorites. You are now my favorite of all favorites! LOLOL You guys are great. When I get my site up I will tell the world about you. LOL
This tutorial is great, thank you!
Incidentally, I’m having trouble getting text widgets to appear on my sidebar…I’ve added them and can see them in the dashboard, but they don’t display on my site. I’ve even tried just entering text (rather than HTML) and still nothing shows up.
Could this be a result of something missing from my CSS, due to the theme I’ve chosen? Any advice would be greatly appreciated…
This looks great… but when I try it, something strange happens.
It seems to insert the URL of my site before the URLs of the linked image and the page I’d like to go to, rendering both the image and “jump to” link dead.
Just to make sure I’m doing this right, I copied your line:
And pasted, over the first “…”, a link to a sales letter that’s online.
In the second “…” I pasted a link to the image, which I’ve uploaded to my own online folder.
I checked both the sales letter and image links separately, and they work fine. Also, I neither replaced nor added to any other text in the line of html you provided, except for replacing the “…” (and yes, I left the quotes around the links).
Yet with a mouse over the ? where the image is supposed to be, I see something similar to: “http://mysite.comhttp://www.amazon.com… etc.”
It’s the “mysite.com” part of this that shouldn’t be there.
Any ideas?
@john - This is quite puzzling. Normally your site is included in the URL if it does not start with ‘http://’ (or any other protocol - https, ftp etc).
As an example, we have added the WordCamp logo to our sidebar, which links to their site.
The code within the text widget is:
<a href=”http://2008.sf.wordcamp.org/” rel=”nofollow”><img src=”http://blog-well.com/wp-content/uploads/2008/08/wordcamp-logo.png” /></a>
Rather than copy the HTML code above, you can download it here: HTML code for WordCamp image link.
This will ensure there are no HTML encoding issues, as the double quote is displayed as a smart quote (”).
@Jared - You are most welcome.
@Rhonda - Sorry, but we don’t have any experience with C-Panel. To add a text widget you use WordPress, and go to Design - Widgets and then add the text widget to the required sidebar (WordPress 2.5 or later).
@Shaun - If the above example does not show on your site, then it could very well be a CSS issue. Look for anything related to the textwidget class or anything related to images (which may hide them by default).
Thank you so much for this! I have bought a few books, even ‘for dummies’ books looking for this exact information! I haven’t been able to find it anywhere. Now that I have it working, I can start searching for some more relevant ads to post! Thanks again!
@Ken - You’re welcome - we’re glad you found it helpful.
Hey Mad, This is a wonderful post and sooo very helpful! It is a great tutorial on putting ads on site. I’m writing a post today that is about Affiliate ads, and I’m going to link to you so that my readers can see your tutorial. Kudos to you!
@jj - Thanks for the link - we are glad you found it helpful.
Hi,
Please checkout our new WordPress plugin which adds a widget to your dashboard to simplify the process of adding images to your sidebar.
It is called Simple Image Link.
Check it out.
THIS is exactly what I need today. Very in depth.
Thank you!
Jannie
@Jannie - You seem to be self-hosting your WordPress blog, in which case you may want to use our plugin which provides a Simple Image Link widget for your sidebar. See our download page for our Simple Image Link Plugin/.
Hi. My Wordpress is actually bundled in under Bluehost, so I imagine I should be good to go. However in my WP content files I do not see an ad plug-in so that’s possibly my glitch. (Although my current 3 ads, running beautifully on my humble site, pre-encoded as an “ad block” form in the “Bible Scholar” theme, work fine. But when I tried to put a 200 x 200 ad in after an identical code it didn’t like me so I obviously need to tell it something different.
Now I’m going to thoroughly read your post and go at it step by step and see if that works. And if not, luckily I have a Wordpress friend here in Austin to help. I bet I’ll have those new image ads up and running pronto and be kicking even more cyberbutt than I ever imagined possible.
Thak you, Jannie
real good post