Simple Facebook "like" button on the navbar

[tbworld]

Yeah, the CSS here can get a bit tricky. On top of that the selector names are inconsistent, some use "fb-" others use "fb_". Even if you do not use some of the selectors below keep them handy for the future. Alter the margins to your layout.
I modified the HTML structure just a bit with a container class ".fb_custom_container".

<style>
/* Add this to the bottom of your CSS file,
   It was just placed here for convience.

   1px = property placeholder so you can see the properties in a browser debugger.
         Their actual value is 0px;

    You will need to alter the following values to adapt to your layout.
*/

.toplinks ul.nouser #fb_loginbtn {
  margin-right: 1px;   /* 0px */
}
.toplinks ul.isuser #fb_loginbtn {
  margin-right: 5px; 
}
.toplinks ul.nouser .fb-like {
  margin-right: 12px; 
}
.toplinks ul.isuser .fb-like {
  margin-right: 1px;   /* 0px */ 
}
.toplinks ul.isuser #fb_link {
  margin-right: 12px; 
}
.toplinks div.fb_custom_container {
  float: left;
}
</style>

<li id="fb_headerbox" class="hidden">
    <div class="fb-like" data-href="http://facebook.com/myfacebookpage" data-send="false" data-layout="button_count" data-width="30" data-show-faces="false" data-font="verdana" data-colorscheme="dark">
    </div>
    <div class="fb_custom_container">
        <vb:if condition="$show['facebookuser']">
            <a id="fb_link" href="{vb:raw profileurl}">
                <img id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />
                <img id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />
            </a>
        <vb:else />
            <a id="fb_loginbtn" href="#"><img src="{vb:stylevar imgdir_misc}/facebook_login.gif" alt="{vb:rawphrase facebook_connect}" /></a>
        </vb:if>
    </div>
</li>