What can we do to make it easier to design with Wild Apricot?

Implementing Facebook Comments

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.

1 vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

    MatthieuMatthieu shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    9 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • MatthieuMatthieu commented  ·   ·  Flag as inappropriate

        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.

      • Gareth FryGareth Fry commented  ·   ·  Flag as inappropriate

        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="/" data-num-posts="10" data-width="500"></div>');</script>

      • Gareth FryGareth Fry commented  ·   ·  Flag as inappropriate

        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/&quot; 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="/" 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.

      • Gareth FryGareth Fry commented  ·   ·  Flag as inappropriate

        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.

      • yrwrayyrwray commented  ·   ·  Flag as inappropriate

        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?

      Feedback and Knowledge Base

      Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7