{"id":288,"date":"2020-01-13T22:00:38","date_gmt":"2020-01-14T04:00:38","guid":{"rendered":"https:\/\/justinstolpe.com\/blog\/?p=288"},"modified":"2020-01-13T22:00:38","modified_gmt":"2020-01-14T04:00:38","slug":"instagram-basic-display-api-creating-a-facebook-app","status":"publish","type":"post","link":"https:\/\/justinstolpe.com\/blog\/2020\/01\/13\/instagram-basic-display-api-creating-a-facebook-app\/","title":{"rendered":"Instagram Basic Display API: Creating a Facebook App"},"content":{"rendered":"<p>Today we learn how to setup a Facebook App for use with the Instagram Basic Display API. We create a Facebook app, add Instagram to our Facebook app, create an Instagram app under our Facebook App, and add our personal Instagram account as a tester under our new Instagram App.<\/p>\n<p>A Facebook App is required in order to use the Instagram Basic Display API. The Instagram Basic Display API allows us read only access to any Instagram Account that grants access to our App. We can get things like user info, number of posts, list of users posts, details on specific Instagram posts and more.<\/p>\n<h3><strong>Step 1: Create a Facebook App<\/strong><\/h3>\n<ol>\n<li>Go to https:\/\/developers.facebook.com\/apps\/<\/li>\n<li>Create a new App<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3><strong>Step 2: Configure Facebook App Settings<\/strong><\/h3>\n<ol>\n<li>Navigate to &#8220;Settings &gt; Basic&#8221;<\/li>\n<li>Fill in App Domain: Add domain(s) where the App will live.<\/li>\n<li>Fill in Privacy Policy: URL to your privacy policy (or any URL will do).<\/li>\n<li>Scroll to the bottom, click &#8220;Add Platform&#8221; and select &#8220;Website&#8221;. Add your domain where the App will live.<\/li>\n<\/ol>\n<p>&nbsp;<br \/>\n<a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/Settings-Basic.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-289\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/Settings-Basic.png\" alt=\"Facebook App Settings Basic\" width=\"1232\" height=\"963\" srcset=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/Settings-Basic.png 1232w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/Settings-Basic-300x234.png 300w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/Settings-Basic-768x600.png 768w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/Settings-Basic-1024x800.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<h3><strong>Step 3: Add Instagram App to Facebook App<\/strong><\/h3>\n<p>In the side bar on the left click on &#8220;PRODUCTS&#8221;. Find Instagram and click &#8220;Set Up&#8221;<\/p>\n<p><a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-product-setup.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-302\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-product-setup.png\" alt=\"instagram product setup\" width=\"1220\" height=\"838\" srcset=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-product-setup.png 1220w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-product-setup-300x206.png 300w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-product-setup-768x528.png 768w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-product-setup-1024x703.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>In the side bar on the left there should be an Instagram section. Navigate to &#8220;Instagram &gt; Basic Display&#8221; and click &#8220;Create New App&#8221;.<\/p>\n<p><a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/basic-display-tab.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-304\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/basic-display-tab.png\" alt=\"basic display tab\" width=\"1224\" height=\"438\" srcset=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/basic-display-tab.png 1224w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/basic-display-tab-300x107.png 300w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/basic-display-tab-768x275.png 768w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/basic-display-tab-1024x366.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>Under the Basic Display tab now we need to configure a few settings.<\/p>\n<ul>\n<li><span class=\"_317_\">Valid OAuth Redirect URIs<\/span>: This is the URL the Instagram will redirect the user back to after they have authenticated with our app.<\/li>\n<li><span class=\"_317_\">Deauthorize Callback URL<\/span>: Base domain of our website.<\/li>\n<li><span class=\"_317_\">Data Deletion Request URL<\/span>: Base domain of our website.<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n<a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-app.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-305\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-app.png\" alt=\"instagram app\" width=\"1227\" height=\"960\" srcset=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-app.png 1227w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-app-300x235.png 300w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-app-768x601.png 768w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-app-1024x801.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<h3><strong>Step 4: Add Test User<br \/>\n<\/strong><\/h3>\n<p>In order to test with the Instagram Basic Display API. We will add ourselves as a test user to our Instagram App. Navigate to the Roles section in the left hand side bar and add yourself to the &#8220;Instagram Testers&#8221; section.<\/p>\n<p><a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-testers.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-318\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-testers.png\" alt=\"instagram testers\" width=\"1226\" height=\"935\" srcset=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-testers.png 1226w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-testers-300x229.png 300w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-testers-768x586.png 768w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-testers-1024x781.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>Login to your Instagram account in a web browser, go to your profile, click on the settings gear icon, click &#8220;Apps and Websites&#8221;, and select the &#8220;TESTER INVITES&#8221; tab. We should see an invite from the App. Click &#8220;Accept&#8221;. We have authorized our App and can begin using the Instagram Basic Display API.<\/p>\n<p><a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-tester-invite.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-319\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-tester-invite.png\" alt=\"instagram tester invite\" width=\"1196\" height=\"378\" srcset=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-tester-invite.png 1196w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-tester-invite-300x95.png 300w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-tester-invite-768x243.png 768w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2020\/01\/instagram-tester-invite-1024x324.png 1024w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>That is how we setup a Facebook App and an Instagram App so we can use Instagram Basic Display API. Since we are a test user and have authorized the app, we can use the Instagram Basic Display API to get things like the Instagram accounts profile information and posts!<\/p>\n<p><center><strong>Links<\/strong><\/center><\/p>\n<p><strong><a href=\"https:\/\/github.com\/jstolpe\/blog_code\/tree\/master\/instagram_basic_display_api\" target=\"_blank\" rel=\"noopener\">Code on GitHub<\/a><\/strong><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=Wn5ur1PYfio\" target=\"_blank\" rel=\"noopener\"><strong>YouTube Video<\/strong><\/a><\/p>\n<p>That is going to do it for this post! Leave any comments\/questions\/concerns below and thanks for stopping by the blog!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we learn how to setup a Facebook App for use with the Instagram Basic Display API. We create a Facebook app, add Instagram to our Facebook app, create an Instagram app under our Facebook App, and add our personal Instagram account as a tester under our new Instagram App. A Facebook App is required &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/justinstolpe.com\/blog\/2020\/01\/13\/instagram-basic-display-api-creating-a-facebook-app\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Instagram Basic Display API: Creating a Facebook App&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":325,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,9,1],"tags":[],"class_list":["post-288","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-php","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/comments?post=288"}],"version-history":[{"count":33,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/288\/revisions"}],"predecessor-version":[{"id":330,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/288\/revisions\/330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media\/325"}],"wp:attachment":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media?parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/categories?post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/tags?post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}