UPDATE:

Interested in testing out your new coding skills for iFrames in a risk-free environment? Check out this cool, free tool Paste HTML. It’s a free, anonymous sandbox for playing around with HTML, CSS and Javascript. You can see how your Biz Page will look in iFrames before sending it out live. Nice one!

ORIGINAL POST:

Yes, Facebook has been at it again. Just when you thought you had your business page all straightened out and in tip top shape, they go and change EVERYTHING. Right down to the language for customizing pages. Out with FBML, in with iFrames.

But, I am getting a little ahead of myself. I had to endure the pain of change, and I thought I could share my experience with you, in the hopes that you can have an easier time of it when you go about tweaking, dusting, polishing, and modding your own page in keeping with Facebook’s new page parameters.

Overview of Page Changes
Let’s start with an overview of what is new. For starters, Pages now look a lot more like Profiles and the home page. No more tabs underneath the status box. Your previously organized tabbed navigation is now found in a column list to the left of the main content section, underneath the Page image. Like Profiles, the new Page layout allows you to upload and show a gallery of five thumbnail images along the top.  The gallery shows the five most recent images you have uploaded or tagged, but they appear in random order every time the Page is viewed, so it is difficult to organize a fixed layout as many creative Facebook users did with the new Profiles image strip. But, you can still get creative with images that best illustrate your Page’s interests, particularly if you have a bit of graphic design skill.

Another interesting new feature is the ability to toggle from the Page whether you are “on” Facebook as your personal profile or as Page Administrator. The option is to the right of the main wall area – “Use Facebook as AdvantageAdvocates” or something similar. This opens up all sorts of options for getting your Page noticed – by liking other pages or commenting across Facebook as your Page, you can subtly spread the word about your Page. Plus it allows you to easily switch between your person and your Page as you navigate your own Page’s content and communicate with your Page members. As Page, you can pretty much do any of the things you can do on Facebook as yourself, with the designee of the action being the Page. Very cool add.

Another annoyance that has now been solved is the ability to get email notifications when someone comments on your page. Go into Edit, Your Settings, and click the email notifications box.

Page Profile pic size also has been reduced from the previously spacious 200 px wide by 600 px long, to 180 px wide by 540 px long. Shrink that puppy down!

You can feature favorite Pages – go into Edit, Featured, Edit Featured Likes, and select the boxes for the ones you wish to have visible on your Page.

Admin View offers the ability to show Most Recent or Hidden Posts, to the right of the Wall header. You can  or remove posts, and ban spammy posters and report users – simply click the “x” on each post and the drop down menu includes these options.

Your business category now shows on your Page, so you may want to take a moment and make sure it adequately describes what your Page is all about.

New Design Challenges

From a designing point of view, the most massive change is from the old Facebook design language, FBML, to the new iFrames language. Now don’t get me wrong – I totally get why iFrames is the better way to go. However, it will require you to either hire a developer who can write custom HTML / CSS style page layouts or develop a Facebook App for your Page or learn how to do it yourself. The good news is that HTML, Javascript and JQuery seem to work very well within the iFrame environment. There are some limitations – your frame height needs to be less than 800 px or you will get a scroll bar on your Tab content. You can also breathe a partial sigh of relief – your existing FBML tabs (like the Static FMBL app)  will remain, at least for the foreseeable future. But, as with anything Facebook, this will be subject to their whim, so you should consider modernizing the coding at some point to stay up to date.

There are a few options out there to help simplify the process – to a point. Most require some minimal level of HTML understanding as well as the ability to host images if you want some graphic interest.  One option comes from Wildfire Interactive, which has launched a fairly simple  iFrames for Pages app. I played around with it a bit and it seems pretty solid. It’s free right now, but may well become paid in the future, so get in on the action soon if you want to use this ready-made option. It’s a Facebook app, so it will ask for some permissions. You then select the page you wish to install on, fill in some contact information, turn on or off the “fan gate” – the page that shows only to people who haven’t yet liked your page, likely urging them to join the fun, and then load your image or your HTML in a box that shows for non-fan reveal, fan reveal or both. You get a new “Welcome” tab, but you can rename the tab within the Facebook Page edit settings themselves.

I used the Static HTML: iframe tabs, (shown above). Once I was able to work out the HTML, it really was pretty easy to use. Click and install like any other Facebook Page app. Go to the newly showing “Welcome” Tab in that lefthand tab list and click on it, you will  get two boxes: content for fans and content for non-fans. Although I didn’t use, the editor apparently can convert FBML to iFrames. You can edit within the tab, but I chose to do it outside of the tab in a WYSIWYG editor and pasted the code into the box. After struggling with the free BlueGriffon WYSIWYG editor, which actually is a very awesome program but gave me agita when it came to loading it effectively into the tab, I ultimately found that editing my content within the “code” view in the Advocate’s Studio blog dashboard itself was the easiest way to go. Remember that any graphics must be no wider than 520 px, text will wrap accordingly. Images also can be hosted on your WordPress blog, and you can save your “draft” Facebook Page post for future reference and editing. When you are finished in WordPress, copy the code view from the “new post” dashboard and paste it right into the box on the Static HTML: iFrame Tab, hit save and view – text and graphics should show beautifully. Be aware, as administrator, that when you click the tab in the left column going forward, you will see the boxes and code, not the finished image. But rest assured, it’s there for everyone else to see.

Here is my new Welcome Page, which shows now for non-Fans, now in HTML within an iFrame tab:

And here is the page that shows to Fans, within the same tab:

There are other options. One is TabSite – I have a TabSite tab on the Page that I haven’t really done anything with. But it has a very simple WYSIWYG editor built in, plus the cool ability to insert a functional “like” button within the Tab content itself.

Three other options that I haven’t yet tried include: iwiPage (add tabs within the tab, website builder with HTML support, a WYSIWYG editor that supports iFram, Javascript, and Flash, with the ability to incorporate Google Analytics too; free and paid); Hosted iFrame by MonsterApps (drop in HTML or XFBML, 25MB of hosted images and hosted CSS files and Google traffic tracking); and, for the WordPress fans, WordPress for Fan Pages (8 templates, WordPress styled editor, $37 onetime fee on their Facebook Page). The WordPress option might be a good one for us non-coding, blogger-types and $37 doesn’t seem like a lot to pay for a decent, familiar Facebook Page editing tool.

Of course, there are many other apps that will work to customize your page in lots of different ways. Check out this post by Facebook guru Mari Smith over at the Social Media Examiner that lists 75 different Business Page apps that you can use to tailor the look and functionality of your page.

Last of all, don’t be afraid to roll your sleeves up and update your page – while I found it a wee bit frustrating at times, the end result is worth it and you might learn a few tricks along the way. My business page always shows up high in the Google search results for my business name – why not put your Page’s best face forward. Drop me a line if you have any questions or problems – I am happy to help out if I can.