How to Create a WordPress Comment Login System that Utilizes Facebook & Twitter

Since it was created just under a decade ago, WordPress has allowed a website's visitors to sign up and create an account when they post comments. In fact, this option is favored by many websites as a way to reduce spam and encourage honest interaction between users. In some cases, it's a required part of the commenting process.

How to Create a WordPress Member Login System that Utilizes Facebook & Twitter

In the era of social media websites, however, this can be deemed clunky and frustrating, especially since most readers already have accounts at sites like Twitter, Facebook, and Google+.

Those accounts additionally allow their users to log in to other sites with their credentials, enabling the kind of single sign-in that promotes convenience and encourages interaction among readers.

Create a WordPress Comment System that Utilizes Facebook & Twitter

WordPress, unfortunately, doesn't natively include any functionality that interacts with the Google credentials, the Twitter API, or the Facebook Open Graph API system for authentication. These must be secured by installing one or more plug-ins that will add this functionality to the WordPress backend.

Login

There are three outstanding plug-ins for accomplishing this, all produced by the same developer. Each plug-in serves a difference social media website: Facebook, Twitter, or Google+.

Simple Facebook Connect

The first plug-in that allows for social media integration with WordPress' comments is Simple Facebook Connect. Given Facebook's soaring popularity around the world, this is also the most popular plug-in for enabling two-way communication between the WordPress database and Facebook's millions of user accounts.

Beyond merely allowing users to log in with their Facebook credentials while they make a comment, the plug-in enables a number of other great Open Graph features after it has been installed and activated. User avatars are pulled from Facebook, instead of the Gravatar service, and users can use their Facebook credentials to register a new account at the website if they wish to maintain a separation between their Facebook activities and their blog comments.

Simple Facebook Connect

A "like" button is included for use with entries, and comments made on Facebook can automatically be sent back to the website's own comment section for posts. User boxes, a status update widget, and many other features are included, as well.

Simple Twitter Connect

The second-most popular social network has its own "Simple" plug-in for WordPress, allowing users to sign in with their Twitter credentials and comment on posts using their Twitter name, their "@" handle, and their Twitter avatar. A simple "Login with Twitter" button is placed above the comment field, and clicking it will take users through the authentication process on Twitter.com itself.

Simple Twitter Connect

This plug-in, just like the Facebook variant, comes with its own additional features that permit a deeper integration with Twitter. First and foremost, it allows commenters to automatically tweet their comments to their profile on the social networking site.

It also interfaces with a number of WordPress URL shortening plug-ins to provide a link to that comment and entry without taking up a significant number of characters. And, perhaps best of all, commenters can use "@" names to respond to each other and the plug-in will recognize, parse, and link to those profiles and user names.

Simple Google Connect

Finally, the developer behind the "Simple" Facebook and Twitter integration buttons recently released a version for Google accounts and the popular Google+ social network.

Simple Google Connect

It allows users to sign in with their Google account, Google+ user name, or GMail account information, and it allows their Google avatar to take the place of the standard WordPress Gravatar. Additionally, the plug-in comes with support for Google's popular "+1" button, which is essentially a version of Facebook's "Like" buttons. This will help promote stories across the social network, making it a great addition.

Choose Any, or All Three Plug-ins for Use

While each social network has its own plug-in developed by this same outfit, the plug-ins are not mutually exclusive. They can all be installed side-by-side, allowing log in to occur through all three social networks.

Users will simply choose the one they prefer, or the one they use most often, when making a comment. Of course, if a website's administrator prefers not to interact with a particular social network, they can leave that network's plug-in out of their Dashboard.

It's worth noting that users who comment with either of the three above plug-ins will automatically have their name linked back to their profile on the social network of their choice.

That creates a whole new paradigm for interacting with readers, and it's far superior to the built-in WordPress profile system. That said, here's how to turn these plug-ins into an installed, fully-integrated social media hub.

Step 1: Download and Install the Right Plug-ins for the Job

The first step is to simply identify which of the three social networks should be available for log in purposes by the site's readers. Then, each plug-in will need to be installed separately. That can be done by visiting WordPress.org/Extend and browsing the plug-in list, or it can be done from within the WordPress Dashboard itself.

When using the WordPress Dashboard for plug-in installation, simply navigate to "Add Plugin." Search for the "Simple" plug-in that needs to be installed, and click the gray "Install" button next to it.

After a brief process, the plug-in will ask whether or not it should be activated. Administrators should activate the plug-in as soon as it's installed. Repeat this process for as many different plug-ins as is necessary, and then proceed to the next step in this process.

Step 2: Configure Any Additional Settings

While the Twitter plug-in will generally be ready for immediate deployment and use after activation, the Facebook and Google plug-ins will require a few extra steps before they can be used on the website.

Each of these two plug-ins will guide WordPress administrators through the steps needed, with in-depth descriptions and even screenshots of what needs to happen.

These extra steps are generally ones that involve creating a Facebook or Google Developer account and linking the plug-in to a pseudo "app" on each site.

The process is simple, and it ensures far greater security than many other websites allow for. Each plug-in should require about five minutes of additional configuration after activation.

When these plug-ins are finished being configured both within the WordPress Dashboard and on the Facebook or Google websites, it's time to move on.

Step 3: Editing the Comments.PHP Template to Ensure Proper Usability

There are a few changes that need to be made to WordPress' "comments.php" file in order for the social network log in buttons to appear above the comment form itself. First and foremost, it's important to verify that the comment form retains its default form ID values.

Those should be "email," "author," and "url." If these have been changed, revert them to the default so that the plug-in will function properly.

Next, a few new lines of code should be added to the comments template within the comment form code. This code is pretty essential, as it tells the log in buttons where they should appear on the page.

Those website administrators who fail to do this process will probably notice that it's impossible to log into any of the three websites, and they might assume that the plug-ins simply aren't working.

Immediately before the first XHTML form element, the following code should be added to the file:

<div id="comment-user-details">
<?php do_action('alt_comment_login'); ?>

While the div tag above tells the buttons where to appear, the php tag is responsible for calling each of the three log in buttons from their respective plug-in files and making them available for use. With this code added to the file, the process is almost complete. However, the div tag created in this process must be closed so that the page continues to display properly.

After the last XHTML form element, simply close the new div.

With that, the social media login area is now complete. The buttons will display correctly, and will guide readers toward the external authentication page operated by their chosen social network. And the comments page will continue to display its content properly, as the new div element has been successfully closed at the end of the comment form.

Step 4: Give it a Try!

With the plug-ins installed and activated, and with the comments template successfully modified, it's time to head to a comment page and try out the new social media log in options. This essential bug testing phase will ensure that authentication is proceeding properly, and that user information is pulled into the website properly with each comment.

Be sure to test each installed log in option and, when they've passed the test, be sure to tell users of the new choices that await them when they compose a new comment!

Other Resources