{"id":18132,"date":"2024-01-24T08:43:44","date_gmt":"2024-01-24T01:43:44","guid":{"rendered":"https:\/\/www.makewebeasy.com\/en\/blog\/?post_type=manual-4&#038;p=18132"},"modified":"2024-01-24T08:43:44","modified_gmt":"2024-01-24T01:43:44","slug":"facebook-api-connection","status":"publish","type":"manual-4","link":"https:\/\/www.makewebeasy.com\/en\/blog\/manual-4\/facebook-api-connection\/","title":{"rendered":"Facebook API Connection"},"content":{"rendered":"<p><span>The Facebook API is used to connect websites to the Facebook system, which includes:<\/span><\/p>\n<ul>\n<li><strong><span>Facebook Login<\/span><\/strong><span>\u00a0: Allows audiences to apply for membership or create an account to easily log in to the website.<\/span><\/li>\n<li><strong><span>Facebook Comment<\/span><\/strong><span>\u00a0: Allows audiences to comment on products, articles, galleries and activity calendars connected to Facebook.<\/span><\/li>\n<li><strong><span>Facebook Instant Articles:\u00a0<\/span><\/strong><span>\u00a0Helps audiences access articles on Facebook faster. This feature can overcome\u00a0long\u00a0<\/span><em><span>loading of articles or news.<\/span><\/em><\/li>\n<\/ul>\n<p><span>Before activating this system, you need to have Facebook first activate its API.<\/span><\/p>\n<h2><strong><span>Facebook App\u00a0<\/span><\/strong><\/h2>\n<ol>\n<li><span>Go to the URL\u00a0\u00a0<\/span><a href=\"https:\/\/developers.facebook.com\/\"><span>https:\/\/developers.facebook.com\/<\/span><\/a><span>\u00a0then select\u00a0<\/span><strong><span>Log In<\/span><\/strong><span>\u00a0in the top right corner of the menu. After logging in, go to the\u00a0<\/span><strong><span>&#8220;My Applications&#8221;<\/span><\/strong><span> menu.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-10.55.11-2-620x314.png\" \/><\/li>\n<li><span>Click\u00a0\u00a0<\/span><strong><span>\u201cCreate Application\u201d<\/span><\/strong><span> , then select Business as the application type and click\u00a0<\/span><strong><span>\u201cContinue\u201d<\/span><\/strong><span>\u00a0.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-05-at-17.33.59-620x339.jpg\" \/><\/li>\n<li><span>Enter the name of the application and click\u00a0\u00a0<\/span><strong><span>&#8220;Create Application&#8221;.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-05-at-17.34.26-620x339.jpg\" \/><\/strong><\/li>\n<li><span>Go to\u00a0\u00a0<\/span><strong><span>Settings &gt; Basic Information<\/span><\/strong><span>\u00a0. Then specify additional information and click\u00a0\u00a0<\/span><strong><span>Save Changes<\/span><\/strong><span>\u00a0.<\/span><br \/>\n<span>\u2013\u00a0\u00a0<\/span><strong><span>Application Domain:<\/span><\/strong><span>\u00a0Determine the website domain name\u00a0<\/span><strong><span>without using<\/span><\/strong><span>\u00a0http:\/\/ or https:\/\/ (eg: makewebeasy.com).<\/span><br \/>\n<span>\u2013\u00a0\u00a0<\/span><strong><span>Privacy Policy URL\u00a0<\/span><\/strong><strong><span>:<\/span><\/strong><span>\u00a0Specify the page URL containing the website&#8217;s privacy policy, for example https:\/\/www.makewebeasy.com\/privacys-policy.<\/span><br \/>\n<span>\u2013\u00a0\u00a0<\/span><strong><span>Terms &amp; Conditions URL:<\/span><\/strong><span>\u00a0Determine the page URL containing the website&#8217;s terms and conditions, for example https:\/\/www.makewebeasy.com\/termscondition.<\/span><br \/>\n<span>\u2013\u00a0<\/span><strong><span>Application Icon<\/span><br \/>\n<span>\u2013 Category<\/span><\/strong><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-09.29.13-620x311.png\" \/><\/li>\n<li><span>Add a\u00a0\u00a0<\/span><strong><span>Website\u00a0<\/span><\/strong><span>\u00a0type platform and specify\u00a0\u00a0<\/span><strong><span>the site URL\u00a0<\/span><\/strong><span>\u00a0(eg: makewebeasy.com), then click\u00a0\u00a0<\/span><strong><span>Save.\u00a0<\/span><\/strong><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-10.19.47-620x313.png\" \/><img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-10.20.29-620x311.png\" \/><\/li>\n<li><span>Turn on\u00a0 <\/span><strong><span>the \u201cApplication Mode\u201d<\/span><\/strong><span>\u00a0toggle .<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-09.37.40-620x313.png\" \/><\/li>\n<li><span>Copy\u00a0\u00a0<\/span><strong><span>the Application ID<\/span><\/strong><span>\u00a0to be installed in the MakeWebEasy\u00a0<\/span><em><span>back-end\u00a0<\/span><\/em><span>\u00a0system . The method is, go to the\u00a0\u00a0<\/span><strong><span>&#8220;SEO &amp; Marketing&#8221; Menu &gt; API &gt; Facebook API &gt; Facebook Application<\/span><span>\u00a0&gt;\u00a0<\/span><\/strong><span>\u00a0enter\u00a0\u00a0<\/span><strong><span>the Application ID<\/span><\/strong><span>\u00a0, and click\u00a0<strong>Save<\/strong> to keep the work.<\/span>\u00a0<strong>\u00a0<\/strong><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-17.40.35-620x166.png\" \/>&nbsp;<\/p>\n<p><img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-09.40.45-2-e1689136851766-620x332.png\" \/><\/li>\n<\/ol>\n<p><span>Now, you can set up other Facebook APIs in the\u00a0 MakeWebEasy\u00a0<\/span><em><span>back-end<\/span><\/em><span>\u00a0system , such as:<\/span><\/p>\n<ul>\n<li>Facebook Comment<\/li>\n<li>Facebook Login<\/li>\n<li><span>Facebook Instant Article\u00a0<\/span><\/li>\n<\/ul>\n<h2><strong><span>Facebook Comment\u00a0<\/span><\/strong><\/h2>\n<p><span>The Facebook comments column is a place used by audiences to express their views regarding products or services on the Facebook application. If you want to use this feature, then you must set up the Facebook application above first. If so, you can proceed to the next stage, namely:<\/span><\/p>\n<ol>\n<li><span>Go to the\u00a0\u00a0<\/span><strong><span>\u201cSEO &amp; Marketing\u201d menu &gt; API &gt; Facebook API<\/span><\/strong><\/li>\n<li><span>You can activate the enable\/disable\u00a0<\/span><strong><span>Facebook Comments\u00a0 toggle\u00a0<\/span><\/strong><span>in various parts of the website, such as:<\/span><br \/>\n<span>\u2013 Product System (Product Page Details)<\/span><br \/>\n<span>\u2013 Article System (Content Page Details)<\/span><\/li>\n<\/ol>\n<h2>Facebook Login<\/h2>\n<p><span>You can use this feature to make it easier for your audience (consumers)\u00a0<\/span><strong><span>to apply for membership<\/span><\/strong><span>\u00a0or\u00a0<\/span><strong><span>log in<\/span><\/strong><span>\u00a0to the website easily just by using their Facebook account.<\/span><\/p>\n<ol>\n<li><span>Go to the URL\u00a0<\/span><a href=\"https:\/\/developers.facebook.com\/\"><span>https:\/\/developers.facebook.com<\/span><\/a><span>\u00a0, then select\u00a0<\/span><strong><span>Log In<\/span><\/strong><span>\u00a0in the top right corner of the menu. After logging in, go to the\u00a0<\/span><strong><span>My Applications menu.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-10.55.11-2-620x314.png\" \/><\/strong><\/li>\n<li><span>Go to\u00a0<\/span><strong><span>Dashboard &gt; Facebook Login &gt; Settings<\/span><\/strong><span>\u00a0.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-11.06.44-620x311.png\" \/><\/li>\n<li><strong><span>In the Client OAuth Settings<\/span><\/strong><span>\u00a0section\u00a0\u00a0, set the settings as shown in the image, then click\u00a0\u00a0<\/span><strong><span>Save Changes<\/span><\/strong><span>\u00a0.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-14.53.06-620x311.jpg\" \/><br \/>\n<span>In the\u00a0<\/span><strong><span>Allowed domains for JavaScript SDK<\/span><\/strong><span>\u00a0section , you can enter a domain name (for example: makewebeasy.com)<\/span><\/li>\n<li><strong><span>In the OAuth Redirect URI<\/span><\/strong><span>\u00a0section\u00a0\u00a0, you can specify it by copying the URLs one by one from the\u00a0 MakeWebEasy\u00a0<\/span><em><span>back-end<\/span><\/em><span>\u00a0system . The method is to click the\u00a0\u00a0<\/span><strong><span>&#8220;Facebook API&#8221; Menu\u00a0<\/span><\/strong><strong><span>&gt; Facebook Login Settings &gt; OAuth Redirect URIs<\/span><\/strong><span>\u00a0. Enter everything then click\u00a0\u00a0<\/span><strong><span>\u201cSave Changes\u201d<\/span><\/strong><span>\u00a0.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-11.36.46-e1689137040885-620x181.png\" \/><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-11.39.38-620x312.jpg\" \/><\/li>\n<li><span>If a notification appears as shown in the picture, follow the steps below:<\/span><br \/>\n<span>*If there is no notification, then you can skip it.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-14.24.44-crop-620x95.png\" \/><br \/>\n<span>If a notification like this appears, click\u00a0\u00a0<\/span><strong><span>the Login Switch to Facebook<\/span><\/strong><span>\u00a0link , then select\u00a0<\/span><strong><span>API Using Certain Permissions Doesn&#8217;t Work.<\/span><\/strong><\/li>\n<li><span>Go to\u00a0\u00a0<\/span><strong><span>App Overview &gt; Permissions &amp; Features<\/span><\/strong><span>\u00a0, then press\u00a0\u00a0<\/span><strong><span>Request Advanced Access\u00a0<\/span><\/strong><span>\u00a0for the following features:<\/span><br \/>\n<span>\u2013 Email<\/span><br \/>\n<span>\u2013 Public Profile<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-13.46.02-620x312.jpg\" \/><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-13.46.17-620x311.jpg\" \/><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-13.49.11-620x311.jpg\" \/><\/li>\n<li><span>Go to\u00a0\u00a0<\/span><strong><span>Settings &gt; Basic Info &gt; Data Usage Monitor<\/span><\/strong><span>\u00a0, then press \u201c\u00a0<\/span><strong><span>Start Monitor\u201d<\/span><\/strong><br \/>\n<span>*If verification is complete, you can skip this step.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-14.01.38-620x310.png\" \/><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-14.04.27-620x521.png\" \/><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-14.04.36-620x484.png\" \/><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-14.04.42-620x146.png\" \/><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-14.05.09-620x311.png\" \/><\/li>\n<li><span>Go back to the MakeWebEasy\u00a0<\/span><em><span>back-end<\/span><\/em><span>\u00a0system . Click on the\u00a0\u00a0<\/span><strong><span>&#8220;Facebook API&#8221; menu &gt; &#8220;Facebook Login Settings&#8221; &gt; Activate Facebook Login System<\/span><span>\u00a0.\u00a0<\/span><\/strong><span>\u00a0Finally, click \u201c\u00a0<\/span><strong><span>Save\u201d<\/span><\/strong><span>\u00a0to complete the work.<\/span><br \/>\n<img src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-14.17.19-e1689137093568-620x166.png\" \/><\/li>\n<\/ol>\n","protected":false},"featured_media":0,"template":"","manual_category_v4":[1810],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v14.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Facebook API Connection - MakeWebaEasy Blog<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.makewebeasy.com\/en\/blog\/manual-4\/facebook-api-connection\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Facebook API Connection - MakeWebaEasy Blog\" \/>\n<meta name=\"twitter:description\" content=\"The Facebook API is used to connect websites to the Facebook system, which includes: Facebook Login\u00a0: Allows audiences to apply for membership or create an account to easily log in to the website. Facebook Comment\u00a0: Allows audiences to comment on products, articles, galleries and activity calendars connected to Facebook. Facebook Instant Articles:\u00a0\u00a0Helps audiences access articles [&hellip;]\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2566-01-06-at-10.55.11-2-620x314.png\" \/>\n<meta name=\"twitter:creator\" content=\"@makewebeasy\" \/>\n<meta name=\"twitter:site\" content=\"@makewebeasy\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual-4\/18132"}],"collection":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual-4"}],"about":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/types\/manual-4"}],"wp:attachment":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/media?parent=18132"}],"wp:term":[{"taxonomy":"manual_category_v4","embeddable":true,"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual_category_v4?post=18132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}