Create a Business Catalyst Ecommerce Store as a Custom Facebook Page

Based on feedback from our first tutorial on how to create a custom Facebook page using Business Catalyst, we go a step further to teach you how to create a Shop page.

Monday, May 16, 2011 - Posted by Brian Lowry to Technical How-tos

Video Transcript

Not too long ago we published a tutorial about creating custom Facebook pages with Business Catalyst. This video is a follow-up to that one, and I'm going to show how to set up a Facebook shop tab using the same technique. I'm not going to explain in as much detail this time on how to set up the Facebook tab. So if you didn't see the first tutorial, you'll probably want to watch it first.

First I'll show you what we're going to make. Right now we're on the BC Shop Facebook tab that we're going to create, and this is the Facebook page I created for the last tutorial. If you look right here, the welcome tab, you can see this is what we created, the newsletter subscription area.

BC Shop, if they click a product image or a title, it's going to open the product detail page in a new tab. So it's going to actually take them to your client's website. Same thing with view cart, it opens in a new tab. From Facebook, they can add products to their cart. So I'll add a couple, and then if I click "View Cart," the new tab opens and you can see my products were added to the cart. If I click on this book and want more information about it, it's going to take me to the page where I can find out more information about the product.

So looking at the code for the site-wide template that we're going to use, it's pretty much exactly like the one that we used before with a few additions. One is we added, if you look right here, we added our shopping cart summary. So that's going to be at the top of our Facebook tab. The problem with the shopping cart summary is that I couldn't find a way to get the View Cart link to open into a new window. I tried using JavaScript and doing text replace and adding target blank to the link, and I couldn't get it to work. So what I ended up doing is hiding the View Cart link that is inside of this shopping cart summary, and I just created my own link and I just linked it right to our shopping cart.

If you need the URL for your shopping cart, it's going to look just like this. Your catalog ID, you could put any number there and it will work. So you could put the actual ID of your catalog or any number you want, no matter what you put for a number here, it's going to work. You just want to make sure that you set this link to target blank. Again, it's important that this opens in a new window because we don't have a way to format the shopping cart to display well inside Facebook. So people are going to have to leave Facebook to check out once they've added the products to the cart.

So they're going to have to CSS. Like I said, we hid the cart summary link. This A Class View Cart is the link I created, so I'm floating it to the right. Facebook canvas or FB canvas is with the 520 pixels, and the rest of this is just styling the products so that they layout nicely into the Facebook page.

Now inside Business Catalyst, right now we're look at the site-wide template. So you could see I created a new template for Facebook Shop, and this template is the code we just looked at. Then we go over to pages. I created a new page inside the Facebook folder called Shop Tab. In the Shop Tab, all I did is put in a module to display products that are tagged "Facebook Shop." So the module is "Product Feature List." The next parameter is the tag that you want it to display. This right here is the amount of products it's going to show.

Now one important thing about this is I originally had it at six products, and I found out that after your iFrame gets a certain length on the page, Facebook is going to add the scroll bars back. So you do have to keep your page a certain length or else you're going to get scroll bars.

I think it was probably around 800 or 900 pixels, but you can mess with it. One way you can fit more products in there is through how you style your list. You could use the backup small product template to do that so that you could make that product listing smaller and fit more products in there if you need to.

The next parameter is what it's going to sort by. I used weight. You can do alphabetical and the date the product was created. If you check the knowledge base, it will give you all the parameters for that.

This one is the important one because, just like the View Cart link, we want our products to open in a new window. So if they click our product image or our product link, it's going to open our Business Catalyst website in a new window.

Finally, the parameter true is just telling it that I want it to use my backup small product template. That's not necessary. But if you wanted to style your listing in some way on Facebook that was very different than what's on your website, then you might want to do that.

The next thing you're going to want to do is go to Facebook.com/developers, and on this page it's going to list any apps you've already created and give you the option to set up a new app. You're going to want to create a new app for your Facebook shop tab exactly like we did last time. Just follow the exact steps from the last tutorial and you'll be fine. You can see right here I've already set mine up.

We'll go in and look at it, and I'm going to click Edit Settings so you can see my settings. Remember on this About page you really don't have to worry about anything, but you can change this icon if you want your Facebook tab to have an icon. Go to Facebook integration and you can see the canvas URL. Remember all it is, is the URL to that Facebook folder. You don't need the full URL to the page, yet.

Secure canvas URL, the thing to remember is to make sure it's HTTPS and make sure you use that .worldsecuresystems.com because that's the Business Catalyst secure SSL pages they let you use. Check Auto Resize. You can disable Social Discovery. I don't think I said that in the last one, but it's not too important if you do it or don't. But that makes sure that nobody will find your app.

Tab Name, I called it "BC Shop." Then Tab URL, it's just like the URLs above except I added the URL to actual page that I created, which I called shoptab.html. Then Secure Tab URL, again you want it to be https://yourdomain.worldsecuresystems.com/facebook/shoptab.html.

Then you want to go to Application Profile Page and click "Add to My Page." I've already added it to my page, so it's not here. But you'll find your fan page and just click "Add to My Page." Then from there, you want to go to your fan page. Click "BC Shop" and you should see the shop that you created.

Now, once again, if I hit "Add to Cart," it says one item added to my cart. There was already something in there, so we've got two items. Click "View Cart." It opens in a new window, and you can see I can check out from here. If I click a product, it opens in a new window.

So like I said, I can only fit four products in here. If I got down too far past about this point, then it started to give me horizontal and vertical scroll bars, and you don't really want that. But there are lots of ways you could format these products and get more in here if you want to.

So, hopefully, that's something that you think some of your eCommerce clients would like. Let me know if you have any questions or ideas on how to expand on this and good luck. If you build something, post a link to it so we can check it out. Thank you.

comments powered by Disqus