Add Google Maps and Social Login to Your WordPress Community With UserPro
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.
In the first post of this two-part series, we set up 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.
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.
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’s 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: the fields the user will see at the time of registration
- login fields: the fields the user will see at login
- social fields: 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 in to 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 in to 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 on 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 in to 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.
To start using Facebook Connect, head over to the Facebook for Developers website. If prompted, log in to 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 and select Web. When prompted, enter your website’s URL and then click Save.
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 and 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 they will then be able to log in to that account using their Facebook username and password.
Similar to Login with Facebook, Twitter Connect allows anyone who visits your website to create an account, and then log in to 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 set up 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 that 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 in to your Twitter account if prompted and click Create an app. Give your application a name, which will be displayed on 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 on user-facing authorization screens.
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’s Consumer key field, and 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.
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.
WordPress15 Best Membership Plugins for Your WordPress Site
WordPress PluginsBest WordPress Membership Plugins of 2019
WordPress Plugins7 Best WordPress Community Plugins for 2019
WordPressProtect Paid Content on Your WordPress Site Using a Free Membership Plugin