How to add an icon on addon bar at first install?

I followed this doc Mozilla Developer Network: Creating toolbar buttons to create a button for my addon. It does work, but when I install the addon the first time the icon doesn't show on the addon bar.

How can I make the icon appear on the addon bar right after the user install my addon and then keep his location preference?

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="chrome://.../content/firefox/browser.css"?>

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <script type="text/javascript" src="chrome://...../content/firefox/browser.js" />

  <toolbarpalette id="BrowserToolbarPalette">
    <toolbarbutton id=".....-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
      label="...." tooltiptext="Facebook Manager"
      oncommand="System.......Toolbar.Show(event)" />
  </toolbarpalette>

</overlay>

How can I add the button automatically to addon bar only once?

I found this code to add the button programmatically, it shows my button, but it messes up with the other buttons.

var myId    = "myaddon-button";
var navBar  = document.getElementById("addon-bar");
var curSet  = navBar.currentSet.split(",");

if (curSet.indexOf(myId) == -1) {
    var set = curSet.slice(0, curSet.length).concat(myId).concat(curSet.slice(curSet.length));

    navBar.setAttribute("currentset", set.join(","));
    navBar.currentSet = set.join(",");
    document.persist(navBar.id, "currentset");
    try {
        BrowserToolboxCustomizeDone(true);
    }
    catch (e) {}
}

addon-bar is working fine.

you just have to put your elements inside the toolbar and give it an id of addon-bar example:

your js goes here

    <toolbar id="addon-bar">
        <menulist>
            <your dropdown blah blah blah>
        </menulist>
    </toolbar
</overlay>

It's not an "install action" to add your button. You simply declare the button as part of the overlay and it's added in when your extension overlay is applied.

Anyway, it looks like you're adding the button to the toolbar palette... so it will show up in the big list of buttons when you right click on the top toolbar and click "Customize..."

The addon bar is at the bottom and you can add to it like so:

<toolbar id="addon-bar">
  <!-- your elements go here. toolbarbutton, etc -->
</toolbar>

It seems that the addon-bar is broken, but I could add it on nav-bar looking at Firebug's code.

if (firstrun) // from preferences
{
    Services.prefs.setBoolPref("extensions.addon.FirstRun", false);
    Services.prefs.setCharPref("extensions.addon.InstalledVersion", curVersion);

    var startButtonId = "addon-button";
    var navBar = document.getElementById("nav-bar");
    var currentSet = navBar.getAttribute("currentset");
    if (!currentSet)
        currentSet = navBar.currentSet;

    var curSet = currentSet.split(",");
    if (curSet.indexOf(startButtonId) == -1)
    {
        var set = curSet.concat(startButtonId);
        navBar.setAttribute("currentset", set.join(","));
        navBar.currentSet = set.join(",");
        document.persist(navBarId, "currentset");

        try
        {
            BrowserToolboxCustomizeDone(true);
        }
        catch (e) {}
    }
}