Thread: Add A Facebook Like Box For Your Page In The Template

The Facebook Like box is the best way to get your Facebook page on other websites, including your own!

http://developers.facebook.com/docs/...gins/like-box/

The big problem a lot of storefront owners will run into is the secure sections of the website. Using the Facebook Like box code will cause the warning that not all sections of this page are secure. If you are on IE that means a popup stopping you dead in your tracks.

Luckily you can change the Facebook code to change to https when needed.

This is more of a challenge with XFBML so we will be using iFrame integration.

First visit the Facebook Like box link and create your like box. Personally we remove the header than then put an image we create over the box making it look as one.

Now once you have it looking how you want press the get code button. Now select all the of the code inside the iFrame section and keep it somewhere safe for the next few seconds.

Now go to your template and set up the following code where you want the like box to appear

Code:

<script type="text/javascript">
if ("http:" == document.location.protocol) {
// Non-secure http

} else {
// Secure https

}
</script>

All this code does is check if the page is secure or not. All we need to do is change the like box iFrame to http or https depending on what the page is.

To be very clear we will duplicate the code with non-secure and secure.

Now go back to the code you got for the like box. We will be printing this onto the browser by using document.write in JavaScript. To save yourself some time just past the iFrame code into notepad and do a find and replace.

You want to find " (double quotation marks) and replace with \" (backslash and then double quotation marks.)

The reason for this is because the quotations will break the code. Now you need to edit the closing iFrame tag. Currently the ending tag looks like this:

Code:

</iframe>

Change that to:

Code:

<" + "/iframe>

Now you have escaped any problem quotation marks and broken up the closing tag (causes problems otherwise.)

Now at the start of your iFrame tag you need to add the document.write. So from this:

Code:

<iframe

To this:

Code:

document.write("<iframe

Now we need to close this document.write at the end tag as well.

So from this:

Code:

<" + "/iframe>

To this:

Code:

<" + "/iframe>");

You should now have a more confusing version of what you had before! You can still edit the width and height in the style tag so if you find it doesn't fit the style of your website you can still play around with it using the inline CSS.

Now take your modified iFrame code and paste it into your template inside the JavaScript like so:

Code:

<script type="text/javascript">
if ("http:" == document.location.protocol) {
// Non-secure http
document.write("<iframe src=\"http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=62\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:292px; height:62px;\" allowTransparency=\"true\"><" + "/iframe>");
} else {
// Secure https
document.write("<iframe src=\"http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=62\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:292px; height:62px;\" allowTransparency=\"true\"><" + "/iframe>");
}
</script>

Now all we need to change is one last bit to make it different in each case.

Code:

<script type="text/javascript">
if ("http:" == document.location.protocol) {
// Non-secure http
document.write("<iframe src=\"http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=62\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:292px; height:62px;\" allowTransparency=\"true\"><" + "/iframe>");
} else {
// Secure https
document.write("<iframe src=\"https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=62\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:292px; height:62px;\" allowTransparency=\"true\"><" + "/iframe>");
}
</script>

And there you go! We change the ELSE part of the if statement to have src=\"https://.

Now you have fully working Facebook Like Box for your Storefront!

Any questions or comments feel free to chime in.

This is an excellent post - great job of defining the individual programming elements and what they mean. Very easy to follow and understand.

I installed in my template and it worked like a charm too.

Thanks,

Jeff

Brilliant! Glad it helped you out.

Need anything else just ask.