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.
In this tutorial, we’ll be creating a complete social networking site that features all of the following pages:
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:
Your website will now be using the Memberlite theme.
Next, we need to install the BuddyPress plugin:
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:
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:
Visitors will now be able to register with your WordPress website.
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:
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:
For my website, I’m enabling the following components:
Once you’re happy with your selection, click “Save settings.”
In this tab, you can enable and disable various member features:
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.
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.
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:
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:
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:
Your login page is now live!
Repeat the above steps to create your password reset page.
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.
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.
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.
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:
WordPress will now use “Login,” as your homepage.
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:
To create a menu:
You can now place this menu on your website:
Now, navigate to your website - you should see a new menu!
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.
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:
CometChat Go is now ready to use!
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).
To add CometChat Go to the sidebar, you need to install the Custom Sidebars plugin:
Now, we need to create a custom sidebar :
{% 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:
We’re now ready to position our custom CometChat Go window on our website:
Now, open your Members page - the CometChat Go window should be waiting for you!
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 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:
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.
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:
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.
