Tipjoy post-icon widget for Blogger

After my last post about micropayments (and Tipjoy in particular), I had several inquiries as to how I added the "Tip 25 cents" icon below each blog entry.

It's pretty simple really.  First go to http://tipjoy.com/banners/custom/ to create your custom Tipjoy button. You can then place it anywhere you want on your site and even style it with custom CSS... Or you can forget the default button and CSS and just make your own (like on flyingpizzakitty.com and this website).

My button code looks like this.

<script language="javascript" src="http://tipjoy.com/socnet/widget?username=techhead&url=blog.techhead.biz&message=Thank's%20for%20your%20support!&amount=0.25">script>

And I didn't bother copying the CSS portion because I didn't really want to show the default button. So to avoid showing the button, I wrapped the button code in...

<div style="display:none">...</div>

To add a Tipjoy icon to the bottom of each entry, I wrote a short jQuery script, so you'll need to make sure that jQuery gets loaded sometime prior to the script being executed.

Your blog may be loading jQuery already. If not, add the following to the section of your template or just directly above the icon script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Once you have jQuery available, you can add a "tip reminder" icon to each blog entry by copying the below script either directly into your blog template or by adding an HTML/Javascript Page Element to your Layout.

<script type="text/javascript">
(function($) {
  $(function() {
    $('.hentry').each(function() { // for each blog entry
      var icon = $('<span><a href="javascript:tipjoyOpenLightbox()">Tip 25&#162;</a></span>');
        $('a', icon).css({
          'padding':'1px 5px 5px 22px',
          'background':'url(http://techhead.biz/tipjoy/tipjoystar.gif) no-repeat scroll 0 0'});
      $(this).find('.post-icons').append(icon); // add the Tipjoy icon
    });
  });
})(jQuery);
</script>

And that should do the trick! Of course, you may want to change the figure from "25 cents" to something else. If you do, just remember to change it in both the Tipjoy button script and in the icon script.

If you would like to place an additional tip reminder in the text of your blog post itself, here is another little formula.

<a href="http://tipjoy.com/u/myusername" onclick="if (window.tipjoyOpenLightbox) {tipjoyOpenLightbox();return false} else return true">TEXT OR IMAGE HERE</a>

Speaking of which, if you found this article helpful, please help keep the monkey playing.