Instagram is a hugely popular photo sharing site with over 200 million registered users. This guide will take you through the full process of creating an Instagram Application.
NOTE: In 2020, Facebook started recommending to not use Instagram for authentication and instead using Facebook authentication for both Facebook and Instagram users. Instagram authentication does still work, but may be discontinued at any time. If you plan to use the Instagram authentication only for users to authenticate to your site, we recommend configuring Facebook authentication instead.
Before you get started, you will need an Instagram account and a Facebook Application. If you don't already have either, you'll need to create them.
- Go to the Facebook Developer Center: https://developers.facebook.com/apps
- Open your existing app or create a new one following our Facebook Application Setup Guide. Please note that to log in with Instagram and use the profile APIs, your Facebook app must be for Consumers, NOT a Business type.
- In the Product section, add an Instagram product.
- Click on the 'Basic Display' menu item under the Instagram Product
- Click 'Create New App' button
- Create a new Display Name for your Instagram app (or leave the pre-populated name alone) and click Create App.
- Scroll down and enter the "Valid OAuth Redirect URIs". This is the full root of your Joomla website, including https and index.php. If you have other ways to access your domain (like www or non-www), add them all here, like below (replacing yourdomain.com with your actual domain name. Please note that HTTPS is required by Facebook for all Redirect URIs.
https://www.yourdomain.com/index.php
https://yourdomain.com/index.php
- "Deauthorize" - Enter the following, replacing yourdomain.com wth your actual domain name.
https://www.yourdomain.com/index.php?option=com_jfbconnect&task=deauthorizeUser
- "Data Deletion Requests" - Enter the following, replacing yourdomain.com wth your actual domain name.
https://www.yourdomain.com/index.php?option=com_jfbconnect&task=deleteData
- Once done with steps 7-9, click "Save Changes".
- Once you've saved the Instagram settings, please copy and paste the "Instagram App ID" and "Instagram App Secret" to the JFBConnect backend > Configuration > Instagram Area. *Please do not use the Facebook App ID/Secret for your Instagram settings in JFBConnect.
- To test the Instagram app in Development Mode, you will need to create an Instagram Test User.
- Navigate back to Instagram Basic Display > Basic Display. Scroll down to the "User Token Generator" section and click the "Add or Remove Instagram Testers" button.
- Add a user to the Instagram Tester section.
- The Instagram Tester must then login to instagram.com and accept the Invite on before access will function correctly.
- If you forget to add a tester, there will be errors returned from Instagram when you click on the Instagram Login button on your website.
- Live Facebook applications must go through the App Review process in order to use the Instagram authentication. You can test in Development Mode with the tester created in step 9 until you're ready to go live.
- In order to add the Instagram oEmbed widget with JFBConnect, you'll need to set up the project. Select Products > oEmbed and click on the "Set Up" button. When prompted, confirm the popup.
- Go to the Instagram Developer area: http://instagram.com/developer/
- Click the "Manage Clients" link in the top right.
- Click the green "Register a New Client" button in the top right:
- On the "Register new Client ID" page, fill out the following fields:
- Application Name - A short title for your application or site. Your website name is a good suggestion.
- Description - A longer description of your site, possibly including why the user may want to register using Instagram.
- Company Name - The name of your company
- Website URL - The full URL of your homepage.
- Valid redirect_uri - The full path to the root of your Joomla website, including http(s) and index.php:
http://www.yoursite.com/index.php
Please note: If you have a valid SSL certificate installed on your site, you should use the https in the redirect_uri link. In JFBConnect, make sure you enable the "Use SSL For Authentication" setting in the Instagram configuration section.
- Privacy Policy URL - URL for a privacy policy on your site.
- Contact Email - Email that Instagram can get in touch with you (this is not publicly available).
- Your full application setup will look something like:
- On the main Instagram Application page, save your Client ID and Secret Key settings to input into JFBConnect:
- Submit your Application for Review - Your application will initially be in Sandbox mode. In the Sandbox, only 10 users will be able to authenticate. After that, more users will not be able to login until you go through the review process. To submit your app for review:
- Go to the "Permissions" tab in your application.
- In the list for "Which use case best describes your Instagram integration"
- choose "My app allows people to login with Instagram and share their own content"
- In the "API use Case" area, describe your integration with Instagram. A good example would be:
"Our site uses Instagram authentication to allow the user to login to our site without having to register a new account"
- Video Screencast URL - You must create a video showing the authentication experience on your site using JFBConnect.
- Additional Permissions - Do not add any
- Once the above is done, click the "Submit" button.
