WordPress.org

Forums

Facebook
How to display recent comments from Facebook Comments social plugin (7 posts)

  1. fouldsy99
    Member
    Posted 1 year ago #

    How do I display recent comments from Facebook Comments social plugin on my website?

    I have integrated the facebook comments social plugin on my wordpress blog and I just want to put a widget on my sidebar that displays the recent comments from the social plugin.

    Regards

    https://wordpress.org/plugins/facebook/

  2. Niall Kennedy
    Member
    Plugin Author

    Posted 1 year ago #

    You can pull this data from the Facebook Graph API comment endpoints and/or subscribe to the comments.create event when a new comment is submitted.

  3. fouldsy99
    Member
    Posted 1 year ago #

    Hi Niall,

    Thanks for your reply.

    Could you give me a more detailed instructions on how I can achieve this please?

    Regards

  4. fouldsy99
    Member
    Posted 1 year ago #

    I saw here: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

    // In your HTML, include the comments plugin
    <div class="fb-comments" data-href="http://url.to.your-page/page.html" data-numposts="5" data-colorscheme="light"></div>
    
    // In your onload method
    FB.Event.subscribe('comment.create', comment_callback);
    FB.Event.subscribe('comment.remove', comment_callback);
    
    // In your JavaScript
    var comment_callback = function(response) {
      console.log("comment_callback");
      console.log(response);
    }

    Where does this code need to go to retrieve comments?

  5. Niall Kennedy
    Member
    Plugin Author

    Posted 1 year ago #

    Your comment callback might record the latest comment by sending a new request to your WordPress server, which would then keep track of the last ten comments.

  6. fouldsy99
    Member
    Posted 1 year ago #

    <!-- Recent comments number -->
    		<p>
    				// In your HTML, include the comments plugin
    <div class="fb-comments" data-href="http://worldinsport.com" data-numposts="5" data-colorscheme="light"></div>
    
    // In your onload method
    FB.Event.subscribe('comment.create', comment_callback);
    FB.Event.subscribe('comment.remove', comment_callback);
    
    // In your JavaScript
    var comment_callback = function(response) {
      console.log("comment_callback");
      console.log(response);
    }</p>

    This didn't work unfortunately

  7. fouldsy99
    Member
    Posted 1 year ago #

    Ok I've made some changes.

    I my header I now have:

    <div id="fb-root"></div>
    <script>
        window.fbAsyncInit = function () {
            //console.log('window.fbAsyncInit');
    
            FB.init({
      appId: 'appid',
      authResponse: false,
      channelUrl: "http://worldinsport.com/",
      cookie: true,
      oauth: true,
      status: true,
      xbfml: true
    });
    
            //Additional initialization code here
            FB.Event.subscribe('edge.create',
                        function (response) {
                            //console.log('edge.create');
                            alert('edge.create');
                        }
                 );
    
            FB.Event.subscribe('xfbml.render',
                    function (response) {
                        //console.log('xfbml.render');
                        alert('xfbml.render');
                    }
                 );
        };
    
        // Load the SDK 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/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        } (document));
    
    var page_like_or_unlike_callback = function(url, html_element) {
      console.log("page_like_or_unlike_callback");
      console.log(url);
      console.log(html_element);
    }
    
    // In your onload handler
    FB.Event.subscribe('edge.create', page_like_or_unlike_callback);
    FB.Event.subscribe('edge.remove', page_like_or_unlike_callback);
    
    var finished_rendering = function() {
      console.log("finished rendering plugins");
    }
    
    // In your onload handler
    FB.Event.subscribe('xfbml.render', finished_rendering);
    
    // In your onload method
    FB.Event.subscribe('comment.create', comment_callback);
    FB.Event.subscribe('comment.remove', comment_callback);
    
    // In your JavaScript
    var comment_callback = function(response) {
      console.log("comment_callback");
      console.log(response);
    }
    
    </script>

    Is that correct?

    Also with regards to recent comments, when I have:

    <div class="fb-comments" data-href="http://url.to.your-page/page.html" data-numposts="3" data-colorscheme="light"></div>

    Displays last three comments of that site perfectly, just isn't displaying my comments due to url.

    However, when I change the data-href to either http://worldinsport.com it doesn't display whole site comments and when I change it to a direct url with facebook comments already there it just displays the comments box and not comments already submitted

    This is code with my url:

    <div class="fb-comments" data-href="http://worldinsport.com/neck-injury-rules-out-dan-cole/" data-numposts="3" data-colorscheme="light"></div>

    Any help please?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic