The Facebook Like button is replacing ad units or Flash

I'm was working on a facebook like button when i found a really strange problem. After placing my facebook button every google ad/iframe is changed into a facebook Like button. I din't 'like' that at all. Searching for a solution on the web i didn't find one. The link Facebook is providing is dead (at the bottom of this page: Like Button - Facebook Developers).

So the solution I could find is something like this:

You have to use Facebook connect-js.

Add a div with the id 'fb-root' to the bottom of your page (before the </body> tag)
Create a html file on your server which is called: channel.html which only contains this code: <script src="http://connect.facebook.net/en_US/all.js"></script>
On the event: fbAsyncInit do a FB.init with a channelUrl linked to the channel.html (this link has to be absolute!)

An example code:

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId        :     'YOUR APP ID',
            status       :     true, // check login status
            cookie       :     true, // enable cookies to allow the server to access the session
            xfbml        :     true,  // parse XFBML
            channelUrl   :     'http://hostname.nl/channel.html'
        });
    };

    (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
</script>

You still have to use the opengraph meta tags for you button like this (code example directly from facebook):

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <title>The Rock (1996)</title>
        <meta property="og:title" content="The Rock"/>
        <meta property="og:type" content="movie"/>
        <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
        <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
        <meta property="og:site_name" content="IMDb"/>
        <meta property="fb:admins" content="USER_ID"/>
        <meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>
        ...
    </head>
    ...
</html>

I really don't know this is the way facebook has intended this. I didn't fully tested this yet. But this works for me now. If you have a better solution feel free to comment on this post. If I know more i'll create a followup post.

Wouter Beugelsdijk's techblog - tech.wiedo.nl