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

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>');

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.

2 votes
Sign in
Password icon
Signed in as (Sign out)

We’ll send you updates on this idea

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


Sign in
Password icon
Signed in as (Sign out)
  • Andy Huang commented  ·   ·  Flag as inappropriate

    I'm running into an issue where the same event has different pages (different URLs), so a comment left on one page cannot be seen on the other. Is there a solution around that?

    This page has a comment thread https://urbanadventureclub.com/event-2895263

    That I cannot see on this page: https://urbanadventureclub.com/event-2895263?CalendarViewType=4&SelectedDate=5/2/2018

    Even though it's the exact same event, just the URLs are not identical.

    Hope there's a simple solution! =D

  • Matthieu 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 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 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 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.

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