How to get Instagram media with Bot Framework Composer 
Tags: botframework, composer, instagram
Published: 2020-03-30 05:49:02

---
title: How to get Instagram media with Bot Framework Composer 
published: true
description: How to get Instagram media with Bot Framework Composer 
tags: botframework,composer,instagram
---

[Bot Framework Composer](https://github.com/Microsoft/BotFramework-Composer) is powerful GUI tool to create your bot. This is somewhere between coding and low-coding solution.

Today, I demonstrate how to create bot to get pictures and videos from Instagram by using BotFramework Composer.

# Setup

First thing first. Follow instruction [here](https://github.com/microsoft/BotFramework-Composer/blob/stable/docs/setup-yarn.md) to install all the prerequisites and run the composer.

Make sure you use [stable](https://github.com/microsoft/BotFramework-Composer/tree/stable) branch.

# Create bot from template

1\. I can create bot from template. I use "Empty Bot" template this time as I already know what to do.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4d3yuy4m8jotkp6vwy92.png)

2\. I set "MyInstaBot" as it's name and create the bot.

# Publish to Azure and set authentication

I can publish the bot by using publish feature.

1\. Go to settings menu and click Publish, then click "Create Azure Resources".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3obnts8xjmuqijgoizfo.png)

2\. Specify name, password and others.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fsuipr3y9pt25so5wunq.png)

3\. The wizard shows you PowerShell script to setup resource. Copy and paste to PowerShell 6+ to provision the resource. This takes 5-10 minutes (mainly due to Cosmos DB setup).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wz2be8jwshwg6o9vzi16.png)

4\. After the Azure resource provisioning completed, copy Application Id and password. Go to next. I get publish script which is handy to publish the bot to Azure. Run it and complete the wiard.

# Setup Instagram/Facebook Application

Instagram is under Facebook, thus I need to create Facebook App and setup Instagram application.

1\. Go to [https://developers.facebook.com](https://developers.facebook.com/) and  create new app. I couldn't use "Insta" as part of application name, so I just name it "MyMediaBot"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z9v5y9kpdfzepi5t5bda.png)

2\. Add Instagram service.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fpvocpsbaxw6sgdttuw9.png)

3\. Go to "Basic Display" and create new Instagram app.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ckqhyx2ngffyzmfbf43.png)

4\. Enter "https://token.botframework.com/.auth/web/redirect" as it's redirect URL. Also copy App ID and App Secret.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4etn0fuzk8ekhdzqv0tu.png)

5\. Fill other required fields and save.

6\. Scroll down to add tester. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ux65gypfzp2qfjq3zfx0.png)

7\. Add "Instagram Testers" (not Facebook testers). I added my own account. Status becomes "pending" so that I need to accept it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ipx9x5alehgzieg34xwz.png)

8\. Go to the Instagram account. From "Edit Profile", accept to be a tester.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qdzbz8v4gmqdx874sk5h.png)

# Configure OAuth for Instagram

Bot Framework Composer takes an advantage of Bot Registration authentication feature.

1\. Go to [Azure Portal](https://portal.azure.com) and open "Bot Channels Registration". Go to settings and click "Add Settings" under "OAuth Connection Strings".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cp94p00ebd4javyyqgqr.png)

2\. Add "Instagram" settings. I use "user_profile,user_media" as its scope. For more detail, check out [Instagram Basic Display Getting Started](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z031owumz4jeulinnqus.png)

3\. Go back to Bot Framework Composer and edit settings. Update "MicrosoftAppId" and "MicrosoftAppPassword", which you can get from Azure Resource Provision setup result.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e3gvne2h7f3u81liwej4.png)

# Configure Dialog

Finally, create dialog to get Instagram media.

1\. Add new Dialog and name it "GetInstagram".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/otll7ug4ykx39w0ocib0.png)

2\. In "BeginDialog" trigger, add "OAuth login" action.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/osp76xeps41y993u0y75.png)

3\. Use **Exactly** same string value of Instagram connector created above. I also set **user.oauth** to store authentication result. **user** is one of memory object I can use to store/get data from bot. See [Conversation flow and memory](https://github.com/microsoft/BotFramework-Composer/blob/stable/docs/concept-memory.md) for more detail.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p3z4eygia2qch3tn0f90.png)

4\. Add "Send an HTTP request" action.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tfn0mzd4irvftky329fa.png)

5\. Use "Get" method and send request to **https://graph.instagram.com/me?fields=id&access_token=${user.oauth.token}** where I can get my own id.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vnk54ggmn97bi2ueknej.png)

6\. Store the result to **dialog.response**. The response will be stored in the property and I can get result by accessing **dialog.response.statusCode**, **dialog.response.headers**, or **dialog.response.content**. See [Sending an HTTP request and using OAuth](https://github.com/microsoft/BotFramework-Composer/blob/stable/docs/how-to-send-http-request.md) for more detail.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/78acorden003zozb2gz9.png)

7\. Add another http request action and send get request to **https://graph.instagram.com/${dialog.response.content.id}/media?access_token=${user.oauth.token}** which returns array of media ids. I overwrite the result to **dialog.response**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oaezetaprpctd7bsr9sp.png)

8\. Add loop condition as the result is array of ids.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8bzbgoxd21008qc30jng.png)

9\. In the loop, get media detail via get http request to **https://graph.instagram.com/${dialog.foreach.value.id}?fields=media_type,media_url,caption,thumbnail_url&access_token=${user.oauth.token}**. I can access loop item via **dialog.foreach.value**. Store thre response to **dialog.image**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hn5t4bq2k3t2yai22kcz.png)

10\. Add response action after the http request and add "send media" as placeholder for now.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u206bd99v5ykq5mdfcup.png)

11\. Go to "Bot Response" menu where I can tweak response by using [Language Generation](https://github.com/microsoft/BotFramework-Composer/blob/stable/docs/concept-language-generation.md) capabilities.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l79fm9rqdhslr4bp75jh.png)

12\. Add following functions to create card.

```text
# GetPictureCard ()
[HeroCard
  title=${if(dialog.image.content.caption==null,'',dialog.image.content.caption)}
  image=${dialog.image.content.media_url}
]

# GetVideoCard ()
[VideoCard
  title=${if(dialog.image.content.caption==null,'',dialog.image.content.caption)}
  image=${dialog.image.content.thumbnail_url}
  media=${dialog.image.content.media_url}
]
```

13\. Call functions depending on metadata from original response.

```text
- IF: ${dialog.image.content.media_type== 'IMAGE'}
    - ${GetPictureCard()}
- ELSE:
   - ${GetVideoCard()}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fsw5ak2hcdne97513q9b.png)

# Create Trigger

I somehow need to "trigger" the dialog. I use "Regex" recognizer this time but I can use "LUIS recognizer" for more rich scenario. See [Language Understanding](https://github.com/microsoft/BotFramework-Composer/blob/stable/docs/concept-language-understanding.md) for more detail.

1\. Specify "Regular Expression" in main dialog.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2i22k0i2q8d9mst038d1.png)

2\. Create new trigger. Regex **(?i)instagram** means case-insensitive to recognize "instagram".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hrj9vfjb8z75426a454d.png)

3\. In the triggered flow, start new dialog and call **GetInstagram** dialog.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/upf9dexe8kaz1qqh1899.png)

# Test via emulator

Let's test the bot now.

1\. Click "Start Bot" on the right upper corner. Once the bot is started, I can launch emulator by clicking " Test in Emulator".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d7vu35oqwaze4sqyd37n.png)

2\. Send "Instagram" to bot. I get sign-in action returned. Sign-in by following wizard.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/14me5drblsvpf71nae22.png)

3\. The sign-in flow varies depending on how you setup your security. I do MFA so obviously more steps involved.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ai77fxeqf2xc100ik46o.png)

4\. Once authentication completed, it gets media from Instagram.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ryfybgvbif8hi5urh4b8.png)

# What's next?

I can publish and connect to any channel such as Facebook Messenger, Teams, Slack. See [Publish a bot](https://github.com/microsoft/BotFramework-Composer/blob/stable/docs/how-to-publish-bot.md) for more detail.

# Summary

I could do the same by using BotBuilder/C# or any other supported language. But this is easier. The composer actually generates code behind so I can still do CI/CD, version management, and any other great stuff when I "develop" the bot.

Enjoy!