Create a Facebook Messenger clone: Adding live chat to BuddyPress

Twitter, Facebook, LinkedIn, Instagram - some of the biggest websites in the world are social networking sites.
Do you have a great idea for an innovative, or even a niche social network? Or perhaps you want to drive user engagement, by adding a few social features to your existing website? For example, sites such as TripAdvisor, Airbnb and Yelp may not be classic social networks, but they do have many social features, such as profiles and user-generated content.
Regardless of whether you’re creating a fully-fledged social network, or adding a few social features to an existing website, BuddyPress is one of the most popular social plugins on the market.
However, there’s one crucial feature that BuddyPress doesn’t provide: live chat.
In this tutorial, we’ll use BuddyPress to build a complete social network where users can register, create a profile, send and receive friend requests, post status updates, and perform all the classic social tasks.
Once you’ve created your social website, we’ll help it stand out from the crowd by adding live chat, including the ability to make free audio and video calls.

What we’ll be building

In this tutorial, we’ll be creating a complete social networking site that features all of the following pages:

• Login.

• Registration.

• Lost password.

• Activity. This page is split into multiple tabs, so registered users can either view all the activity that’s happening across your site, or view a friends-only version of the Activity feed, by selecting the “My Friends” tab. Our Activity page will also feature a “Mentions” section, where users can see all the posts they’ve been tagged in across your website.

• Members. Here, users can browse a directory of all the people who’ve registered with your site, or they can view their Friends list, by selecting the “My Friends” tab.

• Chat. Later in this tutorial, we’ll be using CometChat Go to add live chat to our “Members” page. Following in the footsteps of popular chat applications such as Facebook Messenger and WhatsApp, this chat window will display the user’s friends, rather than simply listing every single person who’s currently online.

• User profiles. What’s a social network without profiles? We’ll be providing fully-editable user profiles that span multiple tabs, including dedicated “Activity,” “Friends” and “Groups” tabs.

Stylish social networking: Choosing your theme

There are countless WordPress themes available, but in all of my screenshots I’m using the free Memberlite theme. If you also want to use Memberlite, then:

• Head over to the Memberlite website.
• Click “Login” and create your free account.
• Assuming you want to use the free version of Memberlite, opt for “Free” when prompted.
• Follow the onscreen instructions to finish creating your Memberlite account.
• When prompted, download your free version of Memberlite.
• Log into your WordPress account.
• In WordPress’s left-hand menu, navigate to “Appearance > Themes.”
• Select “Add New > Upload Theme.”
• Select the Memberlite file you just downloaded.
• Once your theme has finished uploading, navigate back to “Appearance > Themes.”
• Find your Memberlite theme, hover over it and then click “Activate.”
  

Your website will now be using the Memberlite theme.

How to add BuddyPress to your WordPress site

Next, we need to install the BuddyPress plugin:

• In WordPress’s left-hand menu, select “Plugins > Add New.”
• Search for “BuddyPress.”
• When the plugin appears, select “Install Now > Activate.”
  

You should now see the following message:

“BuddyPress is almost ready. You must update your permalink structure to something other than the default for it to work.”

To update your permalink structure:

• Assuming that the “Buddypress is almost ready…..” message is still onscreen, give the “permalink structure” link a click. Alternatively, select “Settings > Permalinks” from WordPress’s left-hand menu.
• Choose the permalink structure that you want to use; I’m opting for “Postname.”
• When you’re happy with your selection, click “Save Changes.”
  

Make sure people can register with your website!

By default, WordPress doesn’t allow visitors to register with your website. Since we want people to join our social network, we need to enable WordPress’s “Anyone can register” feature:

• In WordPress’s left-hand menu, select “Settings.”
• Find the “Membership: Anyone can register” checkbox, and select it.
• Click “Save Settings.”
  

Visitors will now be able to register with your WordPress website.

Getting started with BuddyPress

BuddyPress has a wide range of social features, so before we start building our website it’s worth taking a look at the plugin’s settings, and then enabling and disabling its features, as required.

To start, select “Settings > BuddyPress” from WordPress’s left-hand menu.

From here, you’ll have access to the following BuddyPress tabs:

Components

The BuddyPress Core and Community Members components are enabled by default, as these components are required for the plugin to function correctly. However, there are some additional components that you may want to enable or disable, depending on how you plan to use BuddyPress:

• Extended profiles. The majority of social networks feature editable user profiles, so you’ll typically want to leave this feature enabled unless you have a specific reason not to.
• Account settings. This feature allows users to access their account and notification settings, directly from their profile.
• Friend connections. Put the “social” into “social network,” by allowing users to send and receive friend requests. We’ll be using CometChat to provide friend-to-friend live chat, so make sure you enable the “Friend connections” feature!
• Private messaging. Out-of-the-box, BuddyPress doesn’t support real-time instant messaging, or audio and video calls (you’ll need CometChat Go for that!) but it does allow users to exchange private messages.
• Activity streams. BuddyPress provides an Activity feed so that users can see exactly what their friends are up to. This Activity feed has full support for commenting, favouriting and @mentions, so users can interact with one another inside the Activity stream.
• Notifications. Keep users up-to-date, via email and toolbar notifications. If you enable notifications, then you should also enable the “Account settings” component, so users have a way to modify their notification settings.
• User groups. Why not encourage your users to spend even more time on your website, by giving them the ability to create and join groups? BuddyPress supports public, private and hidden groups, with separate “Activity” streams and member listings for each group. Enabling the “User groups” and “Friend connections” components can be a great way to create a sense of community that'll keep people coming back to your website.
• Site tracking. This component records activity on your website, including new posts and comments.
  

For my website, I’m enabling the following components:

• Extended profiles.
• Account settings.
• Friend connections.
• Activity streams.
• Notifications.
• User groups.
• Site tracking.
  

Once you’re happy with your selection, click “Save settings.”

2. Options

In this tab, you can enable and disable various member features:

• Main settings. This section contains two settings: “Show the Toolbar for logged out users,” and “ Allow registered members to delete their own accounts.”
• Profile settings. Here, you can enable and disable various profile customisation options, including allowing users to upload their own avatars and cover images.  
• Activity settings. In this section, you can specify whether users can comment on one another’s posts. You can also setup BuddyPress to automatically check for new content while the user is viewing their Activity stream - since new content is a great way to keep users engaged, you’ll typically want the Activity feed to update automatically.
  

3. Pages

This tab is where you’ll associate each page of your website with a specific BuddyPress component.

Note that this page’s contents will vary, depending on which BuddyPress components you’ve enabled.

Exploring BuddyPress’ default webpages

BuddyPress automatically generates all the pages required to deliver its core functionality. You can take a look at these pages, by selecting “Pages > All Pages” from WordPress’s left-hand menu.

The contents of your “All Pages” screen will vary, depending on which BuddyPress components you’ve enabled. However, regardless of how BuddyPress is setup, two essential pages will always be missing: a login page, and a password recovery page.

In the following section, I’ll show you how to quickly and easily create both of these missing pages, using the free Login Widget with Shortcode plugin.

Fill in the gaps, with this free WordPress plugin

Login Widget with Shortcode is a straightforward plugin that generates two pieces of shortcode: one for a login form, and one for a password recovery form. By copy/pasting this shortcode, you can transform any webpage into a login or password recovery screen, which makes this plugin perfect for addressing the gaps in our social networking site.

To install Login Widget with Shortcode:

• In WordPress’s left-hand menu, select “Plugins > Add New.”
• Search for “Login Widget with Shortcode.”
• When the plugin appears, select “Install Now > Activate.”
  

Now, we can use this plugin to create our missing login and password recovery pages.

In WordPress’s left-hand menu, select “Login Widget Settings.” This screen contains two pieces of shortcode:

• For the login form, the shortcode is: [login_widget]
• For the forgotten password form, the shortcode is: [forgot_password]
  

You now just need to create a “Login” and a “Forgotten Password” page, and copy/paste the shortcode into the corresponding page. For example, to create a login webpage:

• Copy the [login_widget] shortcode.
• In WordPress’s left-hand menu, select “Pages > Add New.”
• Give this page a name; I’m using “Login.”
• Paste the shortcode into this page.
• Click “Publish.”
  

Your login page is now live!

Repeat the above steps to create your password reset page.

A better user experience: Setting up redirects

What happens once the user successfully logs into their account? Leaving them stranded on the login screen isn’t exactly a great user experience!

In this section, we’re going to setup some redirects, which will automatically forward the user to an appropriate webpage, in the same way the Facebook Login screen redirects to the “News Feed” following a successful login.

We can establish these redirects in the “Login Widget > Settings” screen. While I’m editing these settings, I’m also going to link the “Login” and “Forgotten Password” pages to some of the BuddyPress content we created earlier.

• In WordPress’s left-hand menu, select “Login Widget Settings.”
• Make sure the “General” tab is selected.

• Open the “Login Redirect Page” dropdown and choose a page from the list; I’m using the “Activity” page, so users can see all the activity that’s happened since they last logged in.
• Open the “Logout Redirect Page” dropdown and choose a page from the list; I’m using “Login” in the hope the user will see the error of their ways, and log back into their account.
• What happens if the visitor doesn’t already have an account? Our “Login” page already features a “Registration link", but at the moment it doesn’t actually link to anything. To fix this broken link, open the “Register Link” dropdown and select the “Register” page that BuddyPress created earlier.
• Our “Login” page also features a placeholder “Lost password?” link, so open the “Forgot Password Link” dropdown and select the “Forgotten Password” page we created earlier.
• While you’re here, you may also want to add a “Remember Me” checkbox to your login form, by selecting the “Add Remember Me” checkbox.
• Once you’re happy with the information you’ve entered, click “Save.”
  

The “Login Widget > Settings” screen has several other tabs that you may want to explore, for example the “Security” tab lets you add a Captcha to your website’s login form. Although we won’t be discussing them in this tutorial, these additional settings are well worth exploring in more detail.

How are visitors going to navigate your site?

At this point, we’ve created all the pages required to deliver a complete social network, but how are you users going to navigate between these pages?

In the following sections, we’ll link all our pages together, to form a complete social network.

Change your WordPress homepage

By default, WordPress displays a list of your most recently-published blog posts on the homepage, but since we’re creating a social network, it makes more sense to display the “Login” page instead.

By using “Login” as our homepage, we can make it easier for registered users to access their account, or reset their password. For visitors who haven’t already registered with your website, this page also features a “Register” link, which will redirect them to your registration form.

To set “Login” as your homepage:

• In WordPress’s left-hand menu, navigate to “Appearance > Customize.”
• Select “Homepage Settings.”

• Select “A static page.”
• Open the “Homepage” dropdown, and choose “Login.”

• Click “Publish.”
  

WordPress will now use “Login,” as your homepage.

Install the free User Menus plugin

To make your website easier to navigate, you need to create a menu.

To improve the user experience, I’ll be displaying different menu items depending on whether the user is logged into their account - after all, a “Logout” link isn’t much use to someone who isn’t even logged in!

There are various plugins that let you create dynamic menus, but I’ll be using the free User Menus plugin:

• In WordPress’s left-hand menu, select “Plugins > Add New.”
• Search for “User Menus.”
• When the plugin appears, select “Install Now > Activate.”
  

Create a dynamic WordPress menu

To create a menu:

• In your WordPress account, navigate to “Appearance > Menus.”
• Select “Create a new menu.”
• Give your menu a name, and then click “Create new menu.”
• Click to expand the “Pages” section, and select the “View all” tab.
• Select all the pages you’ve created, except the “Activate” page. Whenever someone registers with your website, BuddyPress will email them a link to the “Activate” page as part of the registration process, so you don’t need to explicitly link to this page.
• If required, use drag and drop to change the order these pages appear in your menu.
• Click to expand the “Login” section, open the “Who can see this menu link?” dropdown and then select “LoggedOut Users.”

• Expand the “Register” section, open the “Who can see this menu link?” dropdown and select “Logged Out Users.”
• Expand the “Activity” section, open the dropdown and select “Logged In Users.” Find the following section:“ Choose which roles can see this link,” and then select all of its checkboxes.

• Expand the “Members” section, open the dropdown and select “Everyone.”
• Expand the “Forgotten password” section and set its dropdown to “Logged Out Users.”
• If you created any additional pages, such as Groups, then you should also specify when these items appear in your menu.
• When you’re happy with how your menu is setup, click “Save Menu.”
  

You can now place this menu on your website:

• Select the “Manage Locations” tab.
• Assuming you want to display this menu across your entire website, open the “Primary” dropdown and select the menu you just created.
• Click “Save changes.”
  

Now, navigate to your website - you should see a new menu!

Create a user account: Putting your menu to the test

The contents of your menu will vary, depending on whether you’re logged into an account. If you want to put your dynamic menu to the test, then you’ll need to register with your website.

To create a user account, simply open your website in an incognito tab or browser where you aren’t logged into WordPress, click “Register” and then follow the onscreen instructions to complete the registration process.

You should receive an email with instructions on how to activate your account, or you can activate your account by logging into WordPress and then navigating to “Users > Manage signups.” Here, you’ll find the user account you just created; hover over it and click the “Activate” link that appears.  

Now, you can experiment by logging in and out of your account, and seeing how this impacts your menu.

Create a Facebook Messenger clone

Now we’ve created our social network, we’re ready to implement live chat!

Once you’ve installed the CometChat Go plugin, your users will be able to exchange messages in real-time, and initiate audio and video calls with their friends, in the style of Facebook Messenger, WhatsApp, and other popular messaging applications.

If you haven’t already purchased CometChat Go, then you can grab your license now, or we’re offering a free 7 day trialso you can try before you buy.

Once you’ve downloaded CometChat Go, you’re ready to upload it to your WordPress account:

• If you don’t have access to a copy of the CometChat Go plugin, then you can download CometChat Go now (notethat this is a direct download link.)
• In your web browser, sign into the CometChat Client Area.
• Select “Manage.”
• In the upper-right corner, select “API keys.” This screen contains your Auth Key, API Key and License Key. Leave this tab open, as you’ll be needing this information shortly.
• In a new tab, log into your WordPress account and navigate to “Plugins > Add new.”
• Select “Upload Plugin.”
• Click “Add New > Choose file.”
• Select the cometchat.zip file you downloaded earlier, and then click “Open > Install Now.” CometChat Go will now be added to your WordPress account.
• When prompted, click “Activate plugin.”
• In WordPress’s left-hand menu, select the new “CometChat” item.
• Enter your CometChat Go license key and then click “Install.”
• Enter your Auth Key and API Key, and click “Update.”
  

CometChat Go is now ready to use!

Adding live chat to your WordPress website

You can now embed a CometChat Go window in any part of your website, but I want to display it alongside my“Members” page, so users can access the chat window while viewing their Friends list.

You can position the CometChat Go window anywhere onscreen, but I’m going to display it in the sidebar, using the Custom Sidebars plugin.

In the following sections, I’ll show you how to add CometChat Go to the sidebar, and display a list of the user’s friends inside the CometChat window.

Note that the end-results may differ slightly from the screenshot above, based on how your website is setup, and the theme you’re currently using (I’ve opted for Memberlite).

How to create custom sidebars

To add CometChat Go to the sidebar, you need to install the Custom Sidebars plugin:

• In WordPress’s left-hand menu, select “Plugins > Add New.”
• Search for “Custom Sidebars.”
• When the plugin appears, select “Install Now > Activate.”
  

Custom HTML: Creating a CometChat Go widget

Now, we need to create a custom sidebar :

• In WordPress’s left-hand menu, select “Appearance > Widgets.”
• Click “Create a new Sidebar.”
• Give this sidebar a title; I’m using “CometChat”
• Click “Create sidebar.”
• Give this sidebar a subtitle, which will be visible to your users; I’m opting for “Let’s chat!”
• Towards the left side of the screen, find “Custom HTML” and then drag it onto the “CometChat” sidebar you just created, as shown in the following screenshot.

• Click to expand the “Custom HTML” section.

• Now, copy/paste the following code into the “Content” section.
  

{% c-block language="javascript" %}
< script >
   var chat_appid = 'xxxx';
var chat_auth = 'xxxx';
var chat_height = '600px';
var chat_width = '550px';
document.write('<div id="cometchat_embed_synergy_container" style="width:' + chat_width + ';height:' + chat_height + ';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;"></div>');
var chat_js = document.createElement('script');
chat_js.type = 'text/javascript';
chat_js.src = 'https://fast.cometondemand.net/' + chat_appid + 'x_xchatx_xcorex_xembedcode.js';
chat_js.onload = function() {
   var chat_iframe = {};
   chat_iframe.module = "synergy";
   chat_iframe.style = "min-height:" + chat_height + ";min-width:" + chat_width + ";";
   chat_iframe.width = chat_width.replace('px', '');
   chat_iframe.height = chat_height.replace('px', '');
   chat_iframe.src = 'https://' + chat_appid + '.cometondemand.net/cometchat_embedded.php';
   if (typeof(addEmbedIframe) == "function") {
       addEmbedIframe(chat_iframe);
   }
}
var chat_script = document.getElementsByTagName('script')[0];
chat_script.parentNode.insertBefore(chat_js, chat_script);
< /script>
{% c-block-end %}

This code will create a CometChat Go window, but this window will be blank by default. To populate your window, you’ll need to tweak the above code, by replacing the following placeholders with your unique App ID and Auth key:

var chat_appid = 'xxxx';

 var chat_auth = 'xxxx';

Make sure you leave the WordPress “Appearance > Widgets” screen open, and then in a new tab:

• Sign into the CometChat Client Area.
• Select “Manage.”
• In the menu bar, select “API keys.”
• Copy the “App ID” value, then switch back to your WordPress tab and paste this information into the “varchat_appid” line, for example var chat_appid = '1234.'
• Copy the “Auth key” value and paste it into the “var chat_auth” line.
• Select “Save.”

Displaying your custom sidebar and widget

We’re now ready to position our custom CometChat Go window on our website:

• In WordPress’s left-hand menu, navigate to “Pages > All Pages.”
• Open the “Members” page for editing, as normal.
• Click to expand the “Sidebars” section.
• Open the “Pages” dropdown and select the sidebar that you just created.

• Click “Update.”
  

Now, open your Members page - the CometChat Go window should be waiting for you!

Refine your WordPress layout

Depending on how your website is setup, you may need to increase the space that’s available to the CometChat Go window.

If you’re using the Memberlite theme, then you can quickly and easily change the amount of space that’s allocated to CometChat:

• In WordPress’s left-hand menu, select “Appearance > Customize.”
• Navigate to the “Members” page.
• Select “Memberlite Options.”

• Open the “Columns Ratio - Primary” dropdown. To give CometChat as much space as possible, select “6x6.” If your CometChat content still isn’t displaying comfortably within the CometChat window, then don’t panic! You can resize the CometChat UI to fit the available space - we’ll be covering this shortly.
• To save your changes, click “Publish.”
  

In addition to giving CometChat more space, you can adjust its user interface, which can be useful if the CometChat content appears “clipped.”

To specify exactly how many pixels the CometChat UI should take up vertical and horizontally:

• In WordPress’s left-hand menu, navigate to “Appearance > Widgets.”
• Find the “Custom HTML” section we created earlier, and click to expand. You should now see some familiar HTML.

The following two lines control the height and width of your CometChat UI:

var chat_height = '600px';

var chat_width = '550px';

You can shrink the CometChat user interface to fit the available space, by reducing these values and then clicking the“Save” button. Note that you may need to experiment with various different values, to find the sizing that works for your particular website.

Create a friend-to-friend messaging service

Currently, anyone who visits your website will be able to access CometChat, and message any other user.

While this kind of openness may be perfect for public chat rooms, this isn’t the experience people expect from social media.

In this final section, we’ll ensure users can only exchange messages with people on their Friends list:

• In WordPress’s left-hand menu, select “CometChat.”
• Select the “BuddyPress Settings” tab.

• Select the following checkbox: “Show only Friends in Contacts list?’
• Click “Save Settings.”
  

Conclusion

And that’s it! In this tutorial, we created a complete social networking website, complete with login, registration, a members directory, and more. Finally, we added a Facebook Messenger-style chat application that allows users to exchange messages, and initiate audio and video calls with the people on their Friends list.

Have you used this tutorial to create your own social network? If so, we’d love to see your creations - be sure to share them in the comments below, or connect with us on Facebook or Twitter.