Membership management, event r... » Wild Apricot Software » For Designers and Developers » Re: Implementing Facebook Comments

Implementing Facebook Comments

Last post 09-22-2011, 4:43 PM by Poetic Apricot. 9 replies.
Sort Posts:

  •  08-06-2010, 10:00 AM 19129

    Implementing Facebook Comments

    Reply Quote

    Facebook has a comment box widget that you can add to your website to all people to comment on your pages with or without logging in to Facebook. If the commenter logs in to Facebook in order to post they will also be given the option to post their comment on their Facebook profile as well which can help spread awareness of your site virally.

    Implementing the widget is easy. Before you can start using any Facebook widgets, you need to get an application ID from Facebook - you can do this be registering an application here: http://developers.facebook.com/setup/

    Once you have this,  log into your Wild Apricot website as an administrator and go to Settings > Global JavaScript and paste the following into the editor:

    <div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
    FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true,
    xfbml: true});
    };
    (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
    '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
    }());
    </script>

     Change the part in the code that says "YOUR_APP_ID" to the application ID you got after registering your app.

    Save this, and then on the page you want the comments to appear, click on [Edit] and then on the <S> script button and paste in the following:

    <script>
    document.write('<fb:comments numposts="10" width="550"></fb:comments>');
    </script>

    Change the number next to numposts to set the number of posts you want displayed.
    Change the number next to width to set the width of the widget.

    Save  the changes and refresh the page to see the widget box. To administer the comments, log into Facebook using the account used to get the application ID and then you will see a link that says "Administer Comments" under the post button of your widget.

    Matthieu (Ex-Apricot)
    Please contact support directly for assistance on any of my posts as I will no longer be checking these forums: support@wildapricot.com

  •  01-21-2011, 3:01 PM 21273 in reply to 19129

    • yrwray is not online. Last active: 12-06-2011, 4:14 PM yrwray
    • Top 500 Contributor
    • Joined about 2 years ago
    • Posts 5

    Re: Implementing Facebook Comments

    Reply Quote
    Thank you for this post! You've made it easy to implement comments. One question, can I use this code even on restricted access members only pages within my Wild Apricot site?

  •  01-21-2011, 3:19 PM 21274 in reply to 21273

    Re: Implementing Facebook Comments

    Reply Quote

    Yes of course.

    By the way I've added instructions for other Facebook plugins on the help site - see: http://help.wildapricot.com/display/DOC/Adding+Facebook+Plugins

    Matthieu (Ex-Apricot)
    Please contact support directly for assistance on any of my posts as I will no longer be checking these forums: support@wildapricot.com

  •  09-17-2011, 11:49 PM 23636 in reply to 21274

    Re: Implementing Facebook Comments

    Reply Quote
    The latest version of the Facebook comments app uses slightly different code but in a similar manner to that described above. Unfortunately when you paste it into WA the HTML cleaning routine strips out the url for your site.

  •  09-19-2011, 10:31 AM 23642 in reply to 23636

    Re: Implementing Facebook Comments

    Reply Quote
    What is the code that is being striped out?
    Matthieu (Ex-Apricot)
    Please contact support directly for assistance on any of my posts as I will no longer be checking these forums: support@wildapricot.com

  •  09-19-2011, 5:41 PM 23647 in reply to 23642

    Re: Implementing Facebook Comments

    Reply Quote

    This is what Facebook generates:

    For the Global Javascript: 

    <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>

    For each page: 

    <div class="fb-comments" data-href="http://www.thenameofmywebsite.com/" data-num-posts="10" data-width="500"></div> 

     

     

    It seems to use thenameofmywebsite.com as an alternative to an App ID. However when I paste the code for each page onto a page and save it, WA strips it to:

     

     <div class="fb-comments" data-href="http://community.wildapricot.com/" data-num-posts="10" data-width="500"></div> 

    which seems to show a generic comments page that 975 people have commented on (mostly with spam) rather than generating a comments page for my website. 

  •  09-19-2011, 5:51 PM 23648 in reply to 23647

    Re: Implementing Facebook Comments

    Reply Quote

    Code was generated using:

    http://developers.facebook.com/docs/reference/plugins/comments/ 

  •  09-20-2011, 1:42 PM 23660 in reply to 23647

    Re: Implementing Facebook Comments

    Reply Quote

    Hi,

     

    For each page, try using this instead:

     

    <script>document.write('<div class="fb-comments" data-href="http://www.thenameofmywebsite.com/" data-num-posts="10" data-width="500"></div>');</script>

    Matthieu (Ex-Apricot)
    Please contact support directly for assistance on any of my posts as I will no longer be checking these forums: support@wildapricot.com

  •  09-21-2011, 10:17 AM 23666 in reply to 23660

    Re: Implementing Facebook Comments

    Reply Quote

    When I do that and click Save, WA strips out the domain name to leave this:

    <script>document.write('<div class="fb-comments" data-href="http://community.wildapricot.com/" data-num-posts="10" data-width="500"></div>');</script> 

     

  •  09-22-2011, 4:43 PM 23678 in reply to 23666

    Re: Implementing Facebook Comments

    Reply Quote

    I took a look at the new code Facebook is using, you need to use the xFBML version of their code, not  the HTML5 version.

    Regenerate the code and select xFBML from the drop down list.

    Matthieu (Ex-Apricot)
    Please contact support directly for assistance on any of my posts as I will no longer be checking these forums: support@wildapricot.com
View as RSS news feed in XML
Membership Software - Wild Apricot