PunchCard 1.3

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

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

• 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