Last month Facebook decided to start depreciating FBML (Facebook Markup Language) in favour of a new layout, replacing it with iFrames. This came as very good news to the social media market, opening up all sorts of new boundaries and restrictions that FBML previously caused.
Essentially, using an iFrame you can do almost anything you can do with your normal website. An iFrame on Facebook is, essentially your own website encapsulated within Facebook’s own walls, within a page.
If you have the expertise, you can create the app yourself and place the iFrame inside. If not, there are a few apps out there that can help make your life a little easier and save you time.
The best Facebook app for putting iFrames into your page
There are plenty out there and yes, I have looked at the widely publicised Wildfire one and I think the best one out there is simply titled “Static IFRAME Tab” and is available here: http://www.facebook.com/iframehost
How to create a shop within Facebook
If you already have an online shop anywhere else, this can be very easy. There are several ways to utilise this app and make the most of your online store on Facebook, such as by simply redirecting you to your online shop at an external URL or maybe even just placing an image there, or some HTML with a few offers. The way I’m going to show you, is a fully integrated version of your online shop and can be done in just a few simple steps.
Stage 1 - add to your page
1. If you haven’t already, download the Static IFRAME Tab app and click “Install Page Tab” – here you will be prompted for a decision on what page to add the app to. When you have done this, you will be taken to your page. On the left you will see a few links, one of these is “Welcome” – click it. (You can move the position of this link by clicking the edit link below and drag-drop to reorder)
2. Click settings at the top right. Here you will need to select “URL” and enter in the address for your shop (I recommend that you don’t simply do this, however as it is more advisable to create a scaled down version of your shop as I will talk about in a bit). You can also specify the height of the iFrame and are presented with the option to hide scrollbars. It is advisable to tweak these according to the design of your Facebook e-commerce shop.
Settings for the Facebook Page
3. (optional) If you want to turn fan gating on, you can specify a different URL to show if a user hasn’t clicked “Like” on your page. This usually isn’t necessary, but can prove very useful for offering your fans exclusive deals. As you can add as many iFrames as you want to your page, it may be a great idea to have a separate one for exclusive deals, that only fans can see.
4. Finally, there are a couple of options to choose the Tab Icon and Name. Changing the Name is easy and definitely recommended, where as changing the icon is a little more tricky. Instructions are provided on how to do both. Once you are done, you can click on “Save Settings”
Scale down your website, make it Facebook friendly
NBA - An early example of a Facebook page shop (they have opted for full size shop, but this can be achieved within the page itself)
If you’ve managed to create your online shop yourself, you will probably know how to do this already. If not, you will have to look elsewhere as with the hundreds of platforms available out there, I could quite easily end up turning this blog post into a hard back book!
Whilst I’m not going to tell you how to get down and dirty with your HTML, PHP, ASP or whatever you use to customise the appearance of your site, I am going to offer some tips when you do decide to proceed.
1. Keep it simple. Remember, you only have 520px wide to work with and you have no control over the design of Facebook. Your design must compliment Facebook’s effectively.
2. Test everything. When done, it is essential to test all the pages you have given access to via the new simplified e-commerce site. The user must have a fully integrated solution.
3. Reassure security. Users can enable secure browsing in their settings and browse Facebook securely. If you have SSL installed on your site also, you need to re-inforce this and let users know they are completely safe.
4. Lose the header. Or at least, strip it down to something short that will fit perfectly within the iFrame. You may also want to incorporate the mini cart at the top, so the users have a consistent feel throughout. Strip down the navigation and footer too.
5. Building for Facebook is like building for mobile. You have to create a much cleaner, more simple feel to your e-commerce site specifically for serving Facebook users. Don’t use the functionality people love about your site, however.
6. Test payment gateways. Some third party payment providers such as Sagepay allow you to customise the way your payment page looks. Do this and keep it consistent with the feel of your website, as you would for your main site.
7. Use a unique URL for accessing the Facebook version. You can then serve the Facebook site as a completely seperate site from the main shop.
If you have a fairly complicated design for your e-commerce site, this could prove to be quite difficult. If it is simple and streamlined, chances are you can make some changes in minutes. Either way, I’d be interested to know how you got on and found the whole experience.
Another thought that has occurred to me, is that ideally you would be hosting your Facebook e-commerce page on a secure (SSL/HTTPS) page (one that begins https:// and one that all references to external files are also via https.
Many users now browse Facebook via the secure https connection, so if they tried browsing your non-secure page then they would be presented with an error prompting them to temporarily switch back to non-secure mode. This can deter a lot of users, especially those who aren’t so tech-savvy and conscious about security.
Of course, it’s generally a good idea to at least host your checkout process on a secure connection, anyway!
One final note (sorry) – if users aren’t browsing via the Facebook https:// link (which they can set in their account settings – https://www.facebook.com/editaccount.php) then this does NOT make your page secure (even if it is https:// in the iFrame!) so you may want to put a quick message at the top of your page informing users that to browse completely securely, these are the steps they need to take.
Good information Nick, you must have spent an age invesitigating this. As it is im really pleased you did becuase thats one of the best written facebook e-comm articles I’ve read so far.