If you are deep in developing your app, and the time comes to look at Facebook and OpenGraph, you might find yourself on a stumbling block I came across last night. The annoying part happens due to the fact that Facebook caches the results of your page. And this really gets in the way of testing changes. In fact I’m not really sure how long this cache even lives for. What I’ve found to be quite helpful Facebook’s URL Linter. This forces a reload of your data and removes the cached copy, and you will be able to see the changes in your app a lot sooner. The tool doesn’t just reload cache, rather it’s there to let you know if you have any issues with your code.
Perhaps I’m the wrong type of developer, but I sometimes like to see the minor changes in my code I test as I go along. I’m not able to visualise multiple changes so easily. So if you are like me, give this a whirl ! We found this tool via a post from developer blog post by Paul Tarjan this time last year.
Edit : see below in the comments for a better alternative.
9.28.2011
Actually, you got it wrong. The URL Lint tool merely verifies the meta tags in the header of the page (ideally used for websites not apps). It should also refresh cache, but the cache that is related to the info in the meta tags, not the cache that stores your css,js etc.
During development, you should refer to the source of your static assets as file.css?random_id and you get rid of the problem. A common implementation in PHP would imply using the uniqid() function. After you go live don’t forget to remove the uniqid() function so Facebook can cache the contents so the page loads faster.
Cheers!
9.28.2011
Thanks for the comment Claudiu ! I did a search for “how to reset facebook cache” yesterday and didn’t find any answers, so I thought I would share my solution. Your solution sounds better, and more correct. Thanks for your comment. I will use your way in future !
Paul
9.28.2011
Glad I could help out. This also works if you have some strong server-side caching solution (Varnish maybe) or the cache refuses to “die” client-side. The trick is that the browser will think it’s a new file rather than the same file with a parameter attached.
For readabiliy, you could also use file.css?v=1 and then increment that. Note that it works with .css and .js but with other files like images or audio/video files as well