Home » CSS Scale Your Website for Facebook Page App Call-in

CSS Scale Your Website for Facebook Page App Call-in

Looking to create a page app that ties directly into your website, but your website is perhaps wider than the he maximum recommended width on a page app of 760 px?

To remedy this, create a mirror of your website specifically for your Facebook app to call in. What you want to do is scale down the size of the site. Let’s assume that your site is 900 px wide. Through the addition of a new DIV to your main CSS, you can scale it – negating the need to take all your elements into Photoshop and creating a large management mess with site updates.

Apply this DIV to encompass all of your page content for your pages. Note that Firefox in some older cases was documented to not support this, but the -moz-transform property available in Firefox 3.5 and above.

#zoomed {

zoom: .75;

-moz-transform: scale(.75);

-moz-transform-origin: 0 0}

This this scaling, the site is readable and also useable to be called into your page app.

For more information on creating a page app, see our older article Make a new tab with a native Facebook App.