Step 1: Install EB Instagram Stream module
- Login to Joomla administrator panel and Go to Extensions -> Manage -> Install
- On the Installation Page, Select the "Upload Package File" Tab, Then Upload Downloaded Zip
Step 2: Go to EB Instagram Stream Module
- Go to Extensions -> Modules
Step 3: Configure the Module
- Search for "EB Instagram Stream" in the Search box and click on "EB Instagram Stream" module to start editing
- On the Module Edit Page, Select Position for Instagram Stream module for display and Change status from Unpublished to Published
- Configure Page where you want to display EB Instagram Stream Module
Instagram Stream Settings
- For Instagram Stream You will require Access Token. Get Access Token follow the process.
You will require a Facebook Developer account.
Step 1: Create your Facebook app
If you don’t already have a Facebook app for your application, create one now:
- Go to developers.facebook.com, click My Apps, and create a new app. Click On Add a New App And Choose For Everything Else
- Now Add App Display Name and App Contact Email, Click On Create App ID Button. (When Click on Create App ID Button and submit App Then Getting Notice Invalid Email or Phone Number But No Warry about that Your App will be Created, Only Reload the Page. )
- Once you have created the app and are in the App Dashboard, navigate to Settings Basic , scroll the bottom of page, and click Add Platform.
- Choose Website , add your website’s URL, and save your changes.
Step 2: Configure Instagram Basic Display App
- Click Products , locate the Instagram Basic Display product and click Set Up to add it to your app.
- Click Basic Display , scroll to the bottom of the page, then click Create New App.
- In the form that appears, complete each section.
Enter the name of the Facebook app you just created.
Valid OAuth Redirect URIs
Please Enter This URL for Redirect URIs
Deauthorize Callback URL
Enter your website’s URL again. Eventually you will have change this to a URL that can handle deauthorization notifications, but for the purposes of this tutorial, you can re-use your website URL.
Data Deletion Request Callback URL
Enter your website’s URL once again. Just like the Deauthorize Callback URL, you will eventually have change this to a URL that can handle data deletion requests, but for now you can re-use your website URL.
- Now Save Changes
Step 3: Add your Instagram Test User
- NOTE: Please make sure that “Sending Facebook Instagram Tester request" and “Accepting Request at Instagram for tester user” is being done from the same browser session.
- Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.
- Open a new tab in web browser and go to www.instagram.com and sign in to your Instagram account that you just invited. Navigate to (Profile Icon) > Edit Profile > Apps and Websites > Tester Invites and accept the invitation.
- You will now be able to begin making changes to your existing application to access to the new Basic Display API.
- Now Copy Instagram App ID , App Secret .
- Add EB Instagram Stream Module Fields Instagram App ID and Instagram App Secret and Save the settings.
- Then Click on Show full description ... OR Go to Description Tab And Click Button Click here to get your Access Token
- Then Open Instaragram oauth login Step
- Login with your Instagram Account and Follow Process until ends
- If Everything went well, You'll be brought back to this page again and, your Instagram Access Token and User ID will be ready for you. Do not share this token with Anyone else.
- Configure Number of posts, You will see posts in front-ends
- Stream Style - Select In-built Instagram Stream Style (Can refer demo to see how each style looks)
- Thumb Style - Select Thumb Style Square OR Circle
- Column(s) in Desktop - Configure number for Column(s) in Desktop Display
- Column(s) in Tablet - Configure number for Column(s) in Tablet Display
- Column(s) in Mobile - Configure number for Column(s) in Mobile Display
- Show Text - This field configure, Display post Text(Caption) in selected stream
- Enable Cache - Enable Cache option work based on Instagram API call run. Basically configure this option, Control on how many times run Instagram API. Configure Disable Option, Every page load Instagram API call run.
- Cache Time - Configure select option, This selected Cache Time, Run Instagram API.
- Purchase Key - Enter the purchase key to enable auto updates
- And you're done. Save the module and have a look at the front end!
Note: This is for the Instagram app, not the Facebook application.