12

What's the best way to synchronize facebook comments between website articles and fan page. What I would like to achieve is :

  • publish articles on website with fb comments as comments system
  • users can comment this article through website
  • users can comment this article through facebook fan page (for example after sharing link to this article)
  • comments between website and fb are synced

Currently I did everything what's written in docs and all I can do is comment article through website, but I can't find the way to also show / access this discussion from facebook. Even after adding comment there's no activity shown on my account. Everything is displayed only on website.

1

2 Answers 2

2

It is called "Comment Mirroring", and afaik it´s not available in public right now. You can opt in to get updates about it on this page: https://developers.facebook.com/products/social-plugins/comments

0
-1

I recently did that on my website, although comments posted on facebook page go through the website, the link to comment post, redirects to facebook post, where it can be commented.

Below the code I used:

<script>
  function get_facebook_posts() {
       console.log('Loading facebook posts');
       FB.api('/|REPLACE WITH PAGE ID/feed?limit=10&access_token=|REPLACE WITH FB ACCESS TOKEN|', function(response) 
       {
          $.each(response.data, function(key, val){
            message = val['message'];
            if(message != 'undefined' && message != '' && message != null && typeof(message) != 'undefined'){
                identifier = val['id'];
                identifier_parts = identifier.split('_');
                spec_identifier = identifier_parts[1];

                var creator;
                if(typeof(val['admin_creator']) != 'undefined'){
                    creator = val['admin_creator']['name'];
                }
                else{
                    creator = '|REPLACE WITH YOUR DESIRED PAGE NAME|';
                }

                var post_html = '<div class="col-sm-4">'+
                                    '<div class="single-blog">'+
                                        '<img class="fbpostimage" id="post_image_'+ spec_identifier +'" src="images/logo.png" alt="" />'+
                                        '<h2>'+ creator +'</h2>'+
                                        '<ul class="post-meta">'+
                                            '<li><i class="fa fa-clock-o"></i><strong>Published on:</strong> '+ getDateString(val['created_time']) +'</li>'+
                                        '</ul>'+
                                        '<div class="blog-content">'+
                                            '<p>'+ val['message'] +'</p>'+
                                        '</div>'+
                                        '<a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-detail_'+ spec_identifier +'">Comments</a>'+
                                    '</div>'+
                                    '<div class="modal fade" id="blog-detail_'+ spec_identifier +'" tabindex="-1" role="dialog" aria-hidden="true">'+
                                        '<div class="modal-dialog">'+
                                            '<div class="modal-content">'+
                                                '<div class="modal-body">'+
                                                    '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'+
                                                    '<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F|REPLACE WITH PAGE ID|%2Fposts%2F'+ spec_identifier +
                                                    '&width=500" width="500" height="498" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>'+
                                                '</div> '+
                                            '</div>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>';

                $('#|REPLACE WITH THE ID OF THE DIV WHERE POSTS MUST APPEAR|').append(post_html);

                console.log(identifier);


                FB.api('/' + identifier + '/attachments?access_token=|REPLACE WITH FACEBOOK ACCESS TOKEN|', function(subresponse){
                        if(subresponse.data.length > 0){
                            if(typeof(subresponse.data[0]['media']) != 'undefined'){
                                if(typeof(subresponse.data[0]['media']['image']) != 'undefined'){
                                    $('#post_image_' + spec_identifier).attr('src', subresponse.data[0]['media']['image']['src']);
                                }
                            }
                        }
                });
            }
          });
       });

       function getDateString(date){
        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
          "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
        ];
        var date = new Date(date);
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var ampm = date.getHours() >= 12 ? 'PM' : 'AM';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        minutes = minutes < 10 ? '0' + minutes : minutes;
        var strTime = hours + ':' + minutes + ' ' + ampm;

        return monthNames[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear() + " " + strTime;
       }
  }
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '|REPLACE WITH FACEBOOK APP ID|',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.10'
    });
    FB.AppEvents.logPageView();
    FB.Event.subscribe('xfbml.render', get_facebook_posts);
  };

  (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/es_LA/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

You must replace each text between || with the actual APP and Page Data.

Hope it Helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.