If you have created a Facebook application that has an iframe tab and you want the iframe to automatically grow to the size of the content, you can use FB.Canvas.setAutoGrow() within the frame. First of all you need to edit your application, so go to https://developers.facebook.com/apps/ and click ‘Edit App’. Then in Settings -> Advanced, scroll down to Canvas Settings and make sure Canvas Height is set to ‘fluid’:
You’re not done yet, you need to insert the FB.Canvas.setAutoGrow() function into your iframe’s body. The facebook developer site states that you should use this code:
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
... // Other configuration variables here
});
FB.Canvas.setAutoGrow(); //<--- This
}However, I noticed that setAutoGrow will not properly work on some browsers (mainly firefox) if you put it within window.fbAsyncInit function like how the facebook developer site states. Instead, run FB.Canvas.setAutoGrow() on window.onload instead – this will ensure that the timer starts after the browser has finished rendering the document and the DOM is ready:
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
... // Other configuration variables here
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(100); //Run the timer every 100 milliseconds, you can increase this if you want to save CPU cycles
}Your facebook iframe should be auto growing to the height of the content now. If it isn’t, leave a comment and I will help you. Even though the iframe height is sizing automatically, you may still have a vertical scrollbar visible. To remove this, set overflow:hidden on the body:
Your iframe document should now look like this:
<body style="background:#FFF;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID_HERE',
...
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
//Some content here
</body>Everything should be working now! If you have any problems, or found this post helpful, leave a comment 
Two possible error messages for 4020: “Information received from an Invalid IP address” and just “Invalid IP address”.
While I was configuring SagePay Direct for an osCommerce store I made, the checkout process wasn’t completing because SagePay was returning error 4020. This means that the IP address I added to the “Valid IPs” tab on the SagePay control panel isn’t matching up with the IP address the request is coming from. If you’re getting this error too then it is most likely because you’ve entered the wrong IP, or no IP at all. You can log in to SagePay live at https://live.sagepay.com/mysagepay/. If you switch SagePay to Simulator mode, the error message will also include the IP address it received the request from, so then you can go and add the correct IP address. You can sign up for a simulator account at https://support.sagepay.com/apply/RequestSimAccount.asp – If you definitely have the correct IP address added, and you are still getting the same error, then something else must be up…
Attempt #1: I figured out that perhaps SagePay had updated their API and my SagePay Direct payment module for osCommerce was out of date? The osCommerce community addons website shows that the latest version of SagePay Direct payment module is v1.1, whereas I was using v1.0. It seems that the osCommerce v2.3.1 package I downloaded shipped with SagePay Direct v1.0. After installing v1.1 I am still getting the same error. Something else must be up?
Attempt #2 (solution!): SagePay seems to be returning “Error 4020: Invalid IP Address” because the transaction wasn’t being secured with SSL. It’s actually a legal requirement in UK, due to data security standards laws, to secure all sensitive information (address, credit card numberr, etc) by having the checkout process encrypted with 128bit SSL. The error seems to have gone away.
I’m going to write a little bit about Google Analytics today, for those who don’t know anything about it. If you already use Google Analytics on your website then stop reading now, I’m only going to be going through the basics.
So, what is Google Analytics? It’s an amazing web application that allows you to see the performance and statistics of your website. Tracking how your website performs is crucial. It’s the only way to find out what works and what doesn’t. It saves down all sorts of key information such as what browsers your visitors are using, where they came from, what keywords they used to find your site on google, what screen resolution they’re using and all sorts of other interesting and important information. This can be a vital tool if you are looking to optimise your website for search engines.
I recommend Google Analytics to anyone who runs a website and is interested in what is going on with their visitors. To get Google Analytics installed and working on your website, the first step would be to go to http://www.google.com/analytics/. If you already have a google account (Which you WILL have if you use gmail) you can click “Access Analytics” and login as normal. If you don’t have a google account, click “Sign Up Now” and get yourself registered.
Once you’re logged into Google Analytics, you should be given a sign up page if you’ve never used it before. Click the sign up button and get the form filled in. Once you’re all done, you will be given a block of javascript code to put at the top of your website, in thetags. Get that put in and you’re all ready to go! You’ll have to give the analytics data some time to update, it appears to be updated daily so you may have to wait till the next day to see anything interesting.
Well, hopefully I’ve covered everything. Do leave me a comment if you found this helpful, or if you need more help. Thanks, and enjoy!
Recent Comments