Add Facebook comments to iThemes Builder site

9
Mar

I thought I would put together the steps I used to add Facebook comments to a Builder website. I completely understand there may be WordPress plugins that may work for some implementations, but for the installation I was working on the following requirements existed.

  • We did not want the visitor to have a user experience that forced them into “sharing” their information with a Facebook application (when they first post a comment, a pop up window confirms they want to share their contacts, email address or more with a Facebook application).
  • We did not want to use the WordPress comments system, or use it in conjunction with Facebook comments.
  • We were not concerned about the look and feel, we wanted to cater to the Facebook audience so the Facebook look for comments was good.
  • We did not want comments for pages, only posts, and for this implementation, we were using a custom post type with a custom LoopBuddy Layout.

If you can suggest a way to improve this or add options, I’m all ears.

The above requirements may not meet your needs, but if so, this is how I did it.

You’ll need to have a Facebook account and create a Facebook application, call it [Your Site] Comments or something, and make note of the App ID/API Key that is created. You’ll need to add the following to your header.php file, just after the start of your tag. If your child theme does not have a header.php file, just copy the file from the Builder theme into the child folder. You may find the header.php file does not even have an element listed. Here is the code I added to the header.php file that I have in my child theme.

Obviously, make a back-up copy of your header.php file if you need to revert.

This is what the complete header.php looked like for me after I added the above code.

In the code above, ensure you replace YOURFACEBOOKAPPID with the collection of numbers you got from Facebook when you created your app. Next, since I was not going to be using the WordPress comments at all, I changed the comments.php file. Again, make a back-up copy of the comments.php file in your child theme before changing. This is the pertenent code that was added, but the full code is below.

The full comments.php code looked like this.

Of course, you need to ensure you have comments enabled in WordPress under Settings > Discussion, and the posts themselves should have comments activated in the meta area of the post. The above code with changes to comments.php should take care of your normal posts, but what if you are using a custom post type with a LoopBuddy layout? You’ll need to go into your custom layout (LoopBuddy > Layout Editor) and add some code to the Post Loop Text / HTML box.

Unfortunately, you will not be able to add this code directly since you need some PHP code to pick up the absolute URL (permalink) of the post where the comments will be placed. The solution I found is to create a shortcode that calls a function that you have placed in your functions.php file. (You can use shortcodes in the LoopBuddy Layout areas.) In my case, I added the following to functions.php of the child theme. (I’m showing the full functions.php code for easy reference, since it was mostly blank in the child theme to start with.) The only thing that was in the functions.php code when I started was the opening and closing PHP tags.

The code above creates a shortcode called fbcomments and calls the function addFacebook Comments, grabs the permalink of the post, displays 12 comments per “page” and sets the width of the Facebook comments box to 600 pixel. Then, I went into the custom LoopBuddy Layout I have for this custom post type, and added the shortcode for this function into the Post Loop Text / HTML box.

The results can be shown here (a regular post) and here (a post using a custom post type and a custom LoopBuddy Layout). As a moderator for the Facebook application you’ll see some moderator features right in the comments box when you are logged into Facebook. Looks like this…

fb-mod-view

Again, you’ll note that if you are logged into Facebook, you’ll be able to quickly leave a comment, uncheck the box to “Post to Profile” if you want, and you don’t have an annoying popup that confirms you want to send/share information with the Facebook application. It’s just very clean for Facebook users.