Firefox&Opera&IE bookmarking toolbar add-on.

[AnAlienHolakres3]

As you well know many social bookmarking sites have its own firefox toolbar. Of course it is possible to replace it with bookmarklet, but many users preffer toolbar with cooler design and more functionality.

So I made a simple toolbar for Firefox (as a plugin) and also I implemented it into Opera.
Example of plugin i made for firefox looks like this:


1) Toolbar for Internet Explorer v6:
It is possible to do it but i hate this browser, adding new icons to your toolbar with specific functionality is not possible without registry change (and honestly how many end-users is able to do it?). If you want to know how to do it anyway, there is a tut:Adding Toolbar Buttons .

2) Toolbar fo Firefox
There is very detail and good tutorial on Born Geek, the only withdraw is it is very long for our purpose make it as easy as possible (but recommendet).

2.1) Required files
Personally i recommend to edit following files in Notepad++ and select syntax to MS ini file.
Download tuttoolbar.xpi file to your preferred location and open your total (or other file) commander. This file is packed firefox plugin, you can install it and see what it does.

2.2) Steps to do
2.2.1 rername tuttoolbar.xpi to tuttoolbar.zip and open in, remember this filestructure, it is quite important.

file structure should look like this:

+- TutToolbar/
   +- install.rdf
   +- chrome.manifest
   +- chrome/

2.2.2 open resource description file (rdf) and change following:

     <!-- Required Items -->
        <em:id>your@site.com</em:id>
        <em:name>Pligg Toolbar</em:name>
        <em:version>1.0</em:version>

        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>1.5</em:minVersion>
                <em:maxVersion>2.0.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>

        <!-- Optional Items -->
        <em:creator>Your name</em:creator>
        <em:description>simple pligg toolbar</em:description>
        <em:homepageURL>http://yourdomain.com</em:homepageURL>

    </Description>
</RDF>

Save and close.

2.2.3. Open chrome directory, rename tuttoolbar.jar to tuttoolbar.zip and open. Your file structure is supposed to be like this:

+- TutToolbar/
   +- install.rdf
   +- chrome.manifest
   +- chrome/
        +-content/
        +-skin/

So in tuttoolbar.jar file are two folders- content and skin.
- open content folder, tuttoolbar.xul file, delete all, copy&paste following code and change highlited items to your own:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://tuttoolbar/skin/tuttoolbar.css" type="text/css"?>

<overlay id="TutTB-Overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         
    <script type="application/x-javascript"
            src="chrome://tuttoolbar/content/tuttoolbar.js" />
            
    <toolbox id="navigator-toolbox">
    
        <toolbar id="TutTB-Toolbar" toolbarname="Pligg Toolbar" accesskey="T"
                 class="chromeclass-toolbar" context="toolbar-context-menu" 
                 hidden="false" persist="hidden">
                     
            <toolbaritem flex="0"> 

                 <toolbarbutton id="TutTB-Web-Button0" tooltiptext="Pligg Homepage"
                               label="Pligg Homepage" oncommand="openHome();" />               
                <toolbarseparator />
                
                <toolbarbutton id="TutTB-Web-Button" tooltiptext="Save to Pligg"
                               label="Save to Pligg" oncommand="openSaving();" />
							   
				  <toolbarseparator />
                <toolbarbutton id="TutTB-Web-Button2" tooltiptext="Visit Pligg forumm"
                               label="Pligg Forum" oncommand="openForum();" />				  
            </toolbaritem>
     
            <toolbarspring />

        </toolbar>
    </toolbox>
</overlay>

Please nothe that Toolbar Name has to be the same as in your rdf file. Save. You can see that we call oncommand javavscript funtions (openSaving,openForum etc.), so now we will ad these functions to javascript file.

2.2.4 In the same directory open tuttoolbar.js file.
Now you can choose - you can simply add following functions (which are btw the same but this is more transparent ) and do nothing with other code (if you expect to improve your toolbar in future and read the f.. long but great tutorial on borngreek) or you can delete all and put only these functions:

function openHome()
{
 
	//open new window to your homepage
	void(open('http://yourdomain.com','resizable,location,menubar,toolbar,scrollbars,status'));
}

function openSaving()
{
	//open new window to your saving page
	q=(document.location.href);
	void(open('http://yourdomain.comsubmit.php?url='+escape(q),'','resizable,location,menubar,toolbar,scrollbars,status'));
}
	
function openForum()
{
	//open new window to your forum...if you have any:)
	void(open(http://yourdomain.com/forumlocation','Pligg Forum','resizable,location,menubar,toolbar,scrollbars,status'));
}

Save and close this file.

2.2.5 Open second folder, the skin folder and tuttoolbar.css file. Clear all and paste following code with your customization:

#TutTB-MainMenu {
    list-style-image: url("chrome://tuttoolbar/skin/main.png");
}

#TutTB-Combined-Button {
    list-style-image: url("chrome://tuttoolbar/skin/combined.png");
}

#TutTB-Combined-Button > .toolbarbutton-menubutton-button {
    -moz-box-orient: horizontal;
}

#TutTB-Web-Button,
#TutTB-Combined-Web {
    list-style-image: url("chrome://tuttoolbar/skin/yourSavingImage.png");margin-left:5px
}
#TutTB-Web-Button0 {list-style-image: url("chrome://tuttoolbar/skin/yourHomepageImage.png");margin-right:5px}

#TutTB-Web-Button2
{
    list-style-image: url("chrome://tuttoolbar/skin/yourForumImage.png");margin-left:5px
}


#TutTB-Combined-Image {
    list-style-image: url("chrome://tuttoolbar/skin/images.png");
}

#TutTB-ResizeBar {
    background-image: url("chrome://tuttoolbar/skin/gripper.png");
    min-height: 22px;
    min-width: 3px;
}

#TutTB-ResizeSplitter {
    background: transparent;
    border: none !important;
}

IDs with other images are not required and there is the same rule like with javascript other functions,recommendet not to do anything else if you plan to improve it.Save and close.

2.2.6 Image files you selected in step before copy to skin folder. Names are case-sensitive.

2.2.7. We are nearly done. Now we have to repack files to original xpi (x platform installation) file.

1) zip folders (of course with all files in) content and skin and the zip file rename to tuttoolbar.jar and place it to your chrome folder. The filestructure when it is done looks like this:

+- TutToolbar/
   +- install.rdf
   +- chrome.manifest
   +- chrome/tuttoolbar.jar

2)zip folder chrome,file install.rdf and chrome.manifest and resulted zip file rename to yourFile.xpi.

2.2.8 Thats it,you´ve got a new plugin to your Firefox. So open file and install plugin,restart firefox and see effect. If there is some error, you can uninstall plugin, check the files, repack and try it again. Repacking is quite boring so i recommend to use 4 tabs in Total commander. You can create tab with ctrl+t, 2 tabs for packing step 1 (tuttoolbar.jar) and next 2 tabs for creating the whole xpi file.

Hope it helps. If somebody is interested in adding buttons to Opera@USB version, this tutorial can be continued in second part. But it is necessary to take into considoration that plug-in into Firefox can download any user of your site. Tutorial for adding-buttons for Opera is not resulting in plugin, every user must edit its own files and it is not so easy as installation of firefox toolbar.

[crakez]

Thank you for sharing will try it out.

Cheers,
John

[brandondrury]

This looks ROBO AWESOME!

I'll definitely add this to the "to do" list.

Brandon