Create a Custom Facebook Page for Your Business Catalyst Projects

How to create a simple page within Business Catalyst to directly integrate with a customer's Facebook fan page. This tutorial will help you add value to your next project.

Saturday, April 30, 2011 - Posted by Brian Lowry to Technical How-tos

Video Transcript

Hello, my name is Brian. Welcome to BC Gurus. So, we know that every customer we serve has social media on their mind and really everybody involved in online business wants to use social media in the most effective way they can. Well, Business Catalyst can help you out with this in a way that will really add value to your services. In this video, we're going to learn how to create custom Facebook apps and pages with Adobe Business Catalyst.

The first thing we need is a new site-wide template. The purpose of this template is to package your content in a way that looks good and fits within a Facebook page. This template is only going to be used on Facebook, so you don't need your header and your footer and any wrapping elements of your website. You really don't need the styles of your website. It's just going to be in the center space on a Facebook fan page.

You can see on here that I have some styles in the head. But this could just as easily be a linked style sheet, and you can also include jQuery or JavaScript or anything like that that normally works on Business Catalyst can be included here. The important part of my style sheet that you need is this class FB canvas with 520 pixels.

The section of content that you have in Facebook is 520 pixels wide, so you want to make sure you wrap your content in a div and make it 520 pixels wide. That way nothing overflows in Facebook and you won't get any horizontal scroll bars.

Something I forgot to add is you want to make sure your body margins are zero. That makes sure you're really working with 520 pixels, and again, you don't want to get horizontal scroll bars on your Facebook page.

Okay. So if we jump into Business Catalyst, I'm going to show you how I set this up real quick. We're in the site-wide templates right now. You can see I created a template called Facebook page. If you look at the HTML, it's the exact same code we were just looking at in my code editor. I saved and published this, and this template will be used for any page that we want to be part of a Facebook fan page.

Next, if we jump into File Manager, in the root I created a folder called Facebook, and that's going to let me separate my pages and my content that's going to be on Facebook from the rest of my website. Now if we jump over to web pages, in the Facebook folder you can see I created two pages - welcome and thank you. The welcome page is just a subscribe by email form, and the only thing special about this page is I had to tell it that after someone submits this page we want to load our Facebook thank you page, so that it doesn't load our regular website within Facebook.

So to do that we just add this code right here, and this will be in the article for you to copy and paste to the form action. If you want to learn more about that, just check this article in the Business Catalyst Knowledge Base, Customizing the Web Form Confirmation Page. That will work on any web form that you use.

Now if we look at the thank you page, this is just a simple confirmation page to thank the visitor for subscribing. Now what I've created here is really just an example. The idea is that you can use Business Catalyst forms and web apps to the extent of your creativity and see what you can really build within the 520 pixels that Facebook will give you to work with.

The next thing we're going to do is jump over to facebook.com/developers. You're going to need to be logged in to do this, and I'm also assuming that you've already set up a Facebook page. If you need to know how to do that, you just scroll down to the footer and click "Create a Page." It's very easy.

Once you've got your page created, we're going to go here and set up a new app. I'm just going to call it BC Gurus tutorial. Once you're in here on this page, you don't really have to edit anything. This icon right here is what will show up on your Facebook page tab, so it's probably a good idea to set that.

The important one is going to be this Facebook integration link, click that. Now your canvas URL is going to be your Business Catalyst domain. So if you've already upgraded, you're not going to need this dot business catalyst slash whatever folder you put those pages in. Remember I created a Facebook folder, so slash Facebook. The canvas URL doesn't need the full URL to the page. So you're going to stop right there at the directory you put the pages in.

The secure canvas URL, if you don't set this, the page isn't going to work for people who have checked that setting in their security options to use SSL on Facebook. So you need to set the secure canvas URL. Your secure canvas URL is going to look like this - HTTPS, whatever your Business Catalyst name was back when you set up the trial, and worldsecuresystems.com/facebook/. So that's it. That's your secure canvas URL. Everyone using Business Catalyst will need this dot worldsecuresystems.com.

For iFrame size, you want to hit auto resize so you don't get the vertical scroll bars.

Tab name, set this to anything you want. That's going to name the tab on your Facebook page. Now this time, tab URL is going to be the full URL to the page you created. So for us, it's going to be the website URL/facebook/welcome.html. For secure tab URL, the same thing as before, you need that worldsecuresystems.com/facebook/welcome.html. Save changes.

Here's the app we just created. We want to go to the application profile page. Now, from here, we want to add this app to our Facebook page. So to do that, you just go right down here, "Add to my page." You're going to select the page you want to add this app to, "Add to my page," close, and then we want to go to our Facebook page.

This is the page I created for this tutorial, and you can see right here, the welcome tab, this is the tab we just made. I'll go ahead and test it out by subscribing, and everything worked fine.

Hopefully, this video will spark some good ideas on how you can use BC to create some integrated functionality with Facebook pages. This is my first BC tutorial, so I'd love your feedback in the comments, and if you created something cool on Facebook using web apps, modules or whatever, please share a link. Thank you.

comments powered by Disqus