Facebook Comments can be a great tool to increase the social sharing of posts. When people leave a comment, it will be shared on Facebook. Since most people are already logged into their Facebook accounts, you’re also simplify their commenting experience.
Anything that integrates with Facebook is called a “Facebook App”. First you’ll need to create an app, then you can generate the comment code to add to your site.
Setup Facebook App
First go to Facebook Developers. In the top right corner go to “My Apps”, then “Add a New App”. Give your app a name – I use the name of whatever website I’m building this on – and click “Create App ID”.
You’ll then see an App Dashboard screen, something like this. In the left column, go to Settings > Basic, then at the bottom click “Add Platform”. Select “Website” as the platform, then type in your website’s URL and click “Save Changes”.
Find a text box for “App Domains” on that page and type your domain name. Also place a link to your site’s privacy policy in the “Privacy Policy URL” field. Click “Save Changes”.
At the top of the page you’ll see an on/off toggle. It will say “Status: In Development” (screenshot). Flip the switch to “On”, which changes your status to “Live”.
Get Comment Code
Go to the Facebook Comments page. Scroll down to the “Get Code” button and click it.
In “Step 1”, select your newly created Facebook App from the dropdown.
Copy the code from “Step 2” and add it to your site. If you don’t want to edit code, you can use the Insert Headers and Footers plugin and insert it into the “Footer Scripts” box.
Copy the code from “Step 3” and replace your theme’s comment area with it. This one does require code editing unfortunately. You can usually find it in comments.php or single.php. If you’re using a Genesis child theme, do this. Change the URL in the code to <?php echo get_permalink(); ?> , so that the comments are tied to the current post’s URL. The final code should look like this:
<div class="fb-comments" data-href="<?php echo get_permalink(); ?>" data-numposts="5"></div>
That’s it! You should now have Facebook comments on your site.
Comment Moderation
Whoever sets up the app is an “Administrator” and can moderate comments. If you’d like to add additional people (ex: your client), go back to Facebook Developers and select the app from the “My Apps” dropdown.
In the left column, click “Roles”. You should see a page like this. Click “Add Administrators” and type in the person’s name.
If you are not already friends with them, use the URL slug from their Facebook profile. For instance, my Facebook profile is https://www.facebook.com/billerickson, so you’d use “billerickson”.
Marjorie Ray says
Thanks for this write-up Bill. Very helpful! Recently I added the Custom Facebook Feed plugin by https://smashballoon.com – but I think it really slows down the site. It’s nice for my client since he likes posting to Facebook and have it show up on his website, but not sure if it’s worth the slowdown in speed.
Stephanie says
Love it! thank you.
Rick R. Duncan says
Hey Bill,
In order to get your code to work I had to add some code after the opening body tag. A span tag for for fb-root as well as some JavaScript. Did i miss something in your tutorial?
Your code together with my code for the span and js I was able to get FB commenting on a new cycling website.
Thanks for the tutorial!
-rd
Bill Erickson says
You’re right, I forgot to include the Javascript SDK. I’ve updated the post to include that.
The reason it wasn’t initially included is because the site I was building already had the SDK added for the Facebook like box.
Jesse says
Bill
Thanks you for the code. When I add the code it is showing up on all pages and on every post on the archives page as well. I wanted the FB comments to just show on a single blog post only.
Thanks in advance!
Bill Erickson says
The first code block should be added to the single.php file so that it only loads on single posts. If you are adding it in functions.php, add this to the beginning of the function:
if( ! is_single() ) return;Atef says
Hi,
I am using Genesis Framework and faced the same problem. the FB comment box shows on all pages and posts and frontpage even if comments are not allowed on this post.
I have put the code in functions.php
when I added the code `if( ! is_single() ) return;`, the facebook comment box disappears altogether and a normal WP comment box appear instead, as if there is no code at all.
what shall i do?
thanks
Atef Raouf says
ok, i found the problem. I pasted the code above before the function, not after. When I pasted it after the function, it is now working properly.
however, the function ignores that some posts have the “allow comments” unticked in the discussion part in the admin side.
it now allows comments on all posts.
How to get the function to recognize that some posts do not have “allow comments” ticked?
thanks
Bill Erickson says
Change it to
if( ! ( is_single() && comments_open() ) ) return;Byoung Lee says
Hi Bill,
Thank you for this great tip! How would you go about displaying the number of Facebook comments in the Post Info? I’d really appreciate any advice you can provide.
Bill Erickson says
That’s a great question. I’ve updated the post above to include an example of displaying the facebook comment count.
Nareach says
Help me i cannot understand for your topic, i just want to view facebook comment count on my blog’s post. please guide me more clearly because i am not good in englisth and edit code.
I use Newspaper theme.
Thanks
Bese regard,
nareach
Bill Erickson says
Since the comments are happening on Facebook, you need to pull that data from Facebook. The simplest way to do that is with the EA Share Count plugin.
Install EA Share Count, sign up for free at SharedCount.com, then copy your API key to Settings > Share Count.
Now when editing any post you can see the facebook comment count (as well as facebook likes, pinterest pins… all the share counts) in the sidebar of the Edit Post screen.
To display this on your website, you’ll need to use one of the two approaches I outlined above. Either add this where you want your comment count to appear:
ea_share()->core->count( get_the_ID(), 'facebook_comments' );Or add the larger snippet to your theme’s functions.php file which makes a shortcode, [fb-comments]. Add that where you want the comment count to appear (ex: in the post_info filter).
If you need additional help I recommend you hire someone on Codeable to help.
nareach says
I try with your tutorial but it doesn’t work for with Newspaper theme.
Detlef Bosau says
High to all,
please allow me to ask a question: I tried to add FB comments to my homepage, the comments show up, however, the moderation button does not show up.
I put the whole thing on a little test page, where I kept the code intentionally small and simple, plese find it here: http://spielwiese.detlef-bosau.de/
It is written in German, however, the missing button can be seen in English as well.
I would very much appreciate some advice.
Detlef
Bill Erickson says
When you register the scripts ( `be_load_more_js()` hooked to wp_enqueue_scripts) Add a parameter to the `$args` variable specifying context. Ex: https://gist.github.com/billerickson/b1fcdde715fed1d4dd72fc4c0fea0b9c
Then when you’re outputting those posts, look at the context. Ex: https://gist.github.com/billerickson/35069f8775a65f21a48d7a64a55dc6bf
Gabriel says
I just wanted to know if there is a specific reason you choose to use the nativeWordpress commenting system vs FaceBook?
Bill Erickson says
I prefer to have control over all the content of my site. When you use Facebook comments, the comment data is no longer stored in your WordPress installation.
Also, I’d lose the 3,500+ comments already on my website.
Prakash says
Thanks for the Great tutorial , Just would like to know whether Genesis Simple share or Jetpack share can pull up Fb comments counts ??
Shane from Amazinghowto.com says
Its work.. thank you Bill
Is the comments are share to their facebook profile ?
Bill Erickson says
I don’t believe the comment appears on the user’s Facebook profile, but it is considered a social engagement (as is liking or sharing an article) so will help improve the article’s visibility on Facebook.