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.