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. 

I myself have been using Photoshop since version 3 when I first started making cool background for my college notebooks. Using all the filters in Photoshop, meshing photos together, creating cool looking text effects (Who doesn’t remember the diamond text from those Master P – CDs?)  Anyway… it looks like the folks at Adobe are coming out with something really cool that makes even me want to upgrade.  It’s called “Content Aware Fill”.  The time it will save some designers makes this one tool, an automatic “buy” in my book.

Highlights of what this can do…

1. Want to take out a tree in the middle of your picture? No Problem

2. Want to match the color of the sky on side of the photo to the other side? No problem

These are just a couple of examples… watch the video below to get a full overview.

View a full size version of this video out on Adobe CS5 Launch page at Adobe.com

Click here to video, then click on “Content Aware – Sneak Peak”

The new site will include articles, links, videos, and more about how to get the most out of your website.