PayPal Hacks. 100 Industrial-Strength Tips and Tools

< Day Day Up >

Hack 29 Use a Custom Button Image

Customize the appearance of the Buy Now button with a few changes to the Button Factory code

The PayPal Button Factory generates HTML code that you insert into your payment pages to facilitate sales. The code you initially get depends on the values you type into the form, but you can subsequently edit it manually before you install it onto your site. This simple hack walks you through the modification of your button code to use your own custom Buy Now button images.

4.3.1 Preparing the Image and Code

First, you'll need to prepare another button image for use in the form. It can be either a GIF or JPG image file, but it must be located somewhere on your web site or elsewhere on the Internet so that you can reference its location in your code. See the next section for button design tips.

Start by generating the code for an ordinary Buy Now button [Hack #28] . Copy the HTML code and paste it into your favorite HTML editor, such as Dreamweaver, FrontPage, or any plain-text editor (e.g., Notepad). Find the piece of code that references the image:

<input type="image" src="https://www.paypal.com/images/x-click-but23.gif" 

                border="0" name="submit" alt="Make payments with PayPal - it's 

                fast, free  and secure!">

The src parameter contains the location (URL) of the image to be used:

 src="https://www.paypal.com/images/x-click-but23.gif"

Simply change this source to the address (URL) of your button image:

src="http://www.anothersite.com/yournewimage.gif"

Or, if the image is located on the same site as your button code, it could be as simple as this:

src="/images/ournewimage.gif"

So, the final code should look like this:

<input type="image" ="http://www.anothersite.com/ournewimage.gif"

                border="0" name="submit" alt="Make payments with PayPal - it's 

                fast, free and secure!">

4.3.2 Button Design 101

The PayPal Button Factory provides some options for button appearance, though most of the supplied images are branded with the PayPal look and might not integrate cleanly with your web site's design. The previous section shows how to use any image you like, provided that you have one at the ready. With a simple web search, you can find images of buttons at web sites that specialize in shopping cart buttons. But for even more seamless integration, you can create your own image in an image-editing program, such as Photoshop or Paint Shop Pro.

The ideal sizes for your buttons, based on the sizes PayPal uses for their buttons, are 68x23 pixels for Buy Now buttons and 87x23 pixels for Shopping Cart buttons. You do not have to use these exact sizes for your own buttons, but do use them as guidelines when choosing appropriate sizes for your buttons.

You can also add interaction to your buttons by providing different variations of your images so that they look lit up or pushed in when your customers click them or move over them with their mice. This visual feedback and interactivity makes your buttons look and act more clickable, and it is a good way to get more customers to click them. To give your image a slightly different appearance on mouseover or when clicked, you need to have two button images: one to act as the normal, unactivated state and another to replace the original image with activated. Figure 4-2 shows two such images.

Figure 4-2. Normal and activated images for one button

The images in Figure 4-2 are identical, except that the activated image has been tinted gray. You might prefer a little more color or perhaps a highlighted border; to make the image look pushed in, replace the shadow pixels with the button foreground color (in this case, white).

Simply include this JavaScript code to swap one image for another upon mouseover:

<input type="image" name="submit" src="yourbutton_up.gif" onmouseover=

                "this.src='yourbutton_over.gif'" onmouseout=

                "this.src='yourbutton_up.gif'">

The two images for normal and activated states are yourbutton_up.gif and yourbutton_over.gif, respectively, in the preceding code. To have the button change when it is clicked (as opposed to responding to a mouseover), use this code instead:

<input type="image" name="submit" src="yourbutton_up.gif" onMouseDown=

                "this.src='yourbutton_over.gif'">

This just scratches the surface of what you can do. The more you do to polish the appearance and behavior of your buttons, the more customized (and hopefully professional) your site will appear to your customers.

< Day Day Up >