{"id":111776,"date":"2020-11-03T17:27:21","date_gmt":"2020-11-03T23:27:21","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=111776"},"modified":"2021-10-18T07:07:37","modified_gmt":"2021-10-18T12:07:37","slug":"add-social-login-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/","title":{"rendered":"How to Add Social Media Logins to WordPress"},"content":{"rendered":"\n

You\u2019ll often want users to register new accounts for your WordPress website or WooCommerce store, in order to access certain functionality. However, your visitors may find it challenging to remember their login credentials for each of the different sites they use every day. <\/p>\n\n\n\n

One way to improve the User Experience (UX)<\/a> for your visitors is to provide social login buttons for sites they probably already have accounts on, such as Twitter and Facebook. This can enable faster registrations and sign-ins, and eliminate tapping issues that mobile users may have when filling out forms.<\/p>\n\n\n\n\n\n

<\/p>\n\n\n\n

In this article, we\u2019ll discuss why you might consider adding social logins to WordPress. We\u2019ll also look at how to add them to both WordPress and<\/em> WooCommerce. Let\u2019s get to it!<\/p>\n\n\n\n

Why Add Social Logins to WordPress?<\/h2>\n\n\n\n

Social logins let visitors use authentication credentials from providers, such as Facebook or LinkedIn, to sign in to your site. Having a set of login details that work everywhere is appealing, as this saves users from needing to create accounts for multiple websites. All they need to do is select a social media button on your login page.<\/p>\n\n\n\n

Adding social logins to your site can increase registrations, since the extra hassle of creating a new account is eliminated. You\u2019ll also be more likely to obtain real email addresses. Additionally, since social network providers can enable you to access information such as locations and user interests, you can offer personalized content<\/a> (leading to a better overall UX).<\/p>\n\n\n\n

How to Add Social Logins to Your WordPress Site (In 3 Steps)<\/h2>\n\n\n\n

There are a variety of social login options that you can add to your website. We\u2019ll illustrate the process using Facebook and a WordPress social login plugin.<\/p>\n\n\n\n

Step 1: Install the Super Socializer Plugin<\/h3>\n\n\n\n

To get started, you\u2019ll need to log in to your WordPress dashboard. Then navigate to Plugins > Add New<\/em>. Search for \u201cSuper Socializer<\/a>\u201d on the Plugins<\/em> screen:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Next, click on the Install Now<\/em> button. Once the plugin is installed, the button text should change to Activate<\/em>, and you\u2019ll want to select it again.  <\/p>\n\n\n\n

Step 2: Configure the Plugin<\/h3>\n\n\n\n

Once Super Socializer is installed and activated, the next step is to configure it. Start by navigating to Super Socializer > Social Login<\/em>. To continue, you\u2019ll need to select the checkbox for \u201cEnable Social Login\u201d:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

You should now see a list of the various social networks that your users can register with. These include Facebook, Twitter, LinkedIn, and more.<\/p>\n\n\n\n

Step 3: Enable Social Login<\/h3>\n\n\n\n

At this point, you\u2019ll want to tick the checkbox for \u201cFacebook\u201d:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

To fill out the Facebook App ID<\/em> and Facebook App Secret<\/em> form fields, you\u2019ll need to visit the Facebook developer portal<\/a> and create a new app:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Note that if it\u2019s your first time using the portal, you won\u2019t be taken straight to the Apps<\/em> page. In that case, click on Get Started<\/em> on the home page to continue. After that, you\u2019ll need to enter some basic details before your app ID can be created.<\/p>\n\n\n\n

Select For Everything Else<\/em> in answer to \u201cHow are you using your app?\u201d:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Next, enter a display name for your app, a contact email, and (optionally) select a Business Manager account:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Once your app is created, it\u2019s time to set up the integration. Choose the Facebook Login<\/em> product:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

On the next screen, you\u2019ll want to select Web<\/em> as your platform:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Then enter your site\u2019s URL and save it:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Now, you can view your App ID and Secret. To do that, you\u2019ll want to navigate to Settings > Basic<\/em>:<\/p>\n\n\n\n

\"Facebook<\/figure>\n\n\n\n

Here, you can copy your App ID and Secret, and paste them back in your WordPress website. Don\u2019t forget to save your settings once you\u2019re done.<\/p>\n\n\n\n

You should now see a message at the top of the screen prompting you to add the displayed URL in your Facebook app settings:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Head back to the Facebook developer portal, and navigate to Facebook Login > Settings<\/em>. Here, you can paste the URL shown above into the Valid OAuth Redirect URIs<\/em> field. Make sure to save your changes:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

To activate the Facebook login integration on your live site, toggle the switch at the top of the screen labelled In development<\/em>. You\u2019ll need to choose a category for your app, and then click on Switch Mode<\/em>:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

You can now log out of your WordPress site to test your changes:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

You should see a Facebook login button displayed below the usual form fields. Your visitors can start using this button to log in right away.<\/p>\n\n\n\n

Adding Social Logins to WooCommerce (In 4 Steps)<\/h2>\n\n\n\n

WooCommerce<\/a> offers the ability to use social logins. However, this is only available as a paid feature<\/a>. Fortunately, Super Socializer can also be used to add login buttons to your registration and login forms, as well as to your checkout pages. Let\u2019s walk through how to do this.<\/p>\n\n\n\n

Step 1: Enable Social Commenting<\/h3>\n\n\n\n

After you\u2019ve installed and activated Super Socializer<\/a> (following Step 1 in the previous section), you\u2019ll want to navigate to Super Socializer > Social Commenting<\/em>. Here, you can enable your visitors to make comments using multiple social media services.<\/p>\n\n\n\n

Tick the checkbox labelled Enable Social Commenting<\/em> if this is an option you want to give your users:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

You can enable commenting on pages and posts, as well as on attachments and products. You can also set labels for the available commenting tabs. Further down the page, you can enable Facebook and Disqus commenting, and customize some styling and other options:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Don\u2019t forget to save your changes when you\u2019re done here.<\/p>\n\n\n\n

Step 2: Set Up Social Sharing<\/h3>\n\n\n\n

If you\u2019d like to set up social sharing, navigate to Super Socializer > Social Sharing<\/em>. Next, ensure that the checkbox labelled Enable Social Sharing<\/em> is ticked:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

The Theme Selection<\/em> tab provides styling options for icon shape, pixel size, background color, and more. Clicking over to the Standard Interface<\/em> tab provides you with additional options:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

You can select from multiple sharing services and social networks, and rearrange their icons:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

You can also choose whether or not to show the total share count for each platform.<\/p>\n\n\n\n

Step 3: Enable Like Buttons<\/h3>\n\n\n\n

To enable users like your content using their social media accounts, you can add \u2018like\u2019 buttons via Super Socializer. You\u2019ll want to head over to Super Socializer > Like Buttons<\/em>, and tick the checkboxes for Enable Like Buttons<\/em> and Enable standard interface<\/em>:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

You should now see several different options that you can tweak according to your needs in a Standard Interface<\/em> tab:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

For example, you can customize the target URL for your like buttons. By default, this is set to the home page where the icons are located. However, you can set it to your home page or something else entirely. You can also create a title to display above your like buttons, and select one or more providers. These include Facebook Share<\/em>, Twitter Tweet<\/em>, Reddit<\/em>, and so on.<\/p>\n\n\n\n

Next, you can set your buttons\u2019 alignment and positioning. For example, they can be placed at the top or bottom of your content. Finally, you can enable the pages where you want the like buttons displayed. These can be Posts<\/em>, Pages<\/em>, Category Archives<\/em>, and more:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

There are also WooCommerce-specific options for enabling like buttons on individual products in your shop, on \u2018thank you\u2019 pages, and more.<\/p>\n\n\n\n

Step 4: Set Up Social Login<\/h3>\n\n\n\n

To set up a social login option for Facebook, you can follow the same steps we demonstrated in the previous section. However, if you\u2019d like to enable other options, such as Twitter, LinkedIn, or Instagram, you\u2019ll want to click on the question mark symbol displayed near the relevant platform. <\/p>\n\n\n\n

Then you can follow the instructions that are displayed, which will vary for each option. Here\u2019s what that looks like for Twitter:<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Don\u2019t forget to save your changes once you\u2019re done here.<\/p>\n\n\n\n

Stay Connected With WP Engine<\/h2>\n\n\n\n

Adding social logins to your WordPress site or WooCommerce shop can greatly improve the UX for your visitors or customers, and increase the number of registrations. Plus, you can access richer user profiles from social network providers such as Facebook, in order to personalize your content more effectively.<\/p>\n\n\n\n

It can be challenging to consistently create excellent user experiences for your customers, but the right WordPress hosting<\/a> service can help. WP Engine makes it easier to maintain quality service!<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

You\u2019ll often want users to register new accounts for your WordPress website or WooCommerce store, in order to access certain functionality. However, your visitors may find it challenging to remember their login credentials for each of the different sites they use every day.  One way to improve the User Experience (UX) for your visitors is…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":111781,"template":"","resource-topic":[904,901],"resource-role":[903,899],"resource-type":[916],"class_list":["post-111776","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Add Social Media Logins to WordPress | WP Engine<\/title>\n<meta name=\"description\" content=\"Adding social media logins to WordPress can be a great way to drive user engagement. Check out the WP Engine guide on adding social logins to WordPress.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Social Media Logins to WordPress | WP Engine\" \/>\n<meta property=\"og:description\" content=\"Adding social media logins to WordPress can be a great way to drive user engagement. Check out the WP Engine guide on adding social logins to WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-18T12:07:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/11\/shutterstock_1465631834-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/\",\"name\":\"How to Add Social Media Logins to WordPress | WP Engine\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2020-11-03T23:27:21+00:00\",\"dateModified\":\"2021-10-18T12:07:37+00:00\",\"description\":\"Adding social media logins to WordPress can be a great way to drive user engagement. Check out the WP Engine guide on adding social logins to WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Social Media Logins to WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Social Media Logins to WordPress | WP Engine","description":"Adding social media logins to WordPress can be a great way to drive user engagement. Check out the WP Engine guide on adding social logins to WordPress.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Add Social Media Logins to WordPress | WP Engine","og_description":"Adding social media logins to WordPress can be a great way to drive user engagement. Check out the WP Engine guide on adding social logins to WordPress.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2021-10-18T12:07:37+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/11\/shutterstock_1465631834-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/","name":"How to Add Social Media Logins to WordPress | WP Engine","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2020-11-03T23:27:21+00:00","dateModified":"2021-10-18T12:07:37+00:00","description":"Adding social media logins to WordPress can be a great way to drive user engagement. Check out the WP Engine guide on adding social logins to WordPress.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-social-login-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add Social Media Logins to WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/11\/shutterstock_1465631834-2.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Marketer, Site Owner","topic":"<strong>Topics:<\/strong> Marketing, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/111776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/111781"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=111776"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=111776"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=111776"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=111776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}