How To Integrate Facebook Login And Facebook Comments With WordPress

Welcome to the first of two posts I’ll be writing on social integration with WordPress. This first post will focus on WordPress and Facebook integration while next week’s post will focus on WordPress and Twitter integration.

There is a lot to be gained by creating a closer relationship between your WordPress install and Facebook. Most obviously, when you make it easier for someone to connect with your site through a platform they’re already using, you’re encouraging more community engagement–whether that happens in the form of new user sign-ups, comments, or shares. But with the various tools and plugins we’re going to cover in today’s post, you’ll see that there’s a lot more to be gained than simply removing a bit of user friction. When done correctly, this type of integration can boost engagement, result in more followers/subscribers, send your content viral, and make joining your site as simple as a single click.

As you can imagine (and as you’ll see in the final section of this post) there is a lot that can be done with the marriage of Facebook and WordPress. When it comes to detail though, I’ll be using today’s post to focus on how to do two things: 1) how to manually add Facebook comments to your WordPress site; and 2) how to allow site visitors to register and/or sign-in with Facebook.

My reason for narrowing the focus to these two features is pretty straight forward. Aside from adding simple share/follow buttons to various parts of your website, these are without a doubt the two most desired Facebook/WordPress integration features most users are after. Plus, anything more complicated than syncing the commenting systems will be done with a plugin anyway–where most if not all of the heavy lifting is done for you and the rest is explained in the plugin’s documentation/help text.

Manually Integrating Facebook Comments in WordPress

Ever since Facebook made Facebook comments possible they’ve been a much sought after feature for WordPress blogs and websites. Getting users to register for your site or another service like Disqus just to leave a comment was always kind of a hassle. We all knew that this bit of user friction was a hindrance to community engagement. So when Facebook came along in 2011 and said, “Hey, you know how we have something like 500,000,000 (1.23 billion in 2014) people in our network? Well now you can set it up so that anyone of them who visits your site can comment without having to sign-in to anything else.” That (in and of itself) was a big deal! But it got better.

You could then, and still can, sync it up so that any comment someone leaves on your website appears on Facebook too and vise-a-versa. Now, because of how the Facebook feed works, one user’s simple act of leaving a comment could put your content in front of hundreds or even thousands of new people–making it much more likely that your content will gain viral traction. In a nut-shell, that’s the big deal about Facebook comments and why you might want to consider getting them for your website.

As you will see below, there are plugins out there that will do exactly what I’m about to show you in fewer steps. But the benefit to manually adding Facebook comments to your WordPress site is that you only get the feature you want (with no extra bloat) and the hardest part–creating the Facebook app–is something that all of the plugins require you to do anyway. And as you’ll see, it’s not even that hard. You just need to follow these three steps.

Step 1: Create a Facebook App

The first thing you’re going to want to do is go to developers.facebook.com. Once there, be sure to register as a developer. Then select Apps > Create New App (or Add a New App if you are a return visitor) from the top navigation menu. When an options panel appears, choose website.

Next you will be prompted to enter in the name of your app. In the image below I’ve simply entered “Test App” but you may want to do something along the lines of “[yourwebsitename] comments”.

Facebook will then provide you with some code to insert after your website’s opening <body> tag. If your goal is simply to use Facebook comments on your blog (with no other features) then you do not need to do anything with this code. Simply fill in the following form with your web address and click next.

You will then be given the opportunity to test a like button with some code. Again, not necessary. Simply scroll down to the “Next Steps” section and select the “social plugins” option.

That will bring you to a page with the options you see below. Choose “comments”.

For those of you that may want to jump straight to this url, it’s developers.facebook.com/docs/plugins/comments. This is where you are quickly able to enter the url of the website you’d like to use Facebook comments on, set the width (in pixels), set the the number of comments to show by default, and the color scheme. Once this information is set, click Get Code.

Step 2: Insert Facebook Comments Code into WordPress

As you can see in the screenshot below, there are two snippets of code that you will need to add to your WordPress website. The top box contains code that should ideally be placed after the opening <body> tag. If you’re using an Elegant Themes theme, like Divi for example, this step is made extremely easy. All you have to do is navigate to Appearance > Divi Theme Options > Integration and paste the code in the <body> code section. Be sure to click save.

The second snippet of code should be placed wherever you want the Facebook comment box to actually appear. Again, for Elegant Theme users this pretty simple. Using the Divi Theme Options again (same section, Integration) paste the second code snippet in the section that says “Add code to the bottom of your posts, before the comments”. Click save.

Note: it’s possible that when you see this window there will be a yellow callout notifying you that the app you’ve created and are attempting to use is not yet public. To fix this all you have to do is follow the hyperlinked text in the callout and make sure that your app is set to public. Usually this callout appears because you do not have a contact email entered for the app.

When you preview what the new code looks like on the front end, you will see that you now have two commenting sections. This is actually quite popular on some magazine style websites that publish a lot of content. The idea being that most of their readers are going to have Facebook accounts and the discussion will be organic for them. However, for those few who do not have Facebook accounts or simply don’t want to use their’s to comment, they maintain the standard commenting system in tandem with Facebook’s.

But let’s say you don’t want two commenting systems, you simply want to swap out Facebook’s for the existing one. Well, for Elegant Theme users you can simply go to Theme Options > Layout Settings > Disable Comments on Posts, click save and it’s done. They are swapped. For everyone else, simply delete the original commenting code wherever you pasted the second Facebook snippet from above.

Step 3: Configure Facebook Comments Settings

Now that you’ve got your new Facebook comments system in place, there’s two more things you’ll want to do: configure the settings and moderate new comments. To do either of these two things, go to developers.facebook.com/tools/comments.

Facebook Login & Registration Plugins for WordPress

There are a number of reasons besides commenting that you may want your readers to register and/or login to your WordPress website. Perhaps you have an e-commerce shop, publish e-courses, host a forum, or any number of user oriented things. In any of these cases, and many more, implementing one of the following free plugins can make the sign-in and registration process even easier than it already is. As simple as a single click.

Social Login

With Social Login you’re able to select from a large list of social networks–including Facebook, of course–to add to your normal WordPress sign-in and registration screen. Once linked it will only take a single click to sign back in.

Key Features:

• Social login for comments
• Social login at registration and sign-in
• Social login in your sidebar
• Social login with a shortcode

Download | More Information

Nextend Facebook Connect

There’s not a lot of features to Nextend’s Facebook Connect plugin, but then again there doesn’t really need to be. It has one simple purpose and by all accounts it does it quite well. With this free plugin you can make sign-in and registration on your WordPress website a one-click affair by allowing users to connect through their choice of the big three social networks: Facebook, Twitter, and Google+.

Key Features:

• Allows new users to quickly and easily register or sign back in with either Facebook, Twitter, or Google+.
• Allows existing users to link any of those social accounts to their WordPress profile to make signing back in a breeze.

Download | More Information

Complete Facebook Integration Plugins for WordPress

Ok so now that we’ve covered our two main bases: Facebook comments and Facebook registration/sign-in, it’s time to explore other more in-depth features offered by some of the most robust Facebook/WordPress plugins available. While there are many out there (just do a quick Google search or Plugin Directory search if you don’t believe me) I’ve selected what I believe are two of the best; one free, one premium.

Super Socializer

Super Socializer is a great plugin for social integration. While it’s closest integration is with Facebook, it definitely provides a lot of fringe benefits (mostly sharing options) with about 90 other social sites/platforms. Not too shabby, free plugin or no!

Key Features:

• Single-click social registration and login
• Post and page sharing options
• Side bar sharing options
• Social counters
• Facebook Commenting
• Facebook timeline posting (for users)

Download | More Information

Ultimate Facebook by WPMUDEV

Without a doubt, the real heavy hitter in this post is WPMU Dev’s Ultimate Facebook. Is it free? No. But if you’re the type who doesn’t want to mess around with code and just wants to configure the settings you want, then this plugin is definitely the right one for you. It literally does everything I can think of that is possible between Facebook and WordPress. (Perhaps with the exception of building custom Facebook pages, but that’s not exactly an integration issue/feature.) And because this plugin is premium with a large user base, you don’t have to worry that the author will suddenly quit developing it. As long as you’re paying you can expect an up to date plugin that does a great job.

Key Features:

• Facebook Login
• User Profiles – Uses Facebook data to automatically fill in profile fields
• Autopost to Facebook from WordPress
• Import Previous Posts and Publish Old Post
• Facebook Comments
• Like and Send Buttons
• OpenGraph control
• Fan Page Widgets
• Shortcodes
• Works with BuddyPress
• Works with Multisite
• and much more!

Price: $20 annually | More Information

In Conclusion

From my personal experience and experimentation I’ve found that if you want to keep things simple and just integrate Facebook comments, it’s best to do that part manually and leave off the bloat of extra features and backend menus. However, if you want to do more than that, whether that be adding social login or any of the other features we’ve seen today, then I highly recommend picking up any of the plugins featured in this post today. I’ve used them all to varying degrees, but my personal favorite and highest recommendation has to go out to Ultimate Facebook. It really takes the labor and guesswork out of an integration like this and comes with so many useful features you’ll feel like you’ve got this whole social publishing thing down in minutes.

What about you? Have you integrated your WordPress website with Facebook? What tools, methods, or plugins did you use? What lessons did you learn? What would you recommend to our community? Let us know in the comments below!

Feature Image Credit: Shutterstock.com / gladcov