Categories: Blog

White background quickly appearing behind Facebook Like button issue

Building a Facebook like button using FBXML against a black background and have it display within a JS slider can create some ugly display issues.

One issue I’ve come across is when the background is black, the HTML element around the FB like button turns into a white background for a few hundred milliseconds (so that it loads the necessary code via Facebook servers) then reverts back to black once the buttons are loaded.

Although this may not bother some, it is still an annoyance as it causes a bit of a ‘what the?’ moment during a user’s experience of the site.

Below is a jQuery code snippet I’ve used to hide the element that contains the Facebook like button, then display it after 1000ms. You can vary the timeout depending on your needs.

$(‘#divname’).css(‘visibility’, ‘hidden’);
setTimeout(function() {
$(‘#divname’).css(‘visibility’, ‘visible’);
}, 1000);

Do you have a more elegant solution? Feel free to leave a comment below.

Peter Tran

Share
Published by
Peter Tran

Recent Posts

Kubernetes Resources to Learn From

I have been fortunate in working a lot more with Kubernetes lately over the last few months so I've been…

1 year ago

WordPress Development using Docker

Building my portfolio site, I thought I'd show you how I set up my Wordpress development using Docker. Given the…

1 year ago

Blank images in Puppeteer screenshots solved!

Frustrated with getting blank images in Puppeteer Chrome screenshots, recently I was in a situation where I needed to migrate…

1 year ago

Plans Moving Forward – The Revamped Web and I

It has been six year since my last major revamp/redesign of my current petertran.com.au portfolio site. So what are my…

1 year ago

Bad owner or permissions on .ssh/config

This article helps to solve a Bad owner or permissions on .ssh/config issue occurring on a Windows 10 machine when…

1 year ago

Accept payments easily and effortlessly with Pin Payments integration

Only a few lines of code required is to implement a payment system, thanks to inline Pin Payments integration. Accepting…

6 years ago