Skip to main content

Blogger Blogs Displaying Mysterious Transparent Boxes, Covering Blog Content

We're seeing a steady flood of problem reports about various Blogger blogs that have developed a mysterious transparent box, covering some portion of the blog surface when displayed. Some blogs display the box for all views, others for main page view only, and still others for specific individual posts. The box may be visible at the top of the page or in the middle - and may scroll with the screen, or may remain fixed relative to the display. In many cases, it blocks important blog content, and / or prevents clicking on crucial links.

Initial observations, during the immediately previous 2 - 3 days. referred to a "FaceBook or similar Social Networking gadget". Digging deeper, and looking closely at reported cases, we can look for the problem itself.

After repeated examination of multiple cases, we're seeing a more specific pattern, in the problem source code. Using a text browser tool, we find the following code (with gratuitous line breaks added for readability), which appears to be the kernel of the problem.

<div id="fb-root"></div><script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script><br />
<div class="fb-like"
data-href="https://www.facebook.com/xxxxxxxxxxx"
data-send="false" data-show-faces="true" 
data-width="450"></div>

(Note that "xxxxxxxxxxx" will be the FaceBook user name, providing the proper addressing to the account where the "Like" transaction is targeted).

The problem appears to involve the FaceBook Like accessory. It's possible that FaceBook Support can provide a better diagnosis - but for right now, I'll simply suggest removal of the above code. In the cases where the code was installed into an empty HTML / JavaScript gadget (and with no other accessories installed there also), I'll advise removal of the gadget containing the code.

If you can identify the problem gadget in your blog, you can edit the gadget, and Remove it.

As an alternate solution, you may add CSS which will hide the boxes. Only time will tell, if this is a better alternative for many blog owners. Using the "Add CSS" wizard in the Template Designer Advanced menu, add the following:
#fb_xdm_frame_http, #fb_xdm_frame_https
{
 display:none !important;
}

Depending upon your level of technical comfort and expertise, you may elect any one of three solutions.
  1. Remove the entire HTML gadget.
  2. Remove the specific problem code.
  3. Add CSS to hide the problem.
It's your blog, and your accessories.

Note that after you add or remove the code in question, and save the changes, you will need to clear browser cache and restart the browser, to accurately test success in resolving the problem.

>> Top

Comments

Troy Chapman said…
Thank you for this help! I was one of the people who questioned this on the Blogger forum and I received your answer (only after digging it out of my spam filter).
Alyssa said…
Thank you for your help, I just had to past because mine doesn't seem to be my Facebook, I tried removing it... well I tried lots of things that didn't work.
Unknown said…
Thanks for posting this. After trying G+ Blogger Help (and getting none) Your tip fixed my problem. I can't thank you enough!

Popular posts from this blog

What's The URL Of My Blog?

We see the plea for help, periodicallyI need the URL of my blog, so I can give it to my friends. Help!Who's buried in Grant's Tomb, after all?No Chuck, be polite.OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

Leave Comments Here

Like any blogger, I appreciate polite comments, when they are relevant to the blog, and posted to the relevant article in the right blog. If you want to ask me a question thats relevant to blogging, but you can't find the right post to start with (I haven't written about everything blogger related, yet, nor the way things are going I don't expect to either), ask your questions here, or leave an entry in my guestbook.

As noted above, please note my commenting policy. If you post a comment to this post, I will probably treat it as a "Contact Me" post. If you have an issue that's relevant to any technical issue in the blog, please leave a comment on the specific post, not here. This post is for general comments, and for non posted contact to me.

If the form below does not work for you, check your third party cookies setting!

For actual technical issues, note that peer support in Blogger Help Forum: Something Is Broken, or Nitecruzr Dot Net - Blogging is, almos…

What Is "ghs.google.com" vs. "ghs.googlehosted.com"?

With Google Domains registered custom domains becoming more normal, we are seeing one odd attention to detail, expressed as confusion in Blogger Help Forum: Learn More About Blogger.My website uses "ghs.google.com" - am I supposed to use "ghs.googlehosted.com", instead?It's good to be attentive to detail, particularly with custom domain publishing. This is one detail that may not require immediate attention, however.