[Tutorial] Faster Floating Facebook Fanbox

[navjottomer]

Someone has requested me to help him to add a Facebook fanbox like on my website. It is not a regular iframe code i have converted that to javascript to control its loading behavior . With this method fanbox will load after full page render (worked for me), so it will not slowdown your page rendering. You can check the performance difference at http://tools.pingdom.com with regular code and with this one. Please follow steps below:

1.Add this code to your footer.php and don't forget to change tuffclassified with your Fanpage Id

Code: [Select]

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".tufflikebox").hover(function()
{$(this).stop().animate({right: "0"}, "medium");}, function()
{$(this).stop().animate({right: "-250"}, "medium");}, 500);}
);
//-->
</script>
<div class="tufflikebox" style=""><div id="tuffid"></div>

</div>

<script type="text/javascript">
//doesn't block the load event
function createIframe(){
  var i = document.createElement("iframe");
  i.src = "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftuffclassified&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=320";
  i.scrolling = "no";
  i.frameborder = "0";
  i.width = "245px";
  i.height = "320px";
  i.style = "border:none; overflow:hidden; width:245px; height:320px; background:#fff;"
  document.getElementById("tuffid").appendChild(i);
};

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", createIframe, false);
else if (window.attachEvent)
window.attachEvent("onload", createIframe);
else window.onload = createIframe;

</script>

And now add this code to your syle.css

Code: [Select]

.tufflikebox{background:url("facebook-logo.png") no-repeat scroll left center transparent!important;
display:block;float:right;height:320px;padding:0 5px 0 46px;width:245px;
z-index:99999;position:fixed;right:-250px;top:20%}
.tufflikebox #tuffid{background-color:#fff; border:none;position:relative;display:block;}
.tufflikebox span{bottom:12px;font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;right:6px;text-align:right;z-index:99999}
.tufflikebox span a{color:#808080;text-decoration:none}
.tufflikebox span a:hover{text-decoration:underline}
Ok now copy this image to your style.css folder



Thats it hope you all like it. You can check live demo on my site.

[sstef25]

This is really nice! Thanks!

[shragicz]

this is what I needed! Thank you very much ... I am going to test it

[BuySellAndSwap]

when i put the code into the footer it just shows the like box at the bottom of the page but not the facebook-logo on the side... I'm using the twitter theme please can you help?

Thank you

[navjottomer]

I checked source of your website and didn't see my code there.

[BuySellAndSwap]

I taken the code out as it didn't seem to work ill put it back on later on today for you to see
Thank you

[BuySellAndSwap]

hi

i have place the code back into the footer and have attached a copy of the footer.php and also the css folder if you can help please?

Thank you

[navjottomer]

Ok remove previous code from footer.php and css from your custom.css and add this to you footer.php now. And copy facebook-logo.png to your root directory of osclass installation.

Code: [Select]

<style type="text/css">
/* facebook box */
.tufflikebox{background:url("facebook-logo.png") no-repeat scroll left center transparent!important;
display:block;float:right;height:320px;padding:0 5px 0 46px;width:245px;
z-index:99999;position:fixed;right:-250px;top:20%}
.tufflikebox #tuffid{background-color:#fff; border:none;position:relative;display:block;}
.tufflikebox span{bottom:12px;font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;right:6px;text-align:right;z-index:99999}
.tufflikebox span a{color:#808080;text-decoration:none}
.tufflikebox span a:hover{text-decoration:underline}
</style>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".tufflikebox").hover(function()
{$(this).stop().animate({right: "0"}, "medium");}, function()
{$(this).stop().animate({right: "-250"}, "medium");}, 500);}
);
//-->
</script>
<div class="tufflikebox" style=""><div id="tuffid"></div>

</div>

<script type="text/javascript">
//doesn't block the load event
function createIframe(){
  var i = document.createElement("iframe");
  i.src = "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftuffclassified&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=320";
  i.scrolling = "no";
  i.frameborder = "0";
  i.width = "245px";
  i.height = "320px";
  i.style = "border:none; overflow:hidden; width:245px; height:320px; background:#fff;"
  document.getElementById("tuffid").appendChild(i);
};

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", createIframe, false);
else if (window.attachEvent)
window.attachEvent("onload", createIframe);
else window.onload = createIframe;

</script>


[BuySellAndSwap]

Hi sorry for delay thanking you for your help so thank you but when  i hover over the button it now dosn't show the like box if you can help please?

see it at www.BUySellAndSwap.co.uk

Thank you again

[navjottomer]

Can you give me ssh access to your server so i can do this manually.