3

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.

Kamyar
  • 18,639
  • 9
  • 97
  • 171

2 Answers2

3

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!

thaddeusmt
  • 15,410
  • 9
  • 67
  • 67
  • 1
    So the app id is required for administration purposes. Thanks for the insightful answer :) – Kamyar Jan 27 '12 at 17:15
2

What you can do is edit your hosts file to contain your "fake" local domain and place that value there.

Lix
  • 47,311
  • 12
  • 103
  • 131
  • would you please elaborate a bit. (I know about hosts file. But I couldn't get what you mean) – Kamyar Jan 27 '12 at 15:18
  • Is it possible to just test it with example.com? just as they did so on http://developers.facebook.com/docs/reference/plugins/comments/ ? – Kamyar Jan 27 '12 at 15:19
  • sure it is. All you have to do make your local computer think that example.com exists. Point it to 127.0.0.1 – Lix Jan 27 '12 at 15:23
  • Still no luck. Updated my question. – Kamyar Jan 27 '12 at 15:34
  • 1
    Was a silly fault on my side. renamed js.src = `"//connect.facebook.net/en_US/all.js#xfbml=1";` to `js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";` Since I was opening html locally. – Kamyar Jan 27 '12 at 15:51