Notes Log

Changes

• Faster Page Loads With Image Concatenation
• Updated the code to use version 1.1.2 of the jQuery library (bundled)

Files

• download all in a zip
• read the manual

(the greeny thing below this line is a punchcard)

What you find in the PunchCard Manual is valid in general for any html page and blog system, but if you need a 5 minutes guide for adding a properly formatted PunchCard to each WordPress post, here it is.

1. download PunchCard 1.2, and extract it to a local folder
2. locate the file jquery-1.1.1.pack.js and upload it to the remote folder / wp-content / jquery /
3. upload all the other files to the remote folder / wp-content / jquery / punchcard /
4. edit the remote file / wp-content / themes / default / header.php, 
   locate the </head> tag, add the following code right before it, and then close and save the file:
   

   <script type="text/javascript" 
   	src="<?php bloginfo('siteurl'); ?>/wp-content/jquery/jquery-1.1.1.pack.js">
   	</script>
   
   <script type="text/javascript" 
   	src="<?php bloginfo('siteurl'); ?>/wp-content/jquery/punchcard/punchcard-1.2.pack.js">
   	</script>
   
   <script type="text/javascript">
   PunchCard.icons = "/aercolino/punchcard/icons/";
   PunchCard.styles = "<?php bloginfo('siteurl'); ?>/wp-content/jquery/punchcard/";
   </script>

5. edit the remote file / wp-content / themes / default / index.php, 
   locate the <p class="postmetadata"> tag, add the following code right before it, and then close and save the file:
   

   <?php 
   ob_start();
   the_title();
   $title = ob_get_contents();
   ob_clean();
   the_permalink();
   $permalink = ob_get_contents();
   ob_end_clean();
   ?>
   
   <div style="text-align:center;" class="pc_MINI"><div class="punchcard">
   	<object>
   	<param name="punchcard" value='{
   		title: "<?php echo $title; ?>"
   		, url: "<?php echo $permalink; ?>"
   		, id : "<?php $pieces = explode( "?", $permalink ); echo $pieces[1]; ?>"
   	}'/>
   	</object>
   </div></div>

That’s all.

• you can repeat step 5. for the file / wp-content / themes / default / single.php
• if you are not using the default theme, remember to appropriately change the path to the theme folder in the previous steps

Following this fast guide you’ll get a PunchCard at the bottom of each post, like mine. Each PunchCard will reference your post (title and URL).

Feel free to play with the PunchCard stylesheet and setup for customizing your punchcards.

Changes

• Simplified the inclusion of the PunchCard code in a page
• The configuration of a widget is now by means of a metaboject, and is compliant with XHTML 1.0 Strict
• Updated the code to use version 1.1.1 of the jQuery library (bundled)
• The example.html file shows how to put on the same page as many widgets as you like. Each of them can have it’s own style
• Simplified the stylesheets. Add new styles for colors and shapes of the widgets to the punchcard.css stylesheet (compare with example.html)

Files

• download all in a zip
• read the manual

(the greeny thing below this line is a punchcard)