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: 'YOURAPPID', 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 "YOURAPPID" 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
shared this idea
Evgeny Zaritovskiy
responded
Scheduled for Dec 2015
-
Andy Huang
commented
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?
Example:
This page has a comment thread https://urbanadventureclub.com/event-2895263That 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
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
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>
-
Matthieu
commented
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>
-
Gareth Fry
commented
Code was generated using:
http://developers.facebook.com/docs/reference/plugins/comments/
-
Matthieu
commented
What is the code that is being striped out?
-
Gareth Fry
commented
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="/" 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
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.
-
Matthieu
commented
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/Social+gadgets
-
yrwray
commented
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?
