How to put Google Adsense ads into your Facebook App.

A question I get asked frequently is “How can you monetize with Google Adsense ads in a Facebook application?”

Anyone who has tried will find it is not as easy as it sounds.  This is because Facebook plays about with Javascript code as it serves your pages up.  This is a security thing on their part, but it also means that a lot of standard Javascript does not function as you’d expect.

But there is a fairly easy work-around…

Before we get into the ‘HOW’ and give you some code examples I want to ensure that you know of the potential issues you could run into by implementing Adsense in your app.

The warnings and considerations…

In a nutshell it could be considered a breach of Googles TOS.  Despite this there are many developers, both large and small who put adsense ads into their applications and I’ve not come across any genuine stories of Google shutting anyone down yet.  Indeed Rockyouads sometimes serves up a form of Google ad and they are one of the highest regarded ad companies and thousands of apps use their ads.

The problem lies in the fact that Google don’t like ads been put in iframes.  But in the case of Facebook there simply isn’t an alternative way.

But to cover myself from anyone claiming my advice landed them in trouble here is a warning:

The Google Adsense terms of service do not permit the use of IFrames to show their ads and therefore you run the risk of having your adsense account suspended.  Therefore you take any advice given here at your own risk.

OK, that aside here is some additional advice;  If you are going to put adsense ads into your application don’t go mad!  I would suggest that on any canvas page you only run one or two adsense ads per page and ensure that there is some content in the pages served up within the frames and not just a bunch of keywords.

Setting up your Google Adsense account.

You need to have an adsense account set up and you must be using this account to serve ads up on a proper web site.  You cannot sign up and only use it for Facebook applications.  This is a requirement of Google, they need you to be running a site that adheres to their policys and that their ‘Googlebot’ can view.  If you don’t operate any kind of site then the easiest thing to do is set up a blog on www.blogger.com and insert some ads into that. This will get you an account and approval from Google.

How to do it…

The actual process is fairly straight forward.

Step One: Make a simple html page which has relevant content and keywords in it and the ads that you want to show within your application.

Step Two: Make a second page to view the first page you made through an iFrame.

Step Three: Insert a simple piece of Code into your application that will show these pages through Facebook without  effecting the way that the Ads should be shown.

Code example:

The first file (in my case is called head.html) contains the following;

This is the first file to get adsense into your facebook app.

The second file serves up the first page but in a frame (hframe.html):

2nd file serves first in an iframe.

Finally this is the ad-include.php file that I include in my canvas pages where I want the ads to appear.  I call it from php like this:

include ‘ads/ad-include.php’;

The ad-include.php file contains a fb iframe command which loads the fhead.html file in a 90 high x 728 wide iframe (set all margins to zero and have no frame border).

If you would like source copies of the three files required which you can simple load up and edit then they are made available for download below for a small fee, or you can click the ‘Get it Free’ icon below and complete a quick survey or trial offer to get your free copy of the source files.

Shipping Rate: F