Facebook Cookbook

Beating the CSS, JavaScript, and Image Cache

Problem

I keep changing my static files on my server, but they’re not reloading in Facebook! How do I get my CSS and JavaScript files and my beautiful images to load?

Solution

Facebook’s servers cache your static files when they first serve them up so that your app loads faster for subsequent requests. To get your files to load after you’ve made a change to them, you’ll need to change the file’s name so that Facebook notices it’s different and grabs the new one. If you’re a server admin master and are running Apache (or are super server ninja and are running IIS), skip down to the Discussion. If you’re less sure of your server admin powers, keep reading.

All you need to do is change the name of your static files and any references to them when you make a change. This is tedious and will quickly get annoying, but it will work every time and won’t require you to mess around under the hood of your web server. If you had a file named hawt_stylez.css, you could start with hawt_stylez_1.css, then rename it to hawt_stylez_2.css, and so on. Make sure that you update the <link> that loads it into your pages as well:

<link href="http://someserver.com/resources/css/hawt
_stylez_1.css" rel="stylesheet" type="text/css" media="screen" />

If you use that file (and a number of others) on every page of your app, the easiest thing is to make an include file that contains all of your various <link>s, and then include that at the top of each page:

<?php require_once ...