Social features aren’t solely for dedicated social networks such as Facebook, Twitter, and LinkedIn.

Many popular websites benefit from a few well-placed social features, for example Tripadvisor, Yelp, and Airbnb all give visitors the option to create a profile and connect with other users. Even Envato has social features—if you sign up for an Envato account, you’ll be able to follow other users, and post comments on articles, tutorials or courses. 

• 

  15 Best Membership Plugins for Your WordPress Site

  Find the right membership plugin for adding members to your WordPress site. In this post, I'll share 15 of the best plugins I've found.
  
  


• 

  Best WordPress Membership Plugins of 2019

  Adding a membership system is a great way to bring in revenue for your business. But turning your WordPress site into a membership site can be quite complex....
  
  


• 

  7 Best WordPress Community Plugins for 2019

  Whether you’re an online freelancer or a brick and mortar business, having a website is no longer enough to get and retain customers. You need to create a...
  
  


• 

  Protect Paid Content on Your WordPress Site Using a Free Membership Plugin

  In this post, we’re going to explore the Simple Membership plugin, which allows you to set up different kinds of memberships for your WordPress site. With...
  
  

In the first post of this two-part series, we setup UserPro, a popular WordPress plugin that makes it easy to add a range of social features to your website. We implemented everything you need to grow a thriving online community, and also addressed a few troubleshooting issues that you may encounter along the way.

• 
  WordPress
  
  
  Create an Online Community for Your WordPress Site With UserPro
  
  
  Jessica Thornsby

In this follow-up, we’ll be enhancing our online community with Google Maps, Facebook and Twitter integration. By the end of this article, everyone who visits your website will be able to quickly and easily create an account using their existing Twitter or Facebook credentials, and will also have the option to display their location as part of their user profile.

Displaying the User’s Location With Google Maps

Sometimes, it may be helpful to display the user’s location as part of their profile, for example if you’re developing a website that helps people connect with others in the local area. If you’re building an employee directory for a business that spans multiple offices, then it may also be useful to display where each employee is based. In these scenarios, UserPro can integrate with Google Maps, to include the user’s location in their profile. 

Adding Google Maps content is a multi-step process that requires you to: 

• Enable UserPro’s Google Maps feature.


• Head over to the Google APIs Console and generate an API key.


• Add this API key to your WordPress account.


• Update your Edit Profile page to include some additional fields where the user can enter their address.

Before adding Google Maps content to your website, consider whether you need to take additional steps to help preserve your community’s privacy. For example, you might decide to make your user profiles private so that location information isn’t visible to every single person who visits your website, or you might restrict how specific users can be when sharing their location.

Activate Google Maps Support 

To enable Google Maps integration, start by selecting UserPro > Google Map from the WordPress admin menu. Open the Enable Google Map dropdown, and select Yes.

Now select the Generate your API Key link. The Google APIs Console will now open in a new tab. Make sure Create a project is selected in the dropdown, and then choose Continue.

Open the subsequent dropdown and select Maps JavaScript API. Select What credentials do I need? When prompted, give your API key a descriptive name.

To help prevent unauthorized access, it’s recommended that you restrict the websites that can use this key, by selecting HTTP referrers and then entering your domain name in the accompanying text field.

When you’re happy with the information you’ve entered, click Create. After a few moments, the Console should display your key in a popup—copy this information. 

Finally, switch back to your WordPress account, and paste your API key into the Google Map API Key field.Click Save changes.

Adding Address Fields 

At this point, our website is capable of displaying an address on Google Maps, but there’s a catch: the user doesn’t have any way to enter their address!

By default, UserPro’s Edit profile page only contains a Country/Region field, which isn’t enough information for Google Maps. We need to update our Edit profile page to include some additional fields, where the user can enter their address. 

Start by selecting UserPro from WordPress’ left-hand menu. Select the Fields tab. This takes you to a new screen where all the available fields are listed on the right-hand side, and all the different categories are listed on the left. Each category represents a different UserPro page, such as the Registration page and the Edit Profile page. 

To add more fields to the Edit profile page, find the Edit Profile Fields category, and click its accompanying + icon to expand. You should now see all the fields that make up your Edit profile page. 

In the right-hand list, find the fields that you want to add (I’m using Address Line 1, Address Line 2 and Address Line 3) and then drag and drop them into the Edit Profile Fields list. Note that where you drop each field dictates where it’ll appear in your Edit profile page. 

When you’re happy with your changes, click Save. 

While you’re here, you may want to make some changes to the following sections of your website: 

• 
  registration fields: these are the fields the user will see at the time of registration


• 
  login fields: these are the fields the user will see at login


• 
  social fields: these are the social fields that appear as part of the Edit profile page

Most of these fields are fairly self-explanatory, so spend some time going through them and making any necessary additions or removals.  

Is the Page Refusing to Save? 

There’s a chance that when you hit the Save button, WordPress will display a circle that spins and spins—but never actually saves your changes.

If you encounter this perpetually-spinning-circle, then you’ll need to enable the mbstring (multi-byte string) extension. You can edit this in your server's php config file. 

Open your server’s php config file. The location of this file may vary, depending on your operating system. Then, find the following line ;extension=php_mbstring.dll (or something similar, depending on your OS) and remove the ; symbol. You should now be able to save your changes without any issues. 

Simplify the Signup Process 

No matter how simple you make your website’s registration form, a percentage of people are always going to back out, as soon as they see any kind of form.

You can remove some friction from the registration experience, and hopefully encourage more users to create an account with your website, by replacing the traditional registration form with social logins. 

In this final section, I’ll show you how to give your users the option to create an account using Twitter or Facebook. 

Facebook Connect: Login With Facebook

It’s not unusual for Facebook users to save their Facebook username and password in their web browser, or even to permanently remain logged into their Facebook account. With easy access to these credentials, your visitors could potentially create an account with a few mouse clicks, which is always going to be more appealing than filling out a form.

For people who visit your website on a mobile device, registering and then logging into their account via Facebook may feel like the only viable option, as no-one enjoys completing a form or typing out a long, potentially complex password on the smaller keyboard available to your typical smartphone or tablet. 

Facebook Connect, also known as Login with Facebook, is an application that enables users to create accounts with other websites. Once someone has registered with your website using Facebook Connect, they can log into that account using their Facebook credentials, potentially paving the way for one-click sign-in. 

If someone chooses to register with your website using Facebook Connect, then your website can automatically retrieve all the information it needs to create their account. You could even use this connection to glean additional information and content that can improve the user experience, for example creating an avatar based on their Facebook profile picture.

If you want to use Facebook Connect, then you must provide a Terms of Service (TOS) and a Privacy Policy that specifies the data you’re collecting, and how you plan to use that data.

You can check out Envato’s Privacy Policy for some inspiration, or you can plenty of TOS and Privacy Policy templates, freely available online. Both of these documents must be live before you can use Facebook Connect, as Facebook will request these URLs as part of the setup process. 

To start using Facebook Connect head over to the Facebook for Developers website. If prompted, log into your Facebook account. Once there, select Add a New App. 

Give this app a descriptive name, and then click Create App ID. Select Integrate Facebook Login and then click Confirm. 

Now, in the left-hand menu, select Facebook Login > Quickstart then select Web. When prompted, enter your website’s URL and then click Save. 

In the left-hand menu, select Settings > Basic and complete the App Domains field. Enter the URLs for your Privacy Policy and TOS. Also open the Category dropdown, and select the category that your website falls into. 

Now click Save changes. Then, in the toolbar, find the Status: In Development slider and push it into the On position. 

Read the warning, and if you’re happy to proceed then click Confirm. Navigate to the Settings > Basic screen, and copy the App ID. 

Next, flick back to WordPress, and select UserPro from the left-hand menu. Select the Settings tab then click to expand the Facebook integration section. Change Allow Facebook Social Connect to Yes. Paste your ID into the Facebook App ID field. Finally, click Save Changes.

Now, new users will have the option to create an account with your website, using their Facebook credentials, and will then be able to log into that account using their Facebook username and password. 

Twitter Connect 

Similar to Login with Facebook, Twitter Connect allows anyone who visits your website to create an account, and then log into that account using their existing Twitter credentials. 

For visitors who may not have a Facebook account, Twitter Connect provides an alternative way to register with your website, without having to complete a potentially-lengthy registration form—something that mobile users will particularly appreciate!

Although Twitter accounts may not typically contain as much personal information as their Facebook counterparts, if a user chooses to authenticate with Twitter then you’ll still have access to some useful information and content, including an avatar that you can potentially use as that person's profile picture. 

In order to setup Twitter Connect, you’ll need a Twitter developer account. If you haven’t already signed up for a developer account, then start by heading over to the Twitter Developer application page. 

Select the use case that best describes how you plan to use Twitter, for example Building B2B products, Exploring the API or Student and click Next. Review the information, and make any necessary changes before clicking Next. Again, review the information you’ve provided, and click Looks good if it’s correct. Finally, read the terms and conditions, and if you’re happy to proceed then click Submit. 

Twitter will now send a confirmation email to the address associated with your Twitter account; once you receive this email, click its Confirm button. 

Now you have a developer account, you’ll need to create a Twitter application and generate some API keys, which we’ll add to our WordPress account.

Start at the Twitter Developer website. Log into your Twitter account if prompted and click Create an app. Give your application a name, which will be displayed in your user-facing authorization screens. Also enter a description for your app, which will also be user-visible. You'll also need to enter your website’s URL, which will be used as the source attribution for all the Tweets generated by your website, and will also appear in user-facing authorization screens. 

Select Enable Sign in with Twitter. At this point, you must provide an OAuth callback URL, which is the destination OAuth will redirect to following a successful authentication. Provide a Terms of Service URL, and Privacy Policy URL if available, although you can add this information later. 

When you’re happy with the information you’ve entered, click Create. Twitter will now create your application. 

Next you need to set up the permissions your app has to access the Twitter API. Select the Permissions tab, followed by Edit. Set Access permission to Read and write and Save. 

Next, select the Keys and tokens tab. This contains the API key and API secret key, which you’ll need to add to your WordPress account. In a new tab, open your WordPress account and select UserPro from the left-hand menu. Make sure the Settings tab is selected. Click to expand the Twitter integration section. Open the Allow Twitter Social Connect dropdown, and select Yes. Copy and paste your Twitter API key into WordPress’ Consumer key field, then copy and paste your API secret key. Click Save changes.

Now, anyone who visits your website will have the option to register using their Twitter credentials.

Conclusion

In this follow-up article, we built on the social features added to our WordPress site in the previous post by adding Google Maps, Twitter and Facebook integration to our online community. 

If you’ve been following along, then anyone who visits your website will now be able to register using Twitter or Facebook, create a profile that features Google Maps content, and connect with other users via your website’s Follow button or Send connect request button.

• 
  WordPress
  
  
  15 Best Membership Plugins for Your WordPress Site
  
  
  Eric Dye


• 
  WordPress Plugins
  
  
  Best WordPress Membership Plugins of 2019
  
  
  Daniel Strongin


• 
  WordPress Plugins
  
  
  7 Best WordPress Community Plugins for 2019
  
  
  Lorca Lokassa Sa


• 
  WordPress
  
  
  Protect Paid Content on Your WordPress Site Using a Free Membership Plugin
  
  
  Sajal Soni

You can purchase the UserPro plugin from CodeCanyon, or you can check out the UserPro Support section for more information.