Include Amazingjokes.com on your site...

... For free! We update daily, and all jokes are 100% clean and family friendly. We will not show 3rd party ads with the jokes. We do include a link to amazingjokes.com on which people can find more jokes.

A new clean joke (text)

There are two options, a teaser, or the entire joke. You can adapt the way the joke is showing by placing the following Custom Style Sheet definitions somewhere in the header of your site (Somewhere between <head> and </head>):

    <style='text/css'>
    .amazingjokes{
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        width: 400px;
        text-align: left;
        border: 1px solid black;
        border-radius: 4px;
        margin: 5px;
        padding: 5px;
        background-color: white;
    }
    .amazingjokes h1{
        margin-top: 0px;
        font-size: 14px;
    }
    </style>
    

You are completely free in adapting this CSS code to your needs though! Once you put this code in your header you can choose between two versions, the teaser joke or the full joke. The teaser is only the first part of the joke. Biggest advantage is that the teaser joke will never exceed a certain height. The full joke can get long, please keep that in mind when designing your page

The TEASER joke

the jQuery option:

If you have jQuery on your site you can put the following code on the place you want the joke to appear:

    <div class="amazingjokes">loading...</div>
    

Then, place the following in your header (or add the 'getScript' code to your jQuery's ready-function):

    $(document).ready(function(){
        $.getScript("http://www.amazingjokes.com/teaser.js",function(){$(".amazingjokes").html(amazingjokes_body)});
    });
    

the JavaScript option:

Put this on the place you want the joke to appear:

    <div> class="amazingjokes">
        <script src="http://www.amazingjokes.com/teaser.js"></script>
        <script>document.write(amazingjokes_body);</script>
    </div>
    

Both versions should result in this:

Loading...

The FULL joke

On the place you want the full joke to appear, place the following code:

    <script type="text/javascript" src="http://www.amazingjokes.com/joke.js"></script>
    

Here is how this would look like:

You can make changes to how the window looks by modifying the class 'amazingjokes' in the style sheet definitions. You can change the width, the colors, the font, the border, everything. If you need any help you can contact us.

The code works on all leading browsers, including Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Apple Safari. It also works on the leading mobile devices, like Windows Mobile Smartphones, iPhone and Blackberry!