1

I have the Facebook like button on my site http://theganjagirls.com ... everything looks and works fine when I'm logged into my Facebook account... But when I'm logged in as a page admin, the Facebook like button displays a "switch" link inside a big white box. Ive seen this happen on many big sites so I know its a problem with Facebook. I just went on to teespring.com/ganjagirls and they cleverly make the Facebook like button simply display:none when your logged in as a page admin.

So my question is: How do i make the Facebook like button display:none only if the viewing user is logged in to Facebook as a page admin?

I tried to do it my self by rapping the Facebook code in a container and using some JavaScript... but I'm amateur and I couldn't get it to work properly.

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

tshepang
  • 12,111
  • 21
  • 91
  • 136
nouveau
  • 1,162
  • 1
  • 8
  • 14

4 Answers4

1

You could use a little script to set a 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

Be aware you may run into a load-race. If the script runs before the widget loads this method may fail...

apaul
  • 16,092
  • 8
  • 47
  • 82
  • Good idea, but the logic seems wrong. "If the span is greater than 200 pixels, then hide it." ? Your fiddle is broken. For the like box, the span has zero width if the user is logged in as a page. If the user is logged in as a person, then the like box loads and the span has a width. Here's the corrected logic: http://jsfiddle.net/alexbell/J8s3T/ – Ben Feb 08 '14 at 01:24
  • @Ben I think facebook has been playing with their plug in... see update – apaul Feb 08 '14 at 03:36
0

I don't believe you can do that. Unless Facebook has made code for it, You can't just check for yourself.

Please remember that if you put in the default code for a Facebook like button, it will respond appropriately if the user is logged in.

Good luck!

totallyuneekname
  • 2,000
  • 4
  • 16
  • 27
  • I have been "just checking my self" for several days now... cant find the answer that's why I posted a question here. teespring.com is achieving the effect I want so it must be possible. Also the Facebook code I'm using is copy and pasted straight from Facebook so I know its the correct code. – nouveau May 04 '13 at 01:00
0

Wouldn't this: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/ (for getting the logged in status) combined with this: Facebook: get list of pages that a user is admin of (for getting the pages the user is admin of) be solution to your problem?

Community
  • 1
  • 1
eithed
  • 3,933
  • 6
  • 40
  • 60
0

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

<style>.social-container{width:1px;height:1px;overflow:hidden}</style>
Kavita
  • 225
  • 1
  • 3
  • 12