Adding Facebook Comments

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

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Ken Billington says

    Great article on how to set up Facebook Comments without a plugin. My only concern is that Facebook Comments are not being imported into the WordPress database.

    Do you know of a way to get Facebook Comments imported into the WordPress database?

    This would be a great achievement of it could be done!

  2. Ken Billington says

    Hi Bill

    Facebook Comments Sync worked fine until September 2016 but then something happened and it stopped syncing. The same happened with SEO Facebook Comments.

    It would be great if there was a piece of code we could add or modify on these plugins to restart the syncing.

  3. Gab says

    Thank you for that Bill.

    I’m currently trying to sync facebook comments with wordpress comments while also adding a custom meta to each comment upon saving in the database.

    Its proving to be rather a complex task. Anyone who could shed a lihght would be much appreciated!

    cheers

  4. Istvan Horvath says

    Is it possible to use this code together with the WP comments? In other words: will my olde(er) WP comments still display if I switch to this FB comment code?

    • Bill Erickson says

      Unfortunately no, you cannot migrate your existing contents into Facebook.

      On some sites we’ve left the old WordPress comments displayed below the Facebook comments block for this specific reason.

      • Istvan Horvath says

        I am fine just having both. Some plugins make the old WP comments disappear…
        Even more – I’m ready to make the setup to have both systems, if possible.

  5. Trina says

    Hi, I’m not sure if my message came through. I’m looking to remove the wordpress comment box in favour of a facebook comment box. But the wordpress box is still there. Do you know what I would need to do to remove this permanently. Many thanks Trina

  6. Niharika Dale says

    Hi Bill,

    My site is using facebook comments plugin. But, I didn’t have a App ID previously.

    Now, I created one.

    So will i be able to review the previous comments which were already there?

    Thanks…….!!

    • Bill Erickson says

      Yes, I believe once you associate the App ID with your domain, you will be able to manage all the comments posted on that domain.

  7. Samuel says

    Looking for this kind of stuff to add facebook comments on one of my wordpress project.
    Thanks for writing about it.

Leave A Reply