Some of you have wondered how people get those cool Facebook fan boxes on their actual website.  Facebook tries to make it easy for you, but even their “easy” approach is pretty tricky at best.  I recently had a customer ask me to put a “fan” box on his site and tried this out myself for the first time.  Let me share with you what works, and what doesn’t, because if you do it wrong you will end up with something stupid on your page that looks like this…

WHAT YOU DONT WANT:

What is this? It’s called an iframe, an iframe displays content from another site inside a framed box.  Sort of like looking through a window to another website.  In this case I have just added the “iframe” code Facebook told me to use.  It appeared that this would be easy…. just paste in the code and I would be done right? Wrong. I ended up with this stupid looking box on my site.  At first I thought maybe Facebook hasn’t recognized my page yet since I just added the code.  But after waiting a few minutes I realized that this was not the case and it was just wrong and wasn’t working.

So after a little trial and error I got it to work correctly… so it looked like this:

Here is what I did to get things to look right: (I will soon make a video on this available)

Step 1: Edit Your Facebook Page
Go to your page on Facebook and click on “Edit Page”.

Step 2: Getting to Promote with Like Box
On the right side of your edit screen, click on “Promote with a Link Box”.  This takes you to the page where the code in generated for your “like” box.

Step 3: Generate and Add the Code to Your Site:
Set the options you want to display in the like box, such as updates, size, etc. Then Click on “Get Code”.  What is displayed is two types of code. One is an iframe, and the other is xfbml (facebook html to non coders). When I used the iframe code and entered it into my page it didn’t work.  If I choose “xfbml” then it won’t work either without even more code added to my site. You will notice that it says “XFBML is more flexible than iframes, but requires you use the JavaScript SDK.”  If you click on this Javascript link… most of you will be totally confused so rather then explain what this is I will just show you what you need to add.

Copy the xfbml code to a text file somewhere on your machine.  I use a tool called textpad, but notepad on Windows works fine.  You will also want to copy the code below into your text file as well.  Both pieces of code will need to be added to your webpage in order for this to work.
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: ‘your app id’, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(’script’); e.async = true;
e.src = document.location.protocol +
‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>

Copy the above <script> tag into the footer of your webpage html code.  Copy and paste xfbml code you generated into your pages code where you want the box to appear. On out blog I added it to the “sidebar” under the widgets area of Wordpress.

Lost?
If you are totally lost that is ok. We are here to help you.  Contact us here at Dreamsites at: 248-230-5028 or email us @: sales@dreamsites.com. 

Tags: Facebook, Social Media // Add Comment »