Adding a PayPerPost Button to your WordPress Posts

Matthew left me a message earlier today asking me how I worked out the placement of my PayPerPost buttons at the base of each post. After checking out Cleaker 2.1 (Matthew's theme) I noted two places for the code that might work nicely. Using some of the code from my previous post on using CSS to float images I worked out the following possible setups.

Aligning an Image Right

After taking a closer look at the code for Cleaker I identified two places for the button. Matthew asked that the code be aligned-right so the first thing we need to do is outline the code for floating the image.

In my other post on aligning images we talked about how to float images to the left and right of text. We're not really looking to wrap text in this case but the code is very similar. As part of the image you just want to add the style attribute to your image. Inside the image just add style="float:right" before closing the image tag.

Adding the code Before the Post Meta

The above code is some of the easiest. On the PayPerPost affiliate page you'll get all the code you need, just add the style attribute from above and place the code before the <p class="postMeta"> tag. Your code should resemble the code below.

<a href="http://tinyurl.com/#"><img src="http://tinyurl.com/#"></a>

Adding the code After the Post Meta

To add the button just after the post meta you can actually use the exact same code - just place it after the <p class="postmeta"> tag. You'll see something similar to the button below.

As you can see above the button ges places just right of the beginning of the comments section. To fix this just add a line break after the button. Adding <br style="clear:right" /> will open up some space and stop the button from floating next to anything after the line break.

Adding the Affiliate Code to Posts

PayPerPost requires any posts that's part of the service include a disclosure button. Because this button only needs to appear in posts you've submitted there's no need to add it to the template, instead just add it to the bottom of your posts. Adding it just like any other picture in the post is how I've done it in the past. For an example you can check out my post concerning PayPerPost's Get Paid to Review my Post affiliate offerings.