You are not logged in. Access is limited. Login or see membership information. • iGrOOps Devel and Support

print page Admin Manual
How To Add HTML Affiliate Code for Banners/Buttons on a Custom Webpage
last updated: 2008-10-21 20:02:04

If you are running the Affiliate Module on your iGrOOp, and purchased the iGrOOps banner package (or have otherwise created banners/buttons for your affiliates to use), you can include a box with HTML code below each image, so your affiliates can add the code to other websites, linking the banner to your site, using their specific affiliate ID. Sound complicated? Don’t worry—you can do this! Just follow the simple steps below. Want to see an example before you get started? Check it out. (For the most accurate view, join onlinegroupaffiliates.com as a member first-- it's free).

 

Before we start, if you have Firefox installed as a browser on your computer, you may wish to use it for this process, as it makes the set-up a little simpler than Internet Explorer. If you are using Internet Explorer, no worries-- instructions are below.


Customizing the code

There are two options for customizing the code depending on whether you are using a custom domain name, or an iGrOOps URL.

Custom Domain Name (www.yourdomain.com)
If you are using a custom domain name, copy the code below, then edit your custom webpage containing the banners/buttons, and paste the code in the text editor, directly below your first banner/button.

ex1.gif

iGrOOps Subdomain (yourfoldername.igroops.com)
If you are not using a custom domain, copy the code below, then edit your custom webpage containing the banners/buttons, and paste the code in the text editor, directly below your first banner/button.

ex2.gif

If not using a custom domain, follow the instructions below, but substitute yourfoldername.igroops.com when you see www.yourdomain.com in the instructions.

Now we are ready to do the actual editing of the code, so it will work as desired specifically on your site. The only areas in the code above that you will need to edit, are those in red. Simply replace www.yourdomain.com in the code with your actual domain name, and yourfolder with your folder name.

Be careful to leave all of the spacing exactly as is, and do not delete any other characters.

Once you’ve edited the code as described, you can copy it, and paste it underneath each banner/button on your page. The code will stay the same for each banner/button, with the exception of yourimage.gif, which we will now learn how to adjust.

Finding the file names of your banners and buttons

Firefox:

If you are using Firefox as your browser, the image name should appear next to your mouse pointer if you simply float your mouse over the image. If that does not work for you, then right click the image, and view the selection source. You should see a string of text that begins similar to this:

IMGSRC_SHOT.jpg

The "g1" can be replaced with "l1" (el - one)

 

The only parts of that code we need to edit are those highlighted in red. Add the specific name of the image (yourimagename.jpg or .gif) in the placeholders in your code.

Follow this same process for each of the banner/buttons until you have found and replaced the image names in the code for each, then scroll to the bottom and click the Save Changes button.


Internet Explorer:

If you do not have Firefox installed on your computer, no problem, just follow these steps.
Click on the camera icon cameraICON.gif in the text editor. It is the last icon, all the way to the right, in the first row. Find the image that matches the first banner on your page. Float your mouse over the image, and you will notice in the bottom left hand side of the window, a string of text will appear, starting with “javascript:”. Start following the string of text to the right until you come across the image name (you may need to make the window larger in order to see entire string). Now replace “yourimage.gif” in the code to the name of the image, as found in the string of text.

Follow this same process for each of the banner/buttons until you have found and replaced the image names in the code for each, then scroll to the bottom and click the Save Changes button.

Testing Your Code

If you followed these instructions carefully, your page should be ready to go. Double checking, however, is never a bad idea. First, go to your banners and buttons custom webpage, and copy the text in the box under one of the images. Next, create a brand new custom webpage (be sure to give it a title and file name) then click on the “HTML” button in the text editor. Paste affiliate code for your banners in the HTML area and click “Update”. Save changes to your custom webpage. Now view the webpage you just created. Do you see the banner? When you float your mouse over it and look in the lower left corner of your browser window, do you see the URL for your site, followed by + and your nickname? Click the image. Does it go to your site, showing the nickname at the end of the URL? If all is good so far, you can try this for each of the banners/buttons, and if they all work…congratulations! Your banner / buttons page is now optimized for your affiliates.

You will want to announce the cool page you just updated to your group members, so they can start driving traffic to your site, bringing you more revenue, and earning them some affiliate cash!