Why does my Facebook Like button create a brand new Facebook page?

Question

I'm trying to integrate Facebook into a site I'm developing, I have created a Facebook Page for the business & a Facebook app too - I am very confused with the documentation & terminology that Facebook uses.

I am using FBML to add a Recommend button to the footer of my site so that users can recommend that particular page but when I click on it, it creates a brand new Facebook page for that URI & seemingly ignores all the facebook & open graph metatag info.

FYI, these are the metatags that I'm using:

<meta property="og:title" content="My Page title"/>
<meta property="og:type" content="company"/>
<meta property="og:url" content="http://mysite.com/"/&gt;
<meta property="og:image" content="http://mysiteimage.jpg"/&gt;
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="My_FB_Admin_ID"/>
<meta property="fb:page_id" content="My_FB_Page_ID" />
<meta property="fb:app_id" content="My_FB_App_ID" />
<meta property="og:description" content="Desctiption of page"/>

This is the FBML I'm using:

<fb:like width="940" action="recommend" font="lucida grande"></fb:like>

This is the Facebook Javascript SDK code I'm adding to each page before the </body> tag (it is only being added once per page):

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({appId: 'My_FB_App_ID', status: true, cookie: true,
        xfbml: true});
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
</script>

Does anyone have any idea what the heck I should be doing? Should I be using an app as the fan page or the page I'm already using??

I would also really like to be able to 'Like/Recommend' the actual Facebook page from the site, is this possible?

Many thanks in advance.

Zander