Simple Facebook "like" button on the navbar

[409industries]

Originally Posted by 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>

Can everything between the "style" tags go in the additional.css template? Thanks for posting all of that up, i'll be giving it a try!

--------------- Added [DATE]1407274350[/DATE] at [TIME]1407274350[/TIME] ---------------

Originally Posted by Darkness95

Ok, i have found it with the link of your screenshots! But i can't see the connect button! :S

Indeed, only logged in users see the connect button (oh and don't bother using Internet Explorer it never shows it )

Use this test account if you want to take a look:

user: support3
pass: P@ssw0rd123!

Thanks a bunch for taking the time to check it all out! :up: