How To Use The TagIt Gadget

Javascript tag

Place this javascript segment anywhere on your page:

     <script type="text/javascript" src="http://tagit.se/js/tagit.js"> </script>
		

Simple Usage

The simplest way to use the TagIt button is to include the TagIt button Javascript, and define one or several HTML <span> elements in your page with a classname of "tagit", and you're set. The script will automatically create the dynamic TagIt button and place it inside the defined HTML elements.

Advanced Usage

The TagIt button can be dynamically instatiated and given a configuration that alter its size, shape etc. Below are more examples to get you started.

Overview of configuration parameters

Many of these configuration parameters can be used together to create a custom TagIt gadget.

  configuration = {icon:       'http://tagit.se/img/minilogo.png',
		   icon_sx:    16,
		   icon_sy:    16,
		   text:       "TagIt",  
		   noIcon:     false,
		   url:        document.location.href,
		   font:       "Arial, Verdana, sans",
		   fontSize:   "11px",
		   fontColor:  "white",
		   textAlign:  "center",
		   rows: 3,
		   cols: 4,
		   site_width: 88,
		   site_height:16,
		   show_event: 'mouseover',  // or 'click'
		   element:    "put_tagit_here",
		   newWindow:  true,
		   alwaysOpen: false,
		   background: '#1276ef',
		   className: false,
		   tagName: "SPAN"};

	

Multiple buttons with different URLs on same page

To use the TagIt button in multiple instances with different URLs on the same page, you can define <span> element with a classname of "tagit", and let the TagIt class constructor use the "href" attribute of the <span> to create an instance of the TagIt gadget:

	 ...
	 <span class="tagit" href="http://my.site.com/page/1"/>
	 ...
	 <span class="tagit" href="http://my.site.com/page/2"/>


  configuration = {...
                   className:  "tagit",
		   background: '#ef7612'};
	new TagIt(configuration);

	

More examples

Example 1

     var t = new TagIt({element: 'put_tagit_here_1',
	            rows: 3,
		    cols: 4,
		    site_width: 70,
		    textAlign: 'center'});
 t.init();
    
	    

Will look like this:

Example 2

     var t = new TagIt({element: 'put_tagit_here_2',
	            rows: 2,
		    cols: 5,
		    noIcon: true,
		    site_width: 70,
		    textAlign: 'left'});
 t.init();
    
	    

Will look like this:

Example 3

     var t = new TagIt({element: 'put_tagit_here_3',
	            rows: 1,
		    cols: 6,
		    site_width: 60,
		    textAlign: 'left',
		    noIcon:true,
		    text:false,
		    background: '#555555',
		    sites: ['facebook', 'pusha', 'bloggy', 'twitter', 'blogspot', 'live'],
		    alwaysOpen: true});
 t.init();
    
	    

Will look like this:

If you need any kind of help getting the gadget to work for your site, please drop us a line and we'll help you get started!