How to multiply your adspace using lightbox

Description
Also known as “Project D” for the 47 day challenge, this is a small site about moleskines.

It is as good an example of a niche site as it gets.
The topic is the “moleskines” brand of notebooks, it is handcoded, took about 2 hours including content and is monetized via amazon.

One of the main reasons this works is the domain name.
All traffic is pure organic search results. I’ve done no more than link to it on some of my sites.
It brings in about 2 bucks a month and some more in Christmas season.
Last year it made about 50$ profit after subtracting hosting costs.

For those interested in ROI, it rings in at 400%.

Proven it’s worth, I want to give this little site some love and multiply its adspace.

Multiply your adspace times X using lightbox
Clicking on one of the dormant links in the wickedfire header will prompt a box to pop up, adding a dark layer on the site and shopwing a picture. Many people mistake this for a flash animation at first, but it is a small JavaScript called Lightbox.
The interesting part of lightbox is the description you can enter for the image. Turns out, you can enter HTML code to format your description.
This gives us the opportunity to enter the HTML needed for advertising.

Caution!
Javascript won’t work. So you’re out of luck with adsense, but any static HTML is fine.

For those interested in Javascript, flash, etc.. for something like lightbox, check out thickbox.

So what will I be doing?
Basically, collect a few nice moleskine pictures to display in my lightboxes. Add amazon to every lightbox. For 10 pictures, I can display 10 more ads.

Other Benefits
Lightbox has several benefits that should work well for advertising:

• It darkens the rest of the site, making the user focus on the image (and adspace)
• It does not interfere with the layout
• The user stays on the page while looking at the pretty picture
• The user is looking at something he’s interested in, you can display your ad right beside it

Setting it up
Download lightbox http://www.huddletogether.com/projects/lightbox/
Read the Tutorials. (Really easy, it is just one page)
The script weighs in at about 5K, making it a lightweight addition to your site.

So I set this up for my product page here:
Collected an image of a lined moleskine, added a button “view details” which prompts the lightbox.
Set up the amazon link in the lightbox, using the small colorcoded moleskine icon.

How to enter the HTML code?
Well, saying “any html will work” is not quite right. You need to strip and/or escape some characters from your code to prevent it from breaking the Javascript surrounding it.

These are the less than sign < and quotation marks “

Just replace them with < and single quotes, respectively.
You could also just leave out the quotation marks, but I find readability is better using single quotes.

So your amazon code looking like this:

<a href=http://www.amazon.de/gp/product/B0009WOZBE? ie=UTF8&tag=XXXYZ-21&linkCode=as2&camp=1638&creative=6742&creativeASIN=B0009WOZBE>Drei Amen für den Satan</a><img src=”http://www.assoc-amazon.de/e/ir?t=XXXYZ-21&l=as2&o=3&a=B0009WOZBE” width=”1″ height=”1″ border=”0″ style=”border:none !important; margin:0px !important;”>

Becomes this:
<a href=”images/image-1.jpg” rel=”lightbox” title=”<a href=’http://www.amazon.de/gp/product/B0009WOZBE? ie=UTF8&tag=XXXYZ-21&linkCode=as2&camp=1638&creative=6742&creativeASIN=B0009WOZBE’>Drei Amen für den Satan</a><img src=’http://www.assoc-amazon.de/e/ir?t=XXXYZ-21&l=as2&o=3&a=B0009WOZBE width=’1′ height=’1′ border=’0′ style=’border:none !important; margin:0px !important;’>“><img src=”images/thumb-1.jpg” width=”100″ height=”40″/>
</a>

Rinse and repeat.

Voila, you’ve got adspace times images now.

::emp::

powered by performancing firefox