www.AffiliateTechHelp.com 1

The Ultimate

Sales Page -

Link Cloaking

Template

A Step by Step Guide to Creating SEO Friendly Sales Pages and Cloaked Affiliate Links

www.AffiliateTechHelp.com

© 2010 FreeAffiliateLinkCloaking.com All rights reserved. No part of this manual may be reproduced or transmitted in any form,

by any means (electronic, photocopying, recording or otherwise) without the prior written permission of the author, except for the inclusion of brief quotations in a review.

www.AffiliateTechHelp.com 2

Overview of the Process

What You Need To Know

There are only three things you’ll need in order to set up your sales pages and cloak your affiliate links: 1. The Ultimate Sales-Cloaker Template, of course. You can download it here. 2. The latest version of WordPress installed on your site. At the writing of this manual, the latest

version is 2.9.2. 3. A way to upload the Ultimate Sales-Cloaker Template. This can be through your web host’s

control panel or by my method of choice, an FTP (File Transfer Protocol) program. I would suggest using FileZilla – it’s free, robust, and gets the job done.

Other Things To Know

WordPress

You’ll also need some basic knowledge of using WordPress. Learning to install and use WordPress is beyond the scope of this manual, but you can find a load of info and tutorials in the WordPress documentation.

Cascading Style Sheets (CSS)

If you’re going to be customizing your sales page template, you will need a little knowledge of CSS, but links to the relevant info will be in this manual if my explanation gets too geek’d out for you. W3Schools.com has excellent info and examples on CSS.

Affiliate Marketing & Affiliate Marketing Sites (Clickbank, Commission Junction, eJunkie, etc)

I’m guessing that since you’re reading this, you want to create a sales page for a product and are interested in cloaking affiliate links. If you’re new to Internet Marketing, you should definitely consider some training so you can maximize your marketing efforts. You can get 100% free training at Affilorama. You’ll get access to tools critical for successful marketing, a blog with useful info, and a forum where you can get all the help you need. Ok, ready to jump in and get started? Let’s go!

Installing the Ultimate Sales-Cloaker Template One thing to understand is that the Ultimate Sales-Cloaker Template is not a full WordPress theme, it’s a template. The difference is that a theme is a set of php, css and image files that control the entire look and feel of your blog or website and a template is a specific file that controls the look and feel of a single page or post on your site. Basically, templates are the files that make up a WordPress theme. The Ultimate Sales-Cloaker Template can be used in any theme as long as they’re uploaded to the directory of that theme and you’ve activated the theme in your WordPress administration panel.

www.AffiliateTechHelp.com 3

Upload the Template

I’m going to cover uploading the template with FileZilla and not a web host’s control panel. Since each web host has a different look and feel to their control panels, I can’t possibly cover them all. If you want to use your host’s control panel, then you should consult your host’s documentation.

Login to Your Account

In FileZilla, open the Site Manager and select the site where you’ll be uploading your template

Once you’ve selected your site, click the Connect button.

Upload the Template to Your Theme Directory

Once you’ve logged in, you’ll need to browse to the directory of your active theme. By default, WordPress comes with two themes – Default and Classic. If you’re using the default theme, then the path to the theme is /your-site-directory/wordpress-insall-folder/wp-content/themes/default where “your-site-directory” is the directory for your domain and/or website, and “wordpress-install-folder” is the folder where WordPress is installed. So if you have a site widgets.com and you installed WordPress in the root folder of your site, then the path might look like: /widgets.com/wp-content/themes/default. That would be where you install the template.

www.AffiliateTechHelp.com 4

By the way, you can get excellent, free themes at the WordPress Theme Repository, or get high quality, professional themes at Gorilla Themes or ThemeForest (super cheap!). Once you’ve browsed to the folder of your active theme, drag the file “ultimate-sales-cloaker-template.php” to the window that displays the contents of your theme’s folder and voila! Your template is now uploaded. Let’s create some sales pages and cloak some links!

Creating a Cloaked Link Page

How the Ultimate Sales-Cloaker Works There are two ways that the Ultimate Sales-Cloaker Template cloaks affiliate links. The first method is by using a simple redirect. When a visitor clicks on the link to the page or post using the Ultimate Sales-Cloaker Template, they’ll be redirected to the link you set when you created that page or post. The second method is by creating some HTML code called an iFrame, then loading the affiliate link into the iFrame. The result is that your affililate link appears to stay on your domain. Which method you use really depends on your preference – the end result is the same.

Adding Your Affiliate Link – Redirect Method

Login to your WordPress installation then create a new Page. To create a new Page, select “Pages” from the left menu, then select “Add New”.

www.AffiliateTechHelp.com 5

Enter the name of your page. You may want to name the page something related to the product you’re promoting. For example, if you were promoting “Confessions of a Lazy Super Affiliate”, then you may name your page “Lazy Super Affililate”. On the right side of the page editor, you’ll see a box labeled Attributes, and in that box is a select box for templates. Using that select box, pick “Ultimate Sales-Cloaker Template” as the template for this page.

Now scroll down to just below your page editor to the box labeled Custom Fields then click “Enter new”.

www.AffiliateTechHelp.com 6

To create a redirect, add the value “redirect-link” in the Name field (without the quotes). In the Value field, paste your affiliate link.

Once you’ve pasted your link, click the “Add Custom Field” button and you should see something like this:

Now you can click the “Publish” button to finish creating your page. If you have Permalinks set up in WordPress, then your page link would look something like this:

To check your redirect, you can click the “View Page” button. If all goes well – and why wouldn’t it – you’ll be redirected to the affiliate link!

www.AffiliateTechHelp.com 7

Adding Your Affiliate Link – iFrame Method

To cloak your link using the iFrame and make the link look like it’s still on your website URL, you simply have to follow the steps above with one exception. Instead of adding the custom field “redirect-link”, add the field “cloak-link”. To test this out, edit the custom field and change the Name field to “cloak-link”, then click the “Update” button:

Click the “View Page” button again and watch the magic happen! You should see the affiliate link in the browser window, but the address bar will still display the link of the page you just created. Quick Note: It’s very doubtful that the site you’re promoting will have “frame breaker” code that pops their site out of iFrames, but it may happen. If this is the case, the link will break out of your iFrame template. However, this won’t have any effect on you getting credit for any sales.

Link Redirect/Cloaking Custom Field Reference

Field Name Description

redirect-link Creates a redirect to the link used in the value field

cloak-link Creates an iFrame containing the link used in the value field

Creating Super Simple Sales Pages The Ultimate Sales-Cloaker Template is already built to be an easy to use sales page right out of the box, so you can immediately concentrate on writing your sales copy. Just check out the sweet looking default look and feel of the template:

www.AffiliateTechHelp.com 8

Downright sexy, ain’t it? But, but, but I don’t like grey backgrounds, and it needs to be narrower, and it really could use a cool background and a better border around the content. And what about a header graphic?! Calm down, Grasshopper. The Ultimate Sales-Cloaker Template has you covered. We’ve made this template flexible so that you can change the look of the sales page however you like, all from the WordPress page editor. The template has 15 custom fields available so that you can change backgrounds, add header images, and do as much or as little with the template as you please. Just check out what can be accomplished with the addition of just four custom fields:

www.AffiliateTechHelp.com 9

Yes, that’s the same template! I think you can see just how flexible the template is, especially since it works with any theme you want to install. So let’s dig into each of the custom fields so you can start customizing to your heart’s content…

Background

To edit the background of the sales copy, you simply need to add the custom field “background” in the custom fields box while you’re in the page editor. The value of the “background” field can be any combination of color, background image, and positioning and/or repeat properties for a background image. For example, to change the background to white, you would enter the value “#ffffff” (without quotes) as the value of the custom field. To get really nutty, you can use your favorite graphics program to find a color, or check out Adobe’s Kuler program or ColorPicker.com. If you wanted to have a graphic as the page background, then it’s a simple two step process:

1. Upload the background image to your Media Library in WordPress, then copy the link to the newly uploaded image.

2. In the custom fields box, add the “background” custom field and the value: url(‘link-to-your-background-image’) where “link-to-your-background-image” is the link copied from step 1.

For more complex background styling, you can view the documentation on background css and all the available background properties at W3Schools.com.

Page-Width

The default with of the Ultimate Sales-Cloaker Template is 750 pixels. However, you can set the width to whatever you like – a defined width, or as a percentage of the browser width. Bear in mind that the

www.AffiliateTechHelp.com 10

majority of internet users are browsing the web using a screen resolution of 1024x768, so a width of more than say, 960 pixels is not recommended. You may also want to avoid using percentages (90% or .9em), as that can have some unintended consequences with the way your page is laid out. When it comes to sales pages, I like to use very specific values – why tempt fate? For the purpose of a sales page, you’ll most likely want to use more in the neighborhood of 650-700 pixels. To set the page width, just add the custom field “page-width” and use any valid value for a CSS based dimension like “650px”.

Header-Image, Header-Height Adding a header graphic to your sales page is just like adding a background image – a two step process:

1. Upload the header image to your Media Library in WordPress, then copy the link to the newly uploaded image.

2. In the custom fields box, add the “header-image” custom field and the value is the link that you copied from step 1.

To control the height of the header graphic, you would enter the custom field “header-height” and a pixel value. The default height is 150 pixels (150px), so if your graphic is larger or smaller, you’ll want to adjust this. If you don’t know the height of your header graphic, then you can get that information in the Media Library – it should display the image properties for you.

The template assumes that the header graphic will be the same as the page width, so there is no header-width value available and the header will be clipped to the page width.

Content-Border The border of your sales page can be controlled by adding the custom field “content-border” and any valid CSS border declarations. As an example, you could remove the border by adding a value of “none” to the “content-border” custom field, or add a thick, red double line border like so: “6px double #ff0000”. There are a lot of combinations possible, so check the W3Schools.com website for info on borders.

www.AffiliateTechHelp.com 11

Corner-Radius

The “corner-radius” field lets you define rounded corners for your sales page. The value can be any valid, positive value CSS measurement. The default value is 0 pixels. So to add a really fat rounded corner to your sales pages, you could set the “corner-radius” field value to “30px”, or 30 pixels. Now, there’s a BIG caveat to this and the next few custom fields: They currently work for FireFox and Safari browsers. The reason is because the round corners, drop shadows, etc are part of CSS version 3. Internet Explorer currently doesn’t support this version of Cascading Style Sheets, but IE version 9 will, and that’s due for release in early 2011 – so we’re doing a little forward thinking here. Right now, IE would still display square corners.

Shadow-H, Shadow-V

These custom fields set the horizontal and vertical offset of a CSS3 drop shadow. Positive values shift the drop shadow down and to the right, while negative values shift up and to the left. Values can be any valid CSS measurement. Default value is 0 pixels (0px). If you wanted to make your sales page appear to float above the page, you could try setting each field like so:

Again, it’s important to note that these fields only apply to FireFox and Safari. Internet Explorer won’t display a drop shadow.

Shadow-Blur

This custom field sets how much the drop shadow is blurred. For a crisp shadow, you blur less, and for a nice soft shadow, blur more. Default is set to 0 pixels. This field also doesn’t render in Internet Explorer – yet.

Shadow-Color

This is the last of the fields that is unsupported by Internet Explorer at the time of this writing. This just sets the color of your drop shadow. You don’t have to have a black shadow – you can have a nice healthy green glow, or any other color you fancy. Valid values are hexadecimal color values.

www.AffiliateTechHelp.com 12

Advanced Styling

If you really want to tweak the sales page, then there’s no template hacking needed. We’ve got two fields that allow you to override all the page defaults and go nuts with your own design!

Custom-CSS, Custom-CSS-IE

By using the “custom-css” field, you can have the template load an external CSS file. If you want to apply some pretty heavy styling to your layout or the page contents, then you would need to put that CSS code into an external CSS file. Once you’ve got your file created, load it to your active theme directory. Make sure you don’t name it style.css or default.css – those are common names for WordPress style sheets. You might name your file something like “custom-sales-page.css”, or load it into a directory like “custom-css”. Once you’ve got the file uploaded, you’d add the path to the new CSS file to the “custom-css” field like so:

This will load that file into your sales page template, overriding all defaults and settings in the page for complete customization. Not all browsers are created equal. There are differences in how Internet Explorer displays CSS compared to all other browsers. For this reason, you’ll want to check your customized page in Internet Explorer to make sure nothing looks weird. If it does, you can “fix” the CSS by creating an Internet Explorer specific style sheet and adding it to the “custom-css-ie” field.

Page layout:

For reference, the code below represents the layout of the sales page. Using the IDs of the div containers, you’ll have complete control over the look and feel of your sales page.

www.AffiliateTechHelp.com 13

<div id="page-wrapper">

<div id="page-header"></div><!-- header graphic goes here -->

<div id="page-content-wrapper">

<div id="page-content">

your sales content goes in this container

</div>

</div>

<div id="page-footer"></div><!-- footer graphic goes here -->

</div>

Here’s a graphical representation of the layout:

SEO Optimization

Page-Title, Meta-Descr, Meta-KW

What’s a sexy sales page without all kinds of search engine goodness? The “page-title”, “meta-descr”, and “meta-kw” fields allow you to tweak your sales page for the search engines by adding a longtail, keyword loaded page title, page description and keyword meta tags. One note here: The template does check to see if you have the All In One SEO Pack plugin installed on your site. If you do, then the template defaults to the settings you might have entered for your page SEO. If you don’t have any settings, then the page title at least defaults to the name of the blog and the page name – but come on, you don’t do SEO???

page-wrapper

page-content-wrapper

page-header

page-content

page-footer

www.AffiliateTechHelp.com 14

Cookie Dropping (Stuffing) to Maximize Commissions One problem marketers have is that visitors to your site may not be ready to buy when they read your sales page, and then close the browser or go to a different site. If the user buys the product you’re promoting later on, then you’ve lost out on a sale – how much does that suck?! One of the worst kept secrets in affiliate marketing is using a technique called “cookie dropping” or “cookie stuffing”. Basically, this technique uses some HTML trickery to “call home” to the vendor’s site with your affiliate ID included. The result is that a visitor to your site gets a cookie written to their browser as if they clicked on your link – without ever actually clicking on it. This technique has gotten some bad press because a few people have taken cookie stuffing to fraudulent levels. However, I don’t particularly find a problem with using a single cookie drop for a product on a sales page specifically promoting that product. So to that end, we wired up the Ultimate Sales-Cloaker Template to drop cookies using two custom field codes.

Cookie-Drop, Cookie-Chance

To drop an affiliate cookie, add the custom field “cookie-drop” and use your affiliate link as the value. As an example, a typical Clickbank hoplink looks like this: http://AffiliateID.VendorID.hop.clickbank.net. If that were your affiliate link, then you’d use that as the value. Think about this: no marketer, however good, gets 100% click-through rates. If you’re dropping affiliate cookies all the time, then your vendor (or affiliate site) may check up on you. If they frown on cookie dropping, then they may ban you, then your commissions will really go in the tank. To vary how much you drop a cookie, you can add the custom field “cookie-chance”, and this can be a value between 0 and 100. If you set the value to 25, then you’ve got a 25% chance of that user getting a cookie. You’re going to drop a cookie 100% of the time aren’t you? Another bonus of dropping a cookie (if 100% of the time) is that you can link to ANY part of the vendor’s website from your sales page because you’ve already dropped a cookie. This can actually increase your conversions because you’re linking directly to the vendor’s site as opposed to “cloaking”, and your visitor will see that.

Advanced Sales Page and Cloaking Techniques

Adding “Clickability” to Your Links To really get your visitors hungry and wanting to buy your products, consider making your cloaked link or redirect pages a child of a page named as some action word. For example, you might create a page on your site called “Likes”, “Loves”, or “Recommends”. If you were to view that page on your site, it wuld look like: www.yoursite.com/likes/ or www.yoursite.com/recommends/.

www.AffiliateTechHelp.com 15

Next, create your cloaked link page or redirect page with the Ultimate Sales-Cloaker Template and in the Attributes box on the right side of the page editor, select the “Likes” page as the parent page – see below:

Save the page as the product name. If you’re promoting something like “Guitar Superstars”, then make that the name of your page. When you publish the page, the link would be: www.yoursite.com/likes/guitar-superstars/. Damn, that looks nice!

Keeping Your Site Menu Clean If you’re running your site as a CMS or a blog and not a mini site, then adding a lot of sales and cloaked link pages can really start to clutter up your menus. You may want to hide all those pages and still be able to link to them. In a normal installation of WordPress, you selectively hide page links. However, there’s a plugin, Exclude Pages that does a wonderful job of this. It adds a checkbox in the Attributes box of your page editor that allows you to exclude a page from your menus. The result is a clean site that doesn’t scream “I’m an affiliate marketer!”

Using the Template for a Sales Page AND a Cloaked Link Page

So I think we’ve covered just about everything there is to cover on the Ultimate Sales-Cloaker Template. But here’s a technique that’ll really boost your conversions and take your marketing up a notch: use the Ultimate Sales-Cloaker Template for a sales page that links to another page on your site using the template as a cloaked link! To set this up is easy. Follow the steps to create a cloaked or redirect page using the template and publish that page. Copy the link and create a new page using the Ultimate Sales-Cloaker Template, making it your sales page. When you get to the “add to cart” or “buy now” buttons and links, simply add the link to your cloaked link page

www.AffiliateTechHelp.com 16

Support, Questions, Comments I hope you enjoy the Ultimate Sales-Cloaker Template as much as I enjoyed creating it, and I also hope you make boatloads of money with it in your marketing. If you do get some good use out of the template, then please show us some linky goodness in the comment section of the site at www.freeaffiliatelinkcloaking.com/wordpress/sales-page-cloaking-template/ - we’d love to see what you’ve done with the template. If you have support questions or comments or you’d like to just sing your undying praise for the Ultimate Sales-Cloaker Template, and then leave those comments as well! Going forward, we hope to have “style packs” that you can download and use with the template, so be on the lookout for those, and in the meantime, sign up for our newsletter. Here’s to your success!

www.AffiliateTechHelp.com 17

Ultimate Sales-Cloaker Template Custom Field Reference

Field Name Description Value

background Sets the style for the background of the sales page. Default is #E2E2E2

Any valid CSS background declaration, including background image, color, etc.

page-width Sets the width of your sales page content. Default is 750px

Any valid CSS dimension. Pixel values are recommended (650px would set the page to 650 pixels wide)

header-image Adds a graphical header to the top of the sales page

Any valid URL to an image. Note: the header image should be at least as wide as your page content. Note: header may be wider, but will get clipped to page width

header-height Sets the height of the header. Default is 150px

Any valid pixel value (125px sets your header height to 125 pixels). Note: header may be taller, but will be clipped

content-border

Sets the border style of the sales page content. Default is “1px solid #d7d7d7”

Any valid CSS border declaration

corner-radius Creates rounded corners for the content (FireFox & Safari only as of May 2010)

Any valid pixel value (15px results in a corner with a 15 pixel radius)

shadow-h Horizontal shadow offset for sales page content (FireFox & Safari only as of May 2010)

Any valid pixel value (6px results in a shadow 6 pixels to the right. Negative values move the shadow left)

shadow-v Vertical shadow offset for sales page content (FireFox & Safari only as of May 2010)

Any valid pixel value (6px results in a shadow 6 pixels downward. Negative values move the shadow up)

shadow-blur Shadow blur amount for sales page content (FireFox & Safari only as of May 2010)

Any valid pixel value (6px results in a 6 pixel blur)

shadow-color Shadow color for sales page content (FireFox & Safari only as of May 2010)

Any valid HTML color name or hexadecimal color value ( #2167BC, white, etc)

page-title Sets the value of the <title> tag in the sales page. If All In One SEO Pack is installed, title defaults to value set by All In One.

Text that describes the function or title of the page

meta-descr Sets the value of the description meta tag in the sales page. If All In One SEO Pack is installed, title defaults to value set by All In One.

Text that describes the content of the page

meta-kw Sets the value of the keywords meta tag in the sales page. If All In One SEO Pack is

Comma delimited keywords

www.AffiliateTechHelp.com 18

installed, title defaults to value set by All In One.

custom-css Allows for advanced styling of sales page content by including external CSS files

Relative path and name of external CSS file

custom-css-ie Allows for advanced styling of sales page content by including external CSS files and can be used to correct differences in look & feel between Internet Explorer & FireFox/Safari

Relative path and name of external, IE specific CSS file

redirect-link Creates a redirect to the link used in the value field

Any valid URL

cloak-link Creates an iFrame containing the link used in the value field

Any valid URL