Easy-peasy Facebook iFrame Fan Pages with SiteGrinder 3

As you may know, as of this Friday, March 11, Facebook is discontinuing FBML and all new custom fan pages will have to be created using iframes. While change can be scary and annoying, in this case, the change is a good thing. FBML is very limited in capabilities, while iframes give you the ability to do virtually anything you want on your facebook page. And you don’t need custom apps to do it!

Note: this is part one of a two-part tutorial. Part 2 is here.

With SiteGrinder, you can design your fan page in Photoshop, where you are comfortable working. Last night I took our PSD file, added button highlights and pop-up text box layers in Photoshop, named the layers with SiteGrinder hints, built the page and added CSS styling and animation effects with SiteGrinder, and put it into my Facebook page in less than an hour!

I'm guiltyConfession: Although I work for Media Lab, I am far from being a SiteGrinder expert and I know very little about HTML, CSS and web-site coding. I have to look things up in the docs and on Google all the time, and I depend on the SiteGrinder error and warning report to help me avoid disasters. Why am I admitting this? Because if I can build an animated, custom Facebook iframes page, YOU CAN TOO! Read on to see what I did, step-by-step.

Create your Page in Photoshop

link to our psd file

Click to download our Facebook page PSD file.

Make your Photoshop file. The only thing different than creating a Photoshop file for any website design is that your file must be 520 pixels wide or less. That’s the size of the column Facebook gives to it’s main content area. You can literally do anything you want after that. Here’s what we did in our file:

  • Set up the button and hover layers. I arranged my buttons into layer groups. For example, on the top section of the page I created a layer group called balloons-button. Inside that group, I had one layer with the cool balloon and one with the hearts. I duplicated each of those layers, nudged the duplicate two nudges up and to the left, applied layer styles, and added the -hover hint to the layer names. (Learn more about buttons here.)
  • I added the -nomerge hint to the layers I wanted to export as JPG files (the photos of people), to make sure SiteGrinder didn’t combine them with any layers I wanted to leave with the default GIF settings. (Learn more about managing images here.)
  • Add my pop-up text, set the anti-aliasing to none so SiteGrinder would export this as CSS text rather than an image layer, and applied the -clickshow hint to those layers, matching the names to my -button layer. I chose the font, size, and color I wanted, and set a 12-point margin all around my text. (Learn more about hover and click states here.)
  • I repeated this process on each of the 5 sections of my page. You can look at my layers in the picture below or download our PSD file and examine it for yourself.
layers in our PSD file

Click to see the full-size image.

Do you have to do anything special for Facebook? Not really. All of this is standard SiteGrinder stuff. Besides making your page only 520 pixels wide, there’s only one thing to watch out for on Facebook. You can’t have any media elements on your page that auto-play. So if you have a video or slide show or even music on your page, you need to set it up so the user has to click a button to make the media play.

Build the Page in SiteGrinder

That’s it. I opened SiteGrinder (File>Automate>SiteGrinder 3 from the Photoshop menus), and reviewed the errors and warnings that came up to see if I screwed up anything. Several times I did, but I just clicked Save and Close, and went back to Photoshop to fix whatever I’d messed up (usually a typo in a hint, or forgetting to hide a clickshow layer). You can go back and forth between SiteGrinder and Photoshop as many times as you want before you deploy your page. (Learn more about the SiteGrinder Report tab here.)

Report Tab

After you’re done with the report tab, click the Compression tab in the SiteGrinder window. I didn’t do much here. Most layers look great as GIF 128, which is SiteGrinder’s default. But I wanted the photos to be medium-quality JPG files, so they wouldn’t be dithered but the file sizes would still be small. (Learn more about image quality and compression here.)

Image Compression Tab

Now you’re ready to build your site and preview the page in the SiteGrinder Design Manager. Go to the Build & Deploy tab. Check the Build? box next to the name of your page (there will only be one page listed because there are no layer comps in this Photoshop file and we are only making one page to display in Facebook.) Then click the Build button at the bottom of the page, in the same column as the checkbox.

Build Panel

SiteGrinder will open your web browser while the page is building. You’ll hear a beep when it’s done. Click the page name and it will display in the right-hand side of the browser window. There are a lot of things you can do in the Design Manager. For this page, I just wanted to style the pop-up text that will display whenever a user clicks on one of the buttons I created in Photoshop. (Learn more about Building pages and the Design Manager here.)

Page in Design Manager

Because I just created a plain text layer in Photoshop, when I click a button in my Photoshop file, the text appears but its background is transparent and you can’t read it because the other images on the page show through. Instead of creating a background, outline, and drop shadow for my text box in Photoshop, requiring graphical layers, I decided to use CSS styles which will keep my page smaller so it loads quickly.

  1. CSS Text StylingSet the CSS color, background, and border. In the picture above, you can see that I have selected the Border and Background Styles panel, and I’ve selected one of the clickshow layers I created in Photoshop. At first, there was no style defined for this so I chose New Style… and created a style called popupbox. I then edited that style to set the background to 90% opacity white, and I added an orange border and a drop shadow.
  2. Animation PanelSet the CSS animation. In addition to styling colors and borders for my text, I wanted to set it to fade in and out using CSS animation, just to add something a little more interesting to the page. I set that in the Animation panel.

You can go back and forth between the Design Manager and Photoshop as often as you want. Just close the page in the web browser whenever you’re ready. Click Save and Close on the SiteGrinder window, and you’re back in Photoshop. Make any changes you want, open SiteGrinder, and build again to update your page with your changes. (Learn more about styling text in the Design Manager.)

OK! I was done with the page design. Now I just needed to deploy my site so I get the actual HTML file and other files necessary to upload to my server.

Deploy the Site in SiteGrinder

Go back to the Build & Deploy tab in the SiteGrinder window and check the box for your page in the Deploy column. (Learn more about deploying sites here.)

Before you can click Deploy, you have to select a file on your hard drive so SiteGrinder knows where you want to store the files for your website. Choose New Site.

Define New SiteIn the window that pops up, type in a name for your site and click Browse… to select a folder on your hard drive to store the files. Ignore the rest for now, and click OK.

Then click Deploy at the bottom of the SiteGrinder window, and SiteGrinder will build the files for your website. Look at the page in the Content Manager. This looks a lot like the Design Manager, except here you can’t change the design. You change the content, that is, you edit text, define links, and even create new pages.

Content Manager Text Edit WindowThe only thing I wanted to do here is add some links to the text in my pop-up boxes, so I selected the text element I wanted to edit in the Editable Content panel, and added the links in the text editor that opened. This Tiny MCE editor works pretty much like any other text editor you’ve ever used. To add a link, select the text you want to turn into a link, click the little icon that looks like links in a chain, and paste in the destination URL.

As you can see in the picture below, I also could have set links for my buttons to send users to pages inside or outside of Facebook.

Page in Content Manager

New Page Settings menu selectedAvoiding scrollbars: If your page will be longer than 800 pixels, you’ll need to include some special code so FaceBook resizes the page to fit your page rather than displaying (ugly) scrollbars. Again, with SiteGrinder, this is quite easy. (I feel guilty saying that so much, but it’s true. I fell in love with SiteGrinder again while I was building our fb iframe page!) Select File>New Page Settings from the SiteGrinder menu.

New Page Settings window

Add this code to the BODY EPILOGUE XHTML section:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

Don’t forget to change “YOUR-APP-ID-HERE” to your application ID!

Add this code to the HEAD XHTML section:

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Upload to your Web Server

You don’t actually upload your files to Facebook, you upload them to your own web server, in a folder you create to store only the Facebook files. You can upload using SiteGrinder’s upload feature, or use any FTP client that you like. I’m a bit old school, so I saved my site as static HTML and uploaded it using Fetch (you can use any FTP program you like, I use CuteFTP on my Windows machine).

Save Site as Static HTML menu selected

Get the Page on Facebook

Install the Facebook iFrame app or create your own FB app. I tried both methods and they were both quite easy, but I found that the page loaded more quickly when I created my own app. It didn’t take any more time than installing and configuring the FB app, so that’s what I recommend. I’m really pooped. This tutorial took a lot longer to write than it took to actually create my Facebook page. So while you’re creating your page in Photoshop and SiteGrinder, I’ll continue on and write a tutorial on how to get the iframe app set up on your fan page. Right now though, I need coffee (because I don’t have time for a nap)!

IMPORTANT NOTE: Known Facebook bug: If your Facebook profile is set to “secure browsing,” you may not be able to view iframe fan pages. Facebook is working on a fix, which has been implemented in the beta tier. We hope it will be fixed for everyone today. Until then, you can access your Facebook privacy settings under Accounts -> Account Settings -> Account Security and uncheck “secure browsing” to access iframe fan pages.

39 comments on “Easy-peasy Facebook iFrame Fan Pages with SiteGrinder 3

    • Yes, there are two different iframe tabs on the Media Lab page. One is just called SiteGrinder 3 and the other is called SiteGrinder 3 iframe. They both have the same content, but I set it up two different ways and am finishing up a tutorial on that part of the process right now.

  1. Pingback: Setting up an iframe app on Facebook | Media Lab Blog

  2. Oooh! thanks so much for this I was about to pay $500 bucks to Bandspaces. I really love Site Grinder its my new god! (lol)

  3. I luv that there’s no more coding, but im a little confused… so if im understanding this correctly, If i design a FB fan page in photoshop I then save it as a psd, Then I have to go to file-automate-SG3 a menu appears and tells me if I didn’t do something correctly? So the most important thing is to make your template into lots of layers???

    So my question is: if I make a page that is completely graphics with a little bit of text and maybe a graphic i want to link to somewhere else I have to make each one a layer?
    Thanks for ur help!

    • Well, you normally make things into layers in Photoshop anyway. So there’s nothing special you have to do to your layers if they are graphics. If you want a layer to be HTML text, then add -text to the end of that layer’s name. If there is a URL or email address in the text, SiteGrinder will automatically make that a link.

      There are other things you can do with layer names, like making buttons and menus and animations, but if you just want a simple file with graphics and some text, yes, that’s it.

      The way SiteGrinder works is to read the names of the Photoshop layers to decide how to put each layer into a web page. You can read more about that here: http://sitegrinderhelp.onconfluence.com/display/sitegrinderhelp/SiteGrinder+3+Introduction

  4. this is great. I’ve actually been doing this exact thing using SiteGrinder the last few days. I really needed the extra tidbit on how to avoid scroll bars though.
    Thanks.

      • These are two I’ve been working on. One is active, the other is just in testing.
        http://tinyurl.com/4e7bwjl
        http://tinyurl.com/46speq5
        The problem I have is that it’s not landing people on the page. It’s only landing them to my app if they don’t already like my page. If they already like my page it will take them to my wall instead of the app.
        also i still have scroll bars on the one that’s longer than the 800
        Any ideas?

        • Nice! A few questions for you:

          1) Do you think people who already like your app want to land on your iframe page? They probably want to go to your wall to see what’s new. I have seen something about creating a special version for fans but I haven’t worked on that yet. I think it would be cool to offer specials and such.

          2) Scrollbars: Which iframe app are you using? Did you insert the code into the page with SG as instructed in the tutorial?

      • You need either our new SG3xpress for WordPress plugin for Photoshop. Or SiteGrinder 3 with the SG3xpress plugin if you want to make WordPress themes. You still need the Control add-on as well if you want to build Advanced Blogs because they are deployed with the SG remote content management.

        • This is the first and only time I’ve heard about SG3xpress. I am guessing you will unfurl the covering off of it in the next couple of days and you will talk all about it?

  5. 1)For my current fans i want to have a like a “latest News’ thing. We have one tab that is latest news that is set up more like a Newsletter format, but I did that with FBML. http://www.facebook.com/cynthiapacephotography#!/cynthiapacephotography?sk=app_4949752878
    I wanted to use the iFrame for stuff like this and to be able to use SG to create the pages. Plus it is cool for me to be able to to use the remote addon to make pages for others who can then change their landing pages by themselves.
    Also for stuff like i have going on right now is a contest where they fill out a form on our welcome page and submit it to be entered. For our current fans, i want them to go right to that page to know about it. We have a lot of clients who are on facebook, but don’t know much about how to use it. So if i have to tell them to click on a link in the sidebar, they get confused.
    I like to see FB Fan page as basically a mini-website. if they want to do facebook then well put our content on FB.
    2. I created my own app. and yes i put the code in the body and head as instructed. Here’s the direct link to the file if you want to check the code to make sure it go inserted right.. http://www.cynthiapacephotography.com/onlyat/test/
    thanks!

    • Interesting. I’m working on some other things but I’ll look at this later. I have a personal page I want to do something similar with, put a store in Facebook and everything. But I still think I’ll let my fans go directly to the wall. That seems to be what they want to do….. something to think about though. I did a couple of google searches this morning and found out how to do a fan-gate so fans see something different, but I’m not sure if that will make the iframe page their landing page or not. More research is called for!

  6. one of the weird things is that I swear last week when i had that FBML page set as the landing page, even if people were Fans they still went straight to that page. I think FB changed a setting when they made the switch at the end of last week.

  7. BTW, Andy, can you give me the URL where your page is that you’re linking into the iframe? If I have time, I’ll try putting it in an iframe myself and see what happens. Plus I may have time to look in the code at the scrollbar stuff.

    Thx.

  8. I did just get some clarification from a couple other social media pages, that you cannot auto direct people that already like you. They will always be directed to your wall, and then they can choose to click on your iframe tab.
    However, people who do not already like you can be directed about anywhere automatically.

      • well they need to change it, because i want to use Facebook for something it’s totally not mean for. LOL
        Photographers like to put galleries of work anywhere we can. Our work is what makes people want to come to us, not just how cool our comments are. So i think it would be great to have the first thing people see when they come to our Fan page, like us or not, is just like coming to a website- a slideshow of our work.

  9. To avoid the scroll bars, just adding the code to the ‘New Page Settings’ dialog may not enough. That code will be applied to any pages that are deployed after that code is set, not to any pages in the site already. So after setting that code, (re)deploy your pages.

  10. I still can’t seem to get rid of the scroll bars. http://tinyurl.com/6gehohe
    I pasted the code into the the settings of the site grinder window in Photoshop. Redeployed the site several times since.
    I’ve looked at the code to make sure it’s there, but even though the code is right it still has scroll bars.
    what am I missing?

  11. tired of me yet? lol
    I finally got rid of the scroll bars by shortening the Social stream facebook plugin I had at the bottom. My final design came out to about 1100px. Anything longer than that caused vertical scrollbars. The code from this page did give me longer page than I was able to do without, but I think because the Social Stream at the bottom was generating on the fly the size it wasn’t working with the code you gave me.

    • No not tired of you! Sorry I haven’t been able to help with this though. Super busy around here right now. Mine was only 800px which explains why I didn’t see the same scrollbar issue you did.

  12. Yeah you’re absolutely right, a lot of changes can really be scary and annoying, but thanks to this easy-peasy Facebook iFrame Fan Pages with SiteGrinder 3 post you got, a big help btw! thanks

  13. Thank you! Don’t know how i missed this! I have 7 clients on Facebook pages, but could never find a fast enough – and simple enough – way to make it interactive,I’v tested my own and THANK YOU SITEGRINDER! Thank you for charing you post! Have a grand day!

  14. Did you the column hint in your psd file? I select the no scroll bars in the static iframe app and it still gives them to me. UGH!!! HAHAHA

    • I don’t remember if I used the -column hint, but that should not make a problem. Is your page longer than 1000 pixels? because I did have a problem with getting scrollbars on a very long page, no matter what I did.

  15. I Am an Designer an Ninja Coder, and i have to admit that i love SG3 because of the fact that i do more than just coding by myself, but SG3 gives me flexibility balancing 3 projects, i have been doing fanpages for an long time with SG3, this shouldn’t be new to anyone its just regular html/css wrapped in FBML framework. but am happy that others see that it is an possibility.

  16. Hello, I followed this tutorial long ago, It worked PERFECT! The NON scroll bar part…But after some time I had to do a new page and when I loaded it I couldn’t get rid of all the scroll bars, First i sat for two days, then realized ALL the other pages I did before is all stuck with scroll bars once again…WHY would this happen? Please if someone could help me out. I hate the scroll bars and it looks terrible.Thank you!

  17. Hi Donna,
    I already sent this question to Tech Support, I have problems with vocabulary-I already have a basic FB Account. Is the Fan-page the one for friends.
    So, what I create is visible to friends only?
    And what is the landing page?
    And can I see the result in something like a test-area? Because I have a client,
    they don´t get a account with their “info@bw-lv.de” email adress and need
    something else from maybe yahoo or gmx or web or whatever.
    They want to see something in advance.
    Thanks

    Uwe

  18. I am installing an app on my facebook page, and when it loads it is all text. Not HTML text but the text that was in the website. None of the Images are shown, just the text.

  19. Is there any chance of a video tutorial, with the new page apps i’m seriously lost!

    I have the design done, just can’t seem to figure out how to install it on my fb fan page!!

    please help!

    Thanking you!

    Danielle

  20. To follow up on the update of this matter on your web-site and would wish to let you know simply how much I treasured the time you took to create this handy post. Inside the post, you actually spoke on how to definitely handle this concern with all ease. It would be my personal pleasure to get together some more ideas from your web page and come up to offer people what I have benefited from you. Thank you for your usual excellent effort.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>