This manual is about creating app in customer http://developer.facebook.com area and its proper configuration in CC Instagram Feed Component.

1. Retrieving Access Token and User ID:

Before you start:

• Make sure that you have command-line tool like Terminal or an app like Postman that can perform cURL requests.

Creating an app in http://developer.facebook.com :

1. Log in to your Facebook Developer panel: https://developers.facebook.com/apps/

2. Click on “Create App” button and choose “Other” as an app type in popup and as a type pick none (at the list.
   
   

Open

step 1 of creating new app

 

Open

step 2 of creating new app

3. Enter the app name (eg. {customer_name}_feed), contact e-mail (customer email) and select Instagram Business account from the dropdown:

    

4. Once app is created, you should be redirected to Facebook Developers App dashboard.

    

Adding platform and products:

1. Navigate to Settings → Basic and hit “+ Add platform” on the very end of the page.

    

2. Select “[Website]” from the options listed in popup, then enter site URL and save changes.

    

3. Add product for app by clicking “+” mark and click “Set Up” for Instagram Basic Display API.

    

4. Click on “Create New App” then “Create App” in popup. (Display name will be filled automatically).

5. You will be now redirected to “Basic Display” settings page. Scroll down and fill Valid OAuth Redirect URIs, Deauthorize Callback URL and Data Deletion Request URL with project domain. Save changes, then click on Add or Remove Instagram Testers below previously listed sections, to be redirected to “Roles” view.

    

6. On the “Roles” view, add new Instagram Tester, search for account that should be linked (it means an account that feed should appear in CC Instagram Feed component). Linked account should appear on the Instagram Testers list with pending status)

    

7. Open your Instagram account and navigate to Settings → Apps and Websites → Tester Invites and accept invitation.

Get short-lived Access Token

1. Create simple request by filling the sample with your data:

   https://api.instagram.com/oauth/authorize ?client_id={Instagram App Id} &redirect_uri={Valid OAuth Redirect URIs} &scope=user_profile,user_media &response_type=code

   Request should look like this:

   https://api.instagram.com/oauth/authorize ?client_id=1234800855656549 &redirect_uri=https://project.domain.com/ &scope=user_profile,user_media &response_type=code

    

2. Copy request to clipboard and paste it to your browser’s address bar. You will be redirected now to Instagram authorization page. Click “Authorize” and wait for redirection. After successful authorization, you will be redirected to page that you passed to request as {Valid OAuth Redirect URIs}.

3. Copy and save code parameter the redirected URL. This is your {authorization code}. It will stay active for 1h. It should look like this:

   https://project.domain.com/?code=AQB-ogPt1whomZbWCZg-QRr3kg2yNmp_XbRDIaXmUU7ZcScRcHM6J-5yG4RX3ZAvvwYOebyccdtDdy6IT57-KYK2a97uQuHqQM-2PlJdsRfwXculLFqjQZl8g90R9wiC0P7UUucljl075yPsaxzhJfgGgh2f-IWD7edAK76G3g-ITEUXal8zNpz2NkMVuSuaxN7MaKncBl0jJPMNe1i_tsIDAI6nwsF1l8muvDws1vg#_

4. Prepare request for getting short-lived Access Token like before, by replacing parameters with your values:

   curl -X POST \ https://api.instagram.com/oauth/access_token \ -F client_id={Instagram App Id} \ -F client_secret={Instagram App Secret} \ -F grant_type=authorization_code \ -F redirect_uri={Valid OAuth Redirect URIs} \ -F code={authorization code}

    

5. Copy request to your command-line tool and execute. Response will contain a short-lived Access Token (“access_token” value) and User ID (“user_id” value). Let’s name it: {short-lived Access Token} and {User ID} for further usage. Make sure that you save this values. See the sample response below:

Get long-lived Access Token

1. Prepare request for exchanging short-lived Access Token for long-lived one. Fill the sample below with your data and like described in step 1 from Get short-lived Access Token, paste it into your browser and send the request:

    

   Response will contain your access token and expire timestamp. Make sure you saved the long-lived Access Token (“access_token” value). Let's name it: {long-lived Access Token} for future usage. See the sample response below:

2. Magento 2 CC Instagram Feed configuration:

Before you start:

• Prepare {User ID} (from Get short-lived Access Token paragraph, step 6.)

• Prepare {long-lived Access Token} (from Get long-lived Access Token paragraph, step 1.)

Module configuration:

1. Open your Magento2 admin panel dashboard and navigate to: Stores → Configuration → Magesuite → Content Constructor → Instagram Data Feed Component Configuration.

2. Fill configuration fields with your {long-lived Access Token} for Access Token, and {User ID} for User ID.