How To Manually Install Facebook Comments In Any Theme

There are advantages of installing Facebook comments manually rather than simply installing a plugin.

Some of these benefits are:

  • Use of conditional tags to load the Facebook javascript only on specific posts.
  • Use of theme specific and WordPress hooks to determine the exact position you want the FB comment form to display.
  • Customization of the Facebook comments plugin code.

There’s a few steps involved including:

  1. Create a Facebook Developers App
  2. Get code snippets
  3. Create a .js file for the Javascript SDK
  4. Enqueue and hook in script

Once you’ve created a new app, you can then grab the code.

The first code snippet goes in a new .js file which i named fb-comments.js and placed in a new folder named js in the child themes root directory.

Comments

The second snippet is added to a custom function and hooked into place using the WordPress comments_form hook or a theme specific hook position like genesis_comments_form.

You’ll also need to enqueue the script which you can see in the code snippets below.

Here’s all the code:

The first code block contains the Javascript SDK.

The 2nd code block contains 2 snippets. The 1st to enqueue the fb-comments.js script and the 2nd to hook in the Facebook comments form.

Here’s a few links which enable you to install Facebook comments using plugins or code in themes like Genesis which provide boxes for scripts.

Different Ways To Install Facebook Comments

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.