Adding Facebook Comments To WordPress

The Facebook comments box lets people comment on content on your site using their Facebook profile and shows this activity to their friends in news feed. It also contains built-in moderation tools and special social relevance ranking. Facebook comments are a great way to add interactivity to your website, while reducing spam. Because most people who use Facebook stay signed in (even if they are leave Facebook.com), they do not have to sign into anything in order to leave a comment. In this article, we will explore how Facebook comments work, and how we can implement them into a CMS (in this article, we will be demonstrating on WordPress) to take your website discussion to the next level…

Tell me about Facebook comments

  1. Facebook comments require a website visitor to have a Facebook account to leave a comment. This discourages spam.
  2. Facebook comments are brought in from Facebook (comments are not stored on your server). Comments are tied to specific URLs, instead of pages (so you can delete a page, recreate it, and as long as the URL is the same, the Facebook comments will be retained).
  3. Facebook comments give the visitor the option to publish their comment to Facebook as well as on your site. This can help drive more traffic back to the page or post they are commenting on.

Should I be using a plugin?

Truthfully, it depends. Using WordPress plugins are great for saving time and avoiding frustration, but can lack the customization options that are available to you from configuring the code manually. Unless you want to deal with rewriting the plugin (which would prevent/discourage you from updating that plugin in the future), I’m going to recommend we do this from scratch. It’s really not that difficult anyways (you will see shortly).

Adding Facebook Comments To WordPress

Step 1: Create An App To Initialize The Code

We will deal with this step more later on in this tutorial, but getting creating an app before we start work is easy and will keep the rest of the tutorial in order.

To create an app, let’s visit Facebook’s Developer Page. Once here, follow these steps:

  1. At the top of the page, select ‘Apps’, and then click on ‘Create a New App’
    createnewapp1
  2. When the ‘Create a New App’ dialog box appears, fill out the display name, and select a category (Apps for Pages is fine). After you’re finished, select the ‘Create App’ button in the lower right corner of the dialog box.
    createnewapp2Facebook will probably ask you to do some sort of CAPTCHA test. This needs to be completed to build the app.
  3. If you see something like the image below, you have done everything correct up to this point.
    createnewapp3
    The only things left to do are set up your contact e-mail (required) and take your app out of development mode.
  4. On the left side of the page, select ‘Settings’. From here, you must fill in a valid contact e-mail. Facebook will not allow your app to be taken out of development mode without this.
    createnewapp4
  5. Once you save your your e-mail, navigate to the left side of the page, and select ‘Status & Review’. We will now take your app out of development mode so you can use it to power your Facebook comments code on your website.
    createnewapp5
    Your toggle will read ‘No’ when the page loads. Click on it so it displays ‘Yes’, and confirm the popup message to take your app live.

Step 2: Get Code From Facebook Comments Plugin Page

Now that your app is live, navigate to Facebook’s Social Plugins Page For Comments. You should see the following box:

fbcomments1

At this point, you the only thing you need to fill in is the pixel width of the plugin. This will vary depending on what you want for your website. To make things easy, I am going to set mine to 700 so that it makes the comments feature of my website 700 pixels wide.

You’ll notice that the image above says there is 14,467 comments. This is because the url http://example.com/comments has comments attached to it. When we change the URL later in the tutorial, this will reflect the proper amount of comments on your website.

We are going to go ahead and select the ‘Get Code’ button. You will see the following popup:

fbcomments2

Keep this window open. We will need to grab different parts of the code in different steps.

Before continuing, I think it’s worth giving an explanation of what you’re seeing here.

  • Although you see options for HTML5, XFBML, IFRAME, and URL, you only have two choices with this plugin: HTML5 and XFBML. XFBML is not covered in this tutorial. If there are enough requests for it in the comments, I will consider making an FBML-specific tutorial in the future.
  • The JavaScript SDK must first be initialized through an application. This is why we had to create an application earlier in this tutorial. Once you have created an application, you can use it to initialize multiple JavaScript SDKs (in case you want to build comments into another site).
  • The first block of code is used to include the JavaScript SDK on your website. Since we are using WordPress in this example, we will insert it in the header.php file (discussed in step 3).
  • The second block of code should be inserted on any page where you want the comments to appear. Since WordPress dynamically generates pages off of PHP template files, we will need to include this in the single.php file, which we will discuss in step 4.

Step 3: Include the JavaScript SDK In WordPress

Because every theme in WordPress is different, there aren’t a lot of pictures I can include here for you to follow. Hopefully you have enough of an understanding of WordPress to get in and modify some files.

I prefer to edit my WordPress files with Sublime Text 2 via Transmit FTP. You can use anything you’d like, or you can edit directly through the WordPress editor (located under appearance–>editor). Either way, changes to PHP files should be made in a child theme.

  1. Make a copy of your header.php and place it into your child theme. Open that file in a text editor and search (CTRL + F on Windows or ⌘ + F on a Mac) for <body>.
  2. Once you have found <body>, press enter a few times to make some space behind it. Make sure you are not jumping in the middle of PHP syntax, and that you can write HTML. Copy and paste the first section of code provided by Facebook (to include the JavaScript SDK).
  3. Once you have done this, make sure you save your edited header.php file.

Because the header.php file is loaded at the top of each WordPress page, any page that loads in the website should be capable of displaying Facebook comments on it now that the JavaScript SDK file is included. We can now close header.php and move on to single.php.

Step 4: Set Up Facebook Comments On Every Blog Post

Single.php is a template file that will display a single blog post (just like the one you’re reading). The important thing to remember is that this is a template file. We are going to use a combination of Facebook’s code and PHP to make sure that comments are generated for each unique page, based on the URL.

  1. If you followed the tutorial this far, the text to include in the single.php template file should look like this:
  2. Make sure you have this code copied to your clipboard. Next, you need to copy your single.php file to the child theme directory like you did with header.phpin step 3.
  3. In single.php, you are going to need to find out where the blog article ends (different themes do this different ways). If you paste the code that’s on your clipboard into the single.php file where you think the article ends, save it and reload it, you should see it when you view a blog post on your site. This may require some adjusting on your part.

Once you’re happy with the position of the Facebook comments code, we need to make a few adjustments to that code in order to make sure that it is loading the proper content. Specifically, we are going to need to write a bit of PHP that retrieves the current page’s URL, and is able to return that URL into the Facebook code (the data-href attribute). This makes sure that the comments being displayed are for the particular page the user is on.

  1. Copy and paste the following PHP code into your site just above where you put the Facebook code:
  2. Modify the Facebook code to this:

Notice how we modified the data-href attribute’s value to echo back the url variable that we created in the line above it? That’s the secret sauce for dynamic comments in a CMS!

I hope you were able to follow this tutorial. Leave any questions (or nice comments) in the Facebook comments below!

Comments