Skip to content

Commit fbdff1e

Browse files
Michael Mieleemgrol
authored andcommitted
mm/fixing issues (MicrosoftDocs#1638)
1 parent 0ab576c commit fbdff1e

24 files changed

+69
-57
lines changed

articles/bot-service-channel-connect-facebook.md

Lines changed: 69 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,16 @@
22
title: Connect a bot to Facebook Messenger | Microsoft Docs
33
description: Learn how to configure a bot's connection to Facebook Messenger.
44
keywords: Facebook Messenger, bot channel, Facebook App, App ID, App Secret, Facebook bot, credentials
5-
author: RobStand
6-
ms.author: RobStand
75
manager: kamrani
86
ms.topic: article
7+
ms.author: kamrani
98
ms.service: bot-service
10-
ms.subservice: sdk
11-
ms.date: 10/12/2018
9+
ms.date: 08/03/2019
1210
---
1311

1412
# Connect a bot to Facebook
1513

16-
Your bot can be connected to both Facebook Messenger and Facebook Workplace, so that it can communicate with users on both platforms. The following tutorial shows how to connect a bot to these two channels step by step.
14+
Your bot can be connected to both Facebook Messenger and Facebook Workplace, so that it can communicate with users on both platforms. The following tutorial shows how to connect a bot to these two channels.
1715

1816
> [!NOTE]
1917
> The Facebook UI may appear slightly different depending on which version you are using.
@@ -22,74 +20,95 @@ Your bot can be connected to both Facebook Messenger and Facebook Workplace, so
2220

2321
To learn more about developing for Facebook Messenger, see the [Messenger platform documentation](https://developers.facebook.com/docs/messenger-platform). You may wish to review Facebook's [pre-launch guidelines](https://developers.facebook.com/docs/messenger-platform/product-overview/launch#app_public), [quick start](https://developers.facebook.com/docs/messenger-platform/guides/quick-start), and [setup guide](https://developers.facebook.com/docs/messenger-platform/guides/setup).
2422

25-
To configure a bot to communicate using Facebook Messenger, enable Facebook Messenger on a Facebook page and then connect the bot to the app.
23+
To configure a bot to communicate using Facebook Messenger, enable Facebook Messenger on a Facebook page and then connect the bot.
2624

2725
### Copy the Page ID
2826

29-
The bot is accessed through a Facebook Page. [Create a new Facebook Page](https://www.facebook.com/bookmarks/pages) or go to an existing Page.
27+
The bot is accessed through a Facebook Page.
3028

31-
* Open the Facebook Page's **About** page and then copy and save the **Page ID**.
29+
1. [Create a new Facebook Page](https://www.facebook.com/bookmarks/pages) or go to an existing Page.
30+
31+
1. Open the Facebook Page's **About** page and then copy and save the **Page ID**.
3232

3333
### Create a Facebook app
3434

35-
[Create a new Facebook App](https://developers.facebook.com/quickstarts/?platform=web) on the Page and generate an App ID and App Secret for it.
35+
1. In your browser, navigate to [Create a new Facebook App](https://developers.facebook.com/quickstarts/?platform=web).
36+
1. Enter the name of your app and click the **Create New Facebook App ID** button.
37+
38+
![Create App](media/channels/fb-create-messenger-bot-app.png)
39+
40+
1. In the displayed dialog, enter your email address and click the **Create App ID** button.
41+
42+
![Create an App ID](media/channels/fb-create-messenger-bot-app-id.png)
43+
44+
1. Go through the wizard steps.
45+
46+
1. Enter the required check information, then click the **Skip Quick Start** button in the upper right.
47+
48+
1. In the left pane of the next displayed window, expand *Settings* and click **Basic**.
3649

37-
![Create an App ID](~/media/channels/FB-CreateAppId.png)
50+
1. In the right pane, copy and save the **App ID** and **App Secret**.
3851

39-
* Copy and save the **App ID** and the **App Secret**.
52+
![Copy App ID and App Secret](media/channels/fb-messenger-bot-get-appid-secret.png)
4053

41-
![Save App ID and secret](~/media/channels/FB-get-appid.png)
54+
1. In the left pane, under *Settings*, click **Advanced**.
4255

43-
Set the "Allow API Access to App Settings" slider to "Yes".
56+
1. In the right pane, set **Allow API Access to App Settings** slider to **Yes**.
4457

45-
![App settings](~/media/bot-service-channel-connect-facebook/api_settings.png)
58+
![Copy App ID and App Secret](media/channels/fb-messenger-bot-api-settings.png)
59+
60+
1. In the page bottom right, click the **Save Changes** button.
4661

4762
### Enable messenger
4863

49-
Enable Facebook Messenger in the new Facebook App.
64+
1. In the left pane, click **Dashboard**.
65+
1. In the right pane, scroll down and in the **Messenger** box, click the **Set Up** button. The Messenger entry is displayed under the *PRODUCTS* section in the left pane.
5066

51-
![Enable messenger](~/media/channels/FB-AddMessaging1.png)
67+
![Enable messenger](media/channels/fb-messenger-bot-enable-messenger.png)
5268

5369
### Generate a Page Access Token
5470

55-
In the **Token Generation** panel of the Messenger section, select the target Page. A Page Access Token will be generated.
71+
1. In the left pane, under the Messenger entry, click **Settings**.
72+
1. In the right pane, scroll down and in the **Token Generation** section, select the target page.
5673

57-
* Copy and save the **Page Access Token**.
74+
![Enable messenger](media/channels/fb-messenger-bot-select-messenger-page.png)
5875

59-
![Generate token](~/media/channels/FB-generateToken.png)
76+
1. Click the **Edit Permissions** button to grant the app pages_messaging in order to generate an access token.
77+
1. Follow the wizard steps. In the last step accept the default settings and click the **Done** button. At the end a **page access token** is generated.
6078

61-
### Enable webhooks
79+
![Messenger permissions](media/channels/fb-messenger-bot-permissions.png)
6280

63-
Click **Set up Webhooks** to forward messaging events from Facebook Messenger to the bot.
81+
1. Copy and save the **Page Access Token**.
6482

65-
![Enable webhook](~/media/channels/FB-webhook.png)
83+
### Enable webhooks
6684

67-
### Provide webhook callback URL and verify token
85+
In order to send messages and other events from your bot to Facebook Messenger, you must enable webhooks integration. At this point, let's leave the Facebook setting steps pending; will come back to them.
6886

69-
In the [Azure portal](https://portal.azure.com/), open the bot, click the **Channels** tab, and then click **Facebook Messenger**.
87+
1. In your browser open a new window and navigate to the [Azure portal](https://portal.azure.com/).
7088

71-
* Copy the **Callback URL** and **Verify Token** values from the portal.
89+
1. In the Resource list, click on the bot resource registration and in the related blade click **Channels**.
7290

73-
![Copy values](~/media/channels/fb-callbackVerify.png)
91+
1. In the right pane, click the **Facebook** icon.
7492

75-
1. Return to Facebook Messenger and paste the **Callback URL** and **Verify Token** values.
93+
1. In the wizard enter the Facebook information stored in the previous steps. If the information is correct, at the bottom of the wizard, you should see the **callback URL** and the **verify token**. Copy and store them.
7694

77-
2. Under **Subscription Fields**, select *message\_deliveries*, *messages*, *messaging\_optins*, and *messaging\_postbacks*.
95+
![fb messenger channel config](media/channels/fb-messenger-bot-config-channel.PNG)
7896

79-
3. Click **Verify and Save**.
97+
1. Click the **Save** button.
8098

81-
![Configure webhook](~/media/channels/FB-webhookConfig.png)
8299

83-
4. Subscribe the webhook to the Facebook page.
100+
1. Let's go back to the Facebook settings. In the right pane, scroll down and in the **Webhooks** section, click the **Subscribe To Events** button. This is to forward messaging events from Facebook Messenger to the bot.
84101

85-
![Subscribe webhook](~/media/bot-service-channel-connect-facebook/subscribe-webhook.png)
102+
![Enable webhooks](media/channels/fb-messenger-bot-webhooks.PNG)
86103

104+
1. In the displayed dialog, enter the **Callback URL** and **Verify Token** values stored previously. Under **Subscription Fields**, select *message\_deliveries*, *messages*, *messaging\_optins*, and *messaging\_postbacks*.
87105

88-
### Provide Facebook credentials
106+
![Config webhooks](media/channels/fb-messenger-bot-config-webhooks.png)
89107

90-
In Azure portal, paste the **Facebook App ID**, **Facebook App Secret**, **Page ID**,and **Page Access Token** values copied from Facebook Messenger previously. You can use the same bot on multiple facebook pages by adding additional page ids and access tokens.
108+
1. Click the **Verify and Save** button.
109+
1. Select the Facebook page to subscribe the webhook. Click the **Subscribe** button.
91110

92-
![Enter credentials](~/media/channels/fb-credentials2.png)
111+
![Config webhooks page](media/channels/fb-messenger-bot-config-webhooks-page.PNG)
93112

94113
### Submit for review
95114

@@ -111,30 +130,25 @@ See the [Workplace Help Center](https://workplace.facebook.com/help/work/) to le
111130

112131
To configure a bot to communicate using Facebook Workplace, create a custom integration and connect the bot to it.
113132

114-
### Create a Facebook Workplace Premium account
115133

116-
Following the instructions [here](https://www.facebook.com/workplace) to create a Facebook Workplace Premium account and set yourself as the system administrator. Please keep in mind that only system administrator of a Workplace can create custom integrations.
134+
1. Create a Facebook Workplace Premium account. Follow the instructions [here](https://www.facebook.com/workplace) to create a Facebook Workplace Premium account and set yourself as the system administrator. Please keep in mind that only system administrator of a Workplace can create custom integrations.
117135

118-
### Create a custom integration
136+
1. Create a [custom integration](https://developers.facebook.com/docs/workplace/custom-integrations-new) for your Workplace following the steps described next. When you create a custom integration, an app with defined permissions and a page of type 'Bot' only visible within your Workplace community are created.
119137

120-
When you create a custom integration, an app with defined permissions and a page of type 'Bot' only visible within your Workplace community are created.
138+
1. In the **Admin Panel**, open the **Integrations** tab.
139+
1. Click on the **Create your own custom App** button.
121140

122-
Create a [custom integration](https://developers.facebook.com/docs/workplace/custom-integrations-new) for your Workplace following the steps below:
141+
![Workplace Integration](media/channels/fb-integration.png)
123142

124-
- In the **Admin Panel**, open the **Integrations** tab.
125-
- Click on the **Create your own custom App** button.
143+
1. Choose a display name and a profile picture for the app. Such information will be shared with the page of type 'Bot'.
144+
1. Set the **Allow API Access to App Settings** to "Yes".
145+
1. Copy and safely store the App ID, App Secret and App Token that's shown to you.
126146

127-
![Workplace Integration](~/media/channels/fb-integration.png)
147+
![Workplace Keys](media/channels/fb-keys.png)
128148

129-
- Choose a display name and a profile picture for the app. Such information will be shared with the page of type 'Bot'.
130-
- Set the **Allow API Access to App Settings** to "Yes".
131-
- Copy and safely store the App ID, App Secret and App Token that's shown to you.
149+
1. Now you have finished creating a custom integration. You can find the page of type 'Bot' in your Workplace community,as shown below.
132150

133-
![Workplace Keys](~/media/channels/fb-keys.png)
134-
135-
Now you have finished creating a custom integration. You can find the page of type 'Bot' in your Workplace community, as shown below.
136-
137-
![Workplace page](~/media/channels/fb-page.png)
151+
![Workplace page](media/channels/fb-page.png)
138152

139153
### Provide Facebook credentials
140154

@@ -150,12 +164,10 @@ Please refer to the **Connect a bot to Facebook Messenger** section for details.
150164

151165
If you receive a notification from Facebook about deprecation of a certain version of the Graph API, go to [Facebook developers page](https://developers.facebook.com). Navigate to your bot’s **App Settings** and go to **Settings > Advanced > Upgrade API version**, then switch **Upgrade All Calls** to 3.0.
152166

153-
![API version upgrade](~/media/channels/facebook-version-upgrade.png)
154-
155-
## Sample code
167+
![API version upgrade](media/channels/fb-version-upgrade.png)
156168

157-
For further reference the <a href="https://aka.ms/facebook-events" target="_blank">Facebook-events</a> sample bot can be used to explore the bot communication with Facebook Messenger.
169+
## See also
158170

159-
## Also available as an adapter
171+
- **Sample code**. Use the <a href="https://aka.ms/facebook-events" target="_blank">Facebook-events</a> sample bot to explore the bot communication with Facebook Messenger.
160172

161-
This channel is also [available as an adapter](https://botkit.ai/docs/v4/platforms/facebook.html). To help you choose between an adapter and a channel, see [Currently available adapters](bot-service-channel-additional-channels.md#currently-available-adapters).
173+
- **Available as an adapter**. This channel is also [available as an adapter](https://botkit.ai/docs/v4/platforms/facebook.html). To help you choose between an adapter and a channel, see [Currently available adapters](bot-service-channel-additional-channels.md#currently-available-adapters).
-30.4 KB
Binary file not shown.
-59.3 KB
Binary file not shown.
-44 KB
Binary file not shown.
-37.7 KB
Binary file not shown.
-15.5 KB
Binary file not shown.
-36.4 KB
Binary file not shown.
-67.3 KB
Binary file not shown.
-18.6 KB
Binary file not shown.
57.1 KB
Loading

0 commit comments

Comments
 (0)