How to make Facebook look like a No button when logged in as a page

Question

I have a Facebook button on my site http://theganjagirls.com ... everything looks and works fine when I logged in to my Facebook account ... But when I logged in as a page administrator, the Facebook button is like a button , displays the "switch" link inside the large white box. I saw this happening on many large sites, so I know this is a problem with Facebook. I just went to teespring.com/ganjagirls and they cleverly make Facebook as a button just displayed: no, when you are logged in as the page administrator.

So my question is: how to make Facebook as a button display: no one, only if the viewer is registered on Facebook as the page administrator?

I tried to do it myself by tapping the Facebook code in the container and using some kind of JavaScript ... but I'm an amateur, and I could not get it to work correctly.

Here is what I got so far in CodePen: http://www.codepen.io/nouveau/pen/zfcLu .

Answer 1

You can use a little script to set the timeout function and check the width of the widget

var timer; $(window).load(function () { window.clearTimeout(timer); timer = window.setTimeout(function () { if ($('.fb-like').width() === 0) { $('.fb-like').hide(); console.log('face'); } }, 1000); // using 1000 milliseconds to work around load race }); 

Working example

Remember that you may encounter a race. If the script is executed before the widget loads, this method may fail ...

Answer 2

I do not believe that you can do this. If Facebook has n't made a code for it , you can't just check it yourself.

Remember that if you put the default code for the Facebook button, it will respond accordingly if the user is logged in.

Good luck

Answer 3

There wouldn’t be this: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/ (to get login status) combined with this: Facebook: get a list of pages that the user is an administrator (to get pages which the user is the administrator) is the solution to your problem?

Answer 4

put the icons in the container and apply the following css:

 <style>.social-container{width:1px;height:1px;overflow:hidden}</style>