Question

I have a facebook login button in my page. I put in in a div :

<div id="signin">               
    <div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" registration-url="index.php?reg=1"></div>                
</div>

When the user is already logged in facebook and registred in my app this apppears :

I have 2 problems :

• When the page is loading the log in button appears first in an extreme corner of my page. Then it comes back to the right position.

• If the user is not registred/logged in (first button) I would like it appears a bit lower, is it possible ?

Thank you for your help

Answer 1

Try setting the CSS for the signin DIV to be overflow: hidden so that any misaligned content isn’t displayed. This will fix the login button appearing in the corner of your page.

There isn’t a solution to lower the button, but you can try this approach instead:

1. Set data-show-faces="false" to hide the faces.
2. Once the user has logged in, use the face pile plugin to achieve the same effect as the login button.

The above steps will let you configure each element properly so you can use CSS to move the login button down, while keeping the faces as before.