Instagram is a hugely popular photo sharing site with over 200 million registered users. Adding authentication for Instagram in Joomla using JFBConnect is a great way to allow new users to register or login to your site. This guide will take you through the full process of creating an Instagram Application.
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
- 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.
- "Deauthorize" - Enter the following, replacing yourdomain.com wth your actual domain name.
- "Data Deletion Requests" - Enter the following, replacing yourdomain.com wth your actual domain name.
- 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 to Roles > Roles and add an Instagram Tester.
- 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:
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.
- 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.