Search code examples
javascriptfacebookfacebook-graph-apifacebook-comments

How to properly use Comment Box Widget

I have read documentation but it quite fragmented and not friendly.

Any one can address me on the proper way to include Fb comment box on my page ? I need to understand all the important option that I can use to customize the behavior ?

Some precise questions:

  1. <fb:comment> is deprecated ? (
  2. How to change look (colorscheme="" is the only possibility) ?
  3. how to disable the possibility to log in with other service (AOL, Yahoo ...) ?

I will accept also answer pointing to a complete and updated documentation ( dev user friendly )

Here my current Implementation:

<head> 
    <meta property="og:locale" content="<?php echo $locale ?>" />
    <meta property="og:title" content="<?php echo $title ?>"/>
    <!--<meta property="og:description" content="<?php // echo $description    ?>"-->
    <meta property="og:type" content="product"/>
    <meta property="og:url" content="<?php echo $url ?>"/>
    <meta property="og:image" content="<?php echo $imageUrl ?>"/>
    <meta property="og:site_name" content="<?php echo $siteName ?>"/>
    <meta property="fb:app_id" content="<?php echo $appId ?>"/>
    <!--<meta property="fb:admins" content="???????????????"/>--> 
</head>

<body>
  <div id="fb-root"></div>

    <script>
        window.fbAsyncInit = function() {
            // init the FB JS SDK
            FB.init({
                appId      : '<?php echo $appId ?>', // App ID from the App Dashboard
                channelUrl : '//<?php echo $url ?>/channel.html', // Channel File for x-domain communication
                status     : true, // check the login status upon init?
                cookie     : true, // set sessions cookies to allow your server to access the session?
                xfbml      : true  // parse XFBML tags on this page?
            });

            // Additional initialization code such as adding Event Listeners goes here

        };

        // Load the SDK's source Asynchronously
        (function(d){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/<?php echo $locale ?>/all.js";
            ref.parentNode.insertBefore(js, ref);
        }(document));
    </script>

    <div class="fb-comments fb_iframe_widget" data-href="<?php echo $url ?>" data-num-posts="<?php echo $comment_limit ?>" data-width="<?php echo $width ?>" colorscheme="<?php echo $colorScheme ?>" reverse="<?php echo $reverse ?>"></div>

</body>
Solution

  • <fb:comment> is not deprecated.

    Just 'light' and 'dark' color schemes.

    To disable 3rd party logins like Yahoo and AOL, make sure "Other login providers" is unchecked in https://developers.facebook.com/tools/comments

    Here's how to find the comments settings:

    https://developers.facebook.com/tools/comments

    comments moderation

    comments settings

    Make sure your app_id is included as a param when you load the js-sdk (all.js):

    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=444088878971084";