PunchCard 1.3

PunchCard is a javascript widget for simplifying content submission to social bookmarking sites.

Version 1.3 - 2007-05
Copyright (c) Andrea Ercolino
Published under the MIT License

Features

  • A nice jQuery widget for submitting your content to dozens of social bookmarking sites like del.icio.us, digg, technorati,… (there are 45 now)
  • Punchcard metaphore
    • Every button is a tiny mark on a punchcard
    • When the mouse hovers the punchcard a tooltip pops up
    • The tooltip shows icon and name of the site corresponding to that mark
    • If the user clicks the mark, then
      • the site opens in a new window
      • with the title and url of the content already set
      • and the punchcard gets punched where the mark was clicked

A widget for my Chili project
Chili is a jQuery script for code highlighting
This is a punchcard widget in the new MINI style
A widget for my Enzymes project
Enzymes is a WordPress plugin for execution and transclusion of custom fields
This is a punchcard widget in the traditional style
A widget for my PunchCard project
PunchCard is a jQuery widget factory for submitting URLs to social bookmarking sites
This is a punchcard widget in the new STRIP style

  • You can add as many punchcards as you like to the same page, each one for submitting a different content: the holes belong to that content
  • Easy to install
    In the HEAD element include

    • the needed scripts (mandatory)
    • the global configuration (optional)
  • Easy to add
    Put a div element wherever you want a widget to appear
  • Easy to customize
    Compare example.html to punchcard.css. If you want to change the set of bookmarking sites, you can edit the PunchCard section at the beginning of punchcard-1.3.js

EXAMPLE
Here is the html code used to display the above punchcard.

(1) These are the two files needed by PunchCard. Put them into the HEAD element. Copy and paste

<script type="text/javascript" src="/personal/projects/punchcard/1.4/punchcard-1.4.js"></script>

(2) These are global configurations. If needed, put them into the HEAD element, after (1). Copy, paste, and adjust
<script type="text/javascript">
PunchCard.icons  = "/personal/projects/punchcard/1.4/";
PunchCard.styles = "/personal/projects/punchcard/1.4/";
</script>

(3) These are the widgets, represented by a div element with a ‘punchcard’ class. Put each of them wherever you want. Copy, paste, and adjust
<div style="border: 1px dashed silver; padding: 10px;">

<h5>A widget for my Chili project</h5>
Chili is a jQuery script for code highlighting
<div class="pc_MINI"><div class="punchcard" style="padding: 10px;">
	<object>
	<param name="punchcard" value='{
		title: "Chili / Syntax Highlighter"
		, url: "http://noteslog.com/chili/"
		, id : "Chili"
	}'/>
	</object>
</div></div>
This is a punchcard widget in the new MINI style

<h5>A widget for my Enzymes project</h5>
Enzymes is a WordPress plugin for execution and transclusion of custom fields
<div class="punchcard" style="padding: 10px;">
	<object>
	<param name="punchcard" value='{
		title: "Enzymes / WordPress Plugin"
		, url: "http://noteslog.com/enzymes/"
		, id : "Enzymes"
	}'/>
	</object>
</div>
This is a punchcard widget in the traditional style

<h5>A widget for my PunchCard project</h5>
PunchCard is a jQuery widget factory for submitting URLs to social bookmarking sites
<div class="pc_STRIP"><div class="punchcard" style="padding: 10px;">
	<object>
	<param name="punchcard" value='{
		title: "PunchCard / Social Bookmarklet"
		, url: "http://noteslog.com/punchcard/"
		, id : "PunchCard"
	}'/>
	</object>
</div></div>
This is a punchcard widget in the new STRIP style

</div>

Tips

  1. PunchCard’s global configuration doesn’t need to be inside the HEAD. It can be wherever after the ‘punchcard.js’ line in the HEAD and before the first widget in the BODY.
  2. There are two possible titles for any PunchCard widget: one is the title of your content (defined in the widget’s object), and the other is the title of the widget (defined in the widget’s div). The former is used by many social bookmarking sites to show the link to your content decorated with a meaningful title. The latter is not used by PunchCard, so you can use it at your discretion.
  3. The widget’s div element support all the html you want to put there, with two little exceptions: a) if you apply a style to it, it should not change the width, which is related to the shape of the widget; b) any content you put into, it will always appear before the widget

One Reply to “PunchCard 1.3”

  1. Pingback: WP PunchCard

Leave a Reply

Your email address will not be published. Required fields are marked *