Good morning, everyone! I've gotten a lot of questions recently about the Facebook blog I have on the front page. I switched to it when Google's Blogger killed my FTP access in the Quest for All the Ad Revenue, and I'm actually happy they did kill it because it forced me to look for new solutions. It's so much better than Blogger, which you might think is weird, but it's not. It's less buggy and has less downtime. Sure, you can't blog directly, but often times I find myself saying, "I just want to broadcast something." It's perfect for that. So, the question you must have now is...



HOW IS THIS POSSIBLE?! Well, I asked my techhusband, Trevor, to do a writeup on how to put a "Facebook blog" on your site. Here it is:

* * *

We're often asked how we integrated our Facebook page with our website. While this is documented elsewhere it's often in the context of greater Facebook development. Many people are simply interested in integrating their Facebook landing page and nothing else. So that you don't have to brave the rather extensive documentation for this, we've decided to let you in our our approach. As with most things on the web, there are many ways to accomplish it and we're certainly not going to say ours is the best. It does seem to work well within a variety of browsers and within our approach to CMS though.

The method is both simpler and more complicated than you might think. It's simpler in that there isn't much to getting your Facebook stream actually on the page. The complication comes from making the stream seem like a natural part of the page. This (may) require a good bit of CSS on your part, depending on the look and feel of your website.

First, the simple part: getting your Facebook stream onto your page. This can be accomplished with an iFrame tag:

<div style="position: relative; height: 944px;">
  <iframe src="http://www.facebook.com/connect/connect.php?id=1234&stream=1&connections=0&css=http%3A//yourdomain.com/fanbox.css?123"
    scrolling="no" frameborder="0" allowtransparency="true"
    style="margin: 0px; padding: 0px; border: none; width: 551px; height: 1024px; overflow: hidden; position: relative; top: -80px;">
  </iframe>
</div>


Notice the ridiculously long URL in the src attribute. You will need to customize this URL for your Facebook account. First, you will need to replace 1234 with your actual Facebook id. The easiest way to find your Facebook id is via your profile picture. Your picture's image will have a URL of the form:

http://something/somethingElse/numbers_moreNumbers_aFewMoreNumbers_someMoreStuff.jpg

The part you're interested in is the aFewMoreNumbers portion. This is your Facebook id.

Getting back to the iFrame URL, notice the stream=1 and connections=0 portions. Here 0 means "don't show" and 1 means "show", so we are asking for our stream to be shown, but not our connections. You may or may not like these options. The best way to play around is to open a window with the URL and play-around.

Finally, you see the rather odd:

css=http%3A//yourdomain.com/fanbox.css?123

This is where the complication rears its head. The portion after the = is an escaped URL to a CSS file that the included Facebook content will use to style itself. How can you create such a URL? The easiest way is by using the following Javascript-URL in your browser:

javascript:alert(escape("URL"));

Just replace the URL portion of this Javascript with your CSS url and copy the fragment into your browser's address bar and hit return. You should see a pop-up alert containing your properly escaped URL.

Finally, notice the ?123. This is very important. In order to save itself bandwidth Facebook caches most external files you ask it to use. This means that it won't always check for the most up-to-date version of the CSS file you provide it. This can lead to much frustration because it will mean that changes you make and save to your CSS file won't be reflected (possibly ever). To get around this, Facebook will look for an argument to the URL (the ?123 portion) and retrieve the file any time it encounters an argument it hasn't seen before (even if its seen the rest of the URL). By incrementing the ?123 portion (e.g. staring with ?1 then using ?2 etc.) you can make sure that Facebook is always using the freshest version of your CSS.

That's really all there is to it. To really make the integration look good you're going to have to really take a look at the HTML Facebook gives you (again, opening the include URL directly in a window is invaluable) and take advantage of the classes and id's present in your CSS.

Good luck and happy integrating!

* * *

And that's it! I hope this helps. If you have any more questions, please email me, and we'll be happy to answer them. ^_^

Well, I'm off to spray the hell out of some paper. *shakes can* Bring it, wood pulp!

The cold sun in the morning.