iframe content fill when content not loaded Facebook specific

Question

I am installing a Facebook-like box in iframe form. When you are not logged into Facebook, it leaves a blank spot that is set to the parameters specified by the original iframe. I would like to fill that iframe with an image to link to the Facebook page when someone is not logged into Facebook.

Logged In: http://ripvision.tv/images/fb-logged-in.PNG

Not Logged In: http://ripvision.tv/images/fb-not-logged-in.PNG

You can see on the "Logged In" that I was trying to set a class with a background image to show up when the content didn't show up but that showed up when content loaded and without. I would just like it to load an image link if the Facebook content doesn't load. I have tried everything I can think of.

I thought adding a background-color into the style of the iframe would work but it didn't. Here is the iframe code from Facebook.

   <iframe class="fb_background" src="//www.facebook.com/plugins/likebox.php?href=http  %3A%2F%2Fwww.facebook.com%2Fteamripoutdoors&amp;width=236&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:258px; background-color: #000;"  allowTransparency="true"></iframe>

I have been stumped on this for hours. If anyone could help, I would appreciate it.

Adam Azad Adam Azad · Accepted Answer · 2014-01-18T08:31:41

I would use FB.getLoginStatus to this

FB.getLoginStatus allows you to determine if a user is logged in to Facebook and has authenticated your app. There are three possible states for a user:

the user is logged into Facebook and has authenticated your application (connected)

the user is logged into Facebook but has not authenticated your application (not_authorized)

the user is not logged into Facebook at this time and so we don't know if they've authenticated your application or not (unknown)

In this case we will use not_authorized which means the user is logged into their Facebook account and will show the like box

unknown means the user is not logged into their Facebook account and show a fallback image

FB.getLoginStatus(function(response) {

  if (response.status === 'not_authorized') {
    // the user is logged in to Facebook, 
    // but has not authenticated your app
    $('#likeBoxDiv').fadeIn();
  } else {
    // the user isn't logged in to Facebook.
    $('#likeBoxDiv').html('{YOUR_FALLBACK_DIV');
  }

});

Here's a simple Fiddle

Remember: create an App for this and don't authenticate any user with this app otherwise you have to add connected statement, too

iframe content fill when content not loaded Facebook specific

1 Answers