WP Rocket - WordPress Caching Plugin

Explaining how to set up Facebook login for 2021!

At HanamiWEB Online School,

●Ask questions in real-time in the virtual study room!

●Ask as many questions as you want via chat!

●E-learning materials that you can learn as much as you want, 24 hours a day!

All included for just 2,500 yen/month!

HanamiWEB representative Misa (@hanami_web)is.
I am building a matching site with WordPress using the Matching Site theme, and the Matching Site theme has a Facebook login mechanism.

I needed to issue an API key to log in to Facebook, so I'll explain the procedure for issuing it!

Twitter login API key issuance / Google Login API key issueThis is summarized in a separate article.

Now, let's show you how to issue an API key for Facebook login!

The theme for the matching site we will be setting up this time is PremiumPress.

Facebook Login Create a new app

Facebook Login Log in to Facebook Developer to issue an API key.

Log in to Facebook Developer

Click Create App.

If you want to create a Facebook login, select User

If you are logged in with Facebook, click Consumer to proceed to the next step.

Enter the app display name for Facebook login

Enter the display name and email address for your Facebook login app and click [Create App].

Your app name will be displayed when your customers try to log in!

Select Facebook Login

Once you create the app, you will be taken to the dashboard below, so click on [Settings] under Facebook Login.

Facebook Login Select Web

This time, we will use Facebook login on a website, so select Web.

Enter the website URL to be implemented

Enter the URL of the website where you want to implement Facebook Login.

Continue moving forward

Various embed codes will be issued to implement Facebook login on your site, but since the PremiumPress theme we are using has already completed the embed codes, click [Next] to proceed.

Once complete, return to the dashboard

Facebook Login API Key/Secret Verification

In Settings > Basic

App ID ⇒ API key
app secret ⇒ Secret Key 

Copy and paste this into the input section of your theme.
others

  • display name
  • App domain (the domain is the ●●●.com part below https://)
  • Contact Email Address
  • Privacy Policy URL
  • Terms of Use URL

Enter and save.

Enter a valid redirect URL

Facebook callback URL
Facebook Login > Settings
Enter a valid OAuth redirect URL in the field.

Facebook Login Publish

Toggle the "In Development" switch at the top to officially release the Facebook Login feature.

Facebook login implementation completed!

You have successfully logged in to Facebook as shown below!

I was already registered as a Facebook Developer.

Facebook has had a Developer registration system for quite some time, so we will introduce it without going through the Facebook Developer registration process.

Facebook login was very easy as the instructions were in Japanese!

To build a matching site using WordPress, I use a theme called PremiumPress. Social media login can also be done through the theme settings, so it's excellent even without any plugins!

Twitter Login / Google Login We also explain how to set it up!

HanamiWEB

The person who wrote this article

Matsuura Misa

HanamiWEB Co., Ltd. / Web Production, SEO, and AI Search Engine Optimization Support

Based in Nerima Ward, Tokyo, we provide support for small and medium-sized businesses, including website creation, SEO measures, and site design that anticipates the era of AI search.
I specialize in practical improvement suggestions using WordPress and content design that focuses on customer acquisition funnels.
We also provide website maintenance and operation services.

Released as soon as the next morning! Weekends and holidays are also available!

Super rush website creation plan

We offer a rush website creation plan for those who need a website in a hurry!

We can publish your content as soon as the next morning, even on weekends and holidays! If you have any questions, please check the details below!

Latest Articles

Nerima Ward: Ranked 2nd in website creation | Explanation of how to create a website that gets cited by AI
What is website update outsourcing? A clear explanation of costs, market rates, and how to request their services.
RankMath Webmaster Tools Setup Guide | Google Search Console & Bing
RankMath "Breadcrumb Navigation" Settings Guide
en_USEnglish