How To:
To use JAddTo, first add the stylesheet and script references to the head section. Make sure to include a reference to JQuery. Your references should look like this:
<link rel="stylesheet" href="Stylesheets/jquery.jaddto.css" type="text/css" media="print, projection, screen">
<script src="JavaScript/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="JavaScript/jquery.JAddTo.js"></script>
Next, initialize JAddTo like so:
<script>
$(document).ready(function(){
$("#Example1").JAddTo();
});
</script>
The result looks like this:
You can also set various options.
-
ButtonTitle:
- Sets the title text. Defaults to "Add To:"
-
IncludeSites:
- Sets which Add To links to include and in what order. Should be in the form of an array of strings or objects. Objects should have three entries (all strings): LinkURL, LinkImage, and LinkTitle. The default is to include all sites that JAddTo supports. Defaults to ["BlinkList", "Blogmarks", "Del.icio.us", "Digg", "Fark", "Furl", "Magnolia", "Newsvine", "Reddit", "Segnalo", "Simpy", "Smarking", "Spurl", "Stumbleupon", "Technorati", "Wists", "Yahoo!"]
-
PageURL:
- Sets the page's URL. Defaults to document.location
-
PageTitle:
- Sets the page's title. Defaults to document.title
-
ImageLocation:
- Sets the location of the images. Defaults to "images/addlinks/"
-
AddSpaceOnBlank:
- Adds an initial nonbreaking space ( ) to a blank element. Defaults to true
-
HideTitle:
- Hide's the title text element. Defaults to false
-
ParentClass:
- CSS Class to add to the parent element. Defaults to AddToLinksParent
-
ContainerClass:
- CSS Class of the container SPAN. Defaults to AddToLinks
-
TitleClass:
- CSS Class of the title SPAN. Defaults to AddToLinksTitle
-
SiteListClass:
- CSS Class of the SPAN containing the site images. Defaults to AddToLinksList
-
ShowText:
- Whether to show the text next to the icons. Left, Right, or Hide. Defaults to Hide
Here's an example of the options in use. The following example would add only Yahoo!, Digg, and Technorati links (in that order) along with a custom "Shooting for A Cause" link (using the Spurl image). The example also utilizes a changed PageURL, PageTitle, and ButtonTitle:
<script>
$(document).ready(function(){
$("#Example2").JAddTo({
IncludeSites: [
"Yahoo!",
"Digg",
"Technorati",
{
LinkURL: "http://www.shootingforacause.com/2008/",
LinkImage: "images/addlinks/spurl.png",
LinkTitle: "SFC!"
}],
PageURL: "http://www.ShootingForACause.com/2008/",
PageTitle: "Shooting For A Cause",
ButtonTitle: "Bookmark SFC:"
});
});
</script>
The result looks like this:
Here's another options example. The following example would add only Yahoo!, Digg, and Technorati links (as before), but this time would also use some custom CSS Classes, hide the ButtonTitle section, and would put the icon's text to the right of the icons.
<script>
$(document).ready(function(){
$("#Example3").JAddTo({
IncludeSites: [
"Yahoo!",
"Digg",
"Technorati"],
PageURL: "http://www.ShootingForACause.com/2008/",
PageTitle: "Shooting For A Cause",
HideTitle: true,
AddToLinks: "LinksExample3",
SiteListClass: "LinksExample3List",
ShowText: "right"
});
});
</script>
The result looks like this:
Revisions:
- 0.3 - Added the ability to do custom CSS Classes, hide the ButtonText title element, and Show/Hide the icon titles. (12/15/2007)
- 0.2 - Added the ability to do custom entries. (12/13/2007)
- 0.1.1 - Fixed a minor bug that gave the simpy and smarking icons the link for Spurl. (12/12/2007)
- 0.1 - Initial Release (12/12/2007)
Planned Improvements:
- Fly out effects
- Drop down menu option