html facebook facebook-social-plugins facebook-comments

Implementing and testing Facebook Social Plugins locally

I'm new to Facebook development and would like to to add a comments plugin to my site.
I have created an app on Facebook in case it is needed. but since I have not registered my domain yet, I left the App Domain section empty.
Then I copied the code given to me at: http://developers.facebook.com/docs/reference/plugins/comments/ to test the plugin. But when I tested the code in an html file, nothing shows up.

Do I need an appid to use the comments plugin?
If I need the appid, should I first buy a domain and add it in the App Domain section? can I just test the plugin with example.com url?
In general, what is the most basic way to get comments plugin to work?

UPDATE: Based on Lix's answer, I have edited my hosts file and added:

127.0.0.1 www.example.com
127.0.0.1 example.com
127.0.0.1 http://www.example.com
127.0.0.1 http://example.com

Here's my test page:

<html>
<head>
  <title>My Web page</title>
</head>
<body>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
</html>

But still no luck.

Solution

So far as I know, you do need an App to use the Comments plugin (for the moderation functionality I believe). If you look at the code Facebook generates for the Comments Box, you can see it has an App Id:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_APP_ID"; // <-- here
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

To get your app working correctly locally though, you will need to set up a virtual host. I usually set them up with names like http://website1.dev.

Part of setting up a virtual host, as Lix mentions, is adding the domain to your hosts file to resolve to your localhost (127.0.0.1).

Another part of that is creating a Virtual Host on your local web server for your website. This way you are actually accessing your local site in the browser as http://example.com and not localhost/example.com. There are lots of good articles about how to set up Apache to do this, here are two:

Then, make sure that your Facebook app's admin settings are set up correctly to allow the http://example.com domain. When you set up the Apps "Website" you have to specify the "Site URL". You can also add your new local domain as the apps "App Domain".

God luck!