10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

13,205,190
Sign up formembers (58,515
our free online)
weekly Web Developer Newsletter. Sign in

Search for articles, questions, tips

articles Q&A forums lounge

Creating A Facebook Bot Using Microsoft Bot Framework

defwebserver, 2 Jul 2016

5.00 (14 votes) Rate this:

You can easily create a Bot and deploy it on Facebook.

Download HelloWorldBot.zip - 5.1 MB

You can easily create a Bot and deploy it on Facebook.

To do this, we will use the Microsoft Bot Framework that contains the following components:

Bot Connector A service that connects your bot to communication channels such as Facebook, Skype, and email.
Bot Builder A C# and Node.js library that provides a powerful framework for constructing bots that can handle freeform and guided interactions.
Bot Directory A directory of Bots that you can connect to.

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 1/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

The Bot Connector helps you connect your Bot to communication channels. You can write a Bot and expose the Microsoft Bot Framework-compatible API on the internet.

The BotConnector will forward messages to users, and will send the user messages back to your Bot.

To demonstrate this, we will start with the Bot created in the article: Creating a Hello World! Bot Using The Microsoft Bot Framework.

Set-Up Facebook

The first step is to log into your Facebook.com account (or create one).

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 2/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject
Select Create Page.

Select a template, fill in the required information, and click Get Started.

To get the Facebook Page ID (that you will need later), click on the About tab

and you will find the Facebook Page ID.

Create A Facebook Developer Account

Go to: https://developers.facebook.com/docs/apps/register and click the button to create a Facebook developer account.

Click the slider to Yes to accept the Policy and click Register.

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 3/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

Create A Facebook App

Next, go to: https://developers.facebook.com/ (log in again if needed).

Select Add a New App.

Select basic setup.

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 4/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

Fill in the information and click Create App ID.

Make a note of the App ID, you will need it in a later step.

Click the Show button to display the App Secret. Make a note of it, you will need it in a later step.

Now that the App is created, you need to configure it to use the Facebook Messenger.

Click Add Product.

Select Messenger.

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 5/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

Select Get Started.

Facebook Messenger has been added.

You now need to configure it to talk to the Microsoft Bot Connector.

Configure The Callback Url and Verify Token

Go to: https://dev.botframework.com/ and Sign In.

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 6/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

Select My bots.

Select a published bot you created using the directions in the article: Creating a Hello World! Bot Using The Microsoft Bot Framework.

Click the Add button next to the Facebook Messenger channel.

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 7/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

Click the expander next to Set webhook callback url and verify token.

Use the Select buttons to individually select and copy the Callback Url and Verify Token.

Return to: https://developers.facebook.com, select your application, and in the settings for Messenger, click the Setup Webhooks button.

Enter the Callback Url and Verify Token your copied, check the Subscription fields indicated in the image above, and click the Verify and Save button.

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 8/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

After the Webhooks have been set, click the dropdown next to Select a Page.

Select the Facebook page you created earlier.

Next, click the Subscribe button.

Get Page Token

In the Token Generation section, select the page that you previously created.

A Page Access Token will be created.

Copy the Page Access Token.

Configure The Microsoft Bot Connector

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 9/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

Return to: https://dev.botframework.com/ and select your Bot again, then click the Edit button next to the Facebook Messenger channel.

Click the expander next to Enter your credentials.

Enter the information you gathered in the earlier steps and click the Resubmit button.

Check the box next to Enable this bot on Facebook Messenger.

Click the Im done configuring Facebook Messenger button.

Talking To Your Bot

You can now talk to your Bot by navigating to:

https://www.messenger.com/t/{Your Page ID}/

This will take you to a Facebook Messenger, and after logging in with your Facebook ID, it will allow you to converse with your Bot.

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 10/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

Until your App is approved and made public, only you can chat with your Bot.

To create test accounts to test it, go to: https://developers.facebook.com/, select the App, and then select Roles and then Test Users.

Fill in the form that displays to create test users.

To allow real Facebook users to test it, select Roles and then Add Testers.

Fill in the form that displays to allow access for the users.

To make the Bot public, select App Review then click the slider to change it from No to Yes.

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 11/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

To request the needed permissions, select Settings under Messenger then click the Request Permissions button.

Select pages_messaging and then click the Add 1 Item button.

See this page for more information on the App review process:

https://developers.facebook.com/docs/messenger-platform/app-review

Links

Creating a Hello World! Bot Using The Microsoft Bot Framework

Create An Intelligent Web Application Conversation Using LUIS And Dialogs

Creating Intelligent Web Applications With LUIS

Microsoft Bot Framework

Configuring Channels

Facebook for developers

Messenger Platform

Facebook Messenger (Stack Overflow)

Microsoft Bot Framework messages with buttons in Facebook Messenger

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 12/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject

License
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share
TWITTER FACEBOOK

About the Author

defwebserver
Michael Washington is a Microsoft MVP. He is a ASP.NET and
Software Developer (Senior) http://ADefWebserver.com
C# programmer.
United States He is the founder of
AiHelpWebsite.com,
LightSwitchHelpWebsite.com, and
HoloLensHelpWebsite.com.

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:

An Introduction to
the Microsoft Bot Framework
Creating HTML 5 Websites and Cloud Business
Apps Using LightSwitch In Visual Studio 2013-2015

You may also be interested in...

Designing For DevOps A Solution Blueprint for DevOps

An Introduction to the Microsoft Bot Framework SAPrefs - Netscape-like Preferences Dialog

Evolution of Microsoft Bot Framework Window Tabs (WndTabs) Add-In for DevStudio

Comments and Discussions

You must Sign In to use this message board.

Search Comments

First Prev Next

Messenger platform webhooks 6

Saurabh.abhyankar 8-Mar-17 15:15
connecting to a remote bot 2
chint.99 2-Feb-17 2:50
pages_messaging permission? 2
Brian Colavito 30-Nov-16 11:11
Facebook webhooks 3
stuartdunkeld 9-Nov-16 1:36

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 13/14
10/25/2017 Creating A Facebook Bot Using Microsoft Bot Framework - CodeProject
Replies from bot 13
atulonweb@gmail.com 29-Sep-16 4:19
I'll try 2
XavierRossignol 3-Jul-16 4:31

Refresh 1

General News Suggestion Question Bug Answer Joke Praise Rant Admin

Permalink | Advertise | Privacy | Terms of Use | Mobile Layout: fixed | fluid Article Copyright 2016 by defwebserver
Select Language
Web03 | 2.8.171020.1 | Last Updated 2 Jul 2016 Everything else Copyright CodeProject, 1999-2017

https://www.codeproject.com/Articles/1110201/Creating-A-Facebook-Bot-Using-Microsoft-Bot-Framew 14/14