Good observation. This is in fact some issue with the Facebook widget in some browsers, where it refuses to display if the item itself is hidden when it is loaded. I had to add a workaround fix for this, outlined below and already included in the
documentation.
Changes are outlined in
bold. First, add two new lines to the CSS:
/* CSS Social Thing */
#social-thing {position: absolute; right: 120px; top: 10px; display: none;}
.rounded {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.rounded-up {-webkit-border-top-left-radius: 3px;-moz-border-radius-topleft: 3px;border-top-left-radius: 3px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topright: 3px;border-top-right-radius: 3px;}
.background { background: url(halfblack.png);}
.item {float:left;}
.item img {border: none;}
.item img.smallicon {margin:5px; vertical-align:bottom;}
.item img.largeicon {position: absolute; left: 15px; top:15px;}
.item .service {position: absolute; right: -105px; top: 26px; height: 62px; display: none;}
.item .service * { white-space:nowrap !important; }
#facebook-layer.item .service {display: block; top: -100px;}
#facebook-layer.item.setpos .service {top:26px;}
#facebook-layer .service .container {margin: 19px 0 0 62px;}
#twitter-layer .service .container {margin: 21px 0 0 62px; width: 360px;}
#google-layer .service .container {margin: 20px 0 0 20px; width: 200px;}
#imagevue-layer .service .container {margin: 21px 25px 0 62px;}
#imagevue-layer .service .container a {color: #FFFFFF; text-decoration: none; font:15px Optima,Candara,arial,sans-serif;}
Then, amend one line in the javascript part of the HTML code:
$(selector).mouseenter(function () {
$("#social-thing").removeClass("background");
$(selector).addClass("background setpos");
$(".service", selector).fadeIn(150);
});