[For Beginners] A Facebook Bot Tutorial

Interested in building your first Facebook Bot? Let’s get started!

Facebook Bot source code is now available on GitHub.

Introduction:
Facebook Bot is an automated software program that is designed to chat with human through the Facebook Messenger Platform. The responses from Facebook Bot can be instant and Natural Language-based.

In this tutorial, you will create a “HelloWorld” Facebook Bot to echo the guest’s input. You can have a taste on building AI chatbot from this tutorial.

Tools:

  • IntelliJ is an IDE for developing computer software (Or you can use other free text editor)
  • Node Package Manager (npm) is a common JS library and package manager
  • ngrok is a tunneling software that makes localhost run online

Requirements:

  • Create an account on IntelliJ
  • Create an account on Facebook

Let’s get started!
Here’s the flow of the system.

Step 1: Create a New Facebook Page

We will build our Chatbot on a Facebook Page. Thus, create a Facebook Page first!

  • Log in your Facebook Account.
  • Click the dropdown menu on the top right hand corner.
  • Click Create Page to create a new page and choose Company, Organization or Institution.
  • In the Choose a Category dropdown menu, select Education.
  • Fill in the Company Name with “TestBot” and then click Get Started.
  • Now the “TestBot” Page is created.
  • Create a message button by Learn More and then you will see a “Add a button to your Page” window.
  • Click the Get in Touch and select Send Message. Then turn on Turn on Instant Replies.
  • Fill in the text box with any message such as “Hello, this is TestBot! How can I help you?”
  • Click Add Button. Then you will see a “Send Message” button on the right hand side.
  • Hover on “Send Message” button, and then select Test Button.
  • Now you will see the Page’s Inbox on the bottom bar.

Step 2: Create a Facebook Developer Account

We use Facebook Developer as a channel to direct the message from Facebook to our chatbot (build it later). Therefore, we need to connect our Facebook Page with Facebook for Developer.

  • Get Started with your Facebook Account.
  • Click Create App ID
  • Set the Display Name as “Hello World” and choose Apps for Messenger on Category.
  • After you logged in your account, select Messenger on the left menu.
  • Find the “Token Generation” section, select TestBot on Page, and connect to Facebook account again.
  • Then you can get your “Page Access Token”. Keep it for later usage.
  • Next, click “App Review” on the left menu. Choose Yes on “Make Hello World public?” .

Step 3: Add Plugin on IntelliJ
Now we move to IntelliJ to construct our chatbot to echo the guest’s input.

  • Open cmd to create folders.
mkdir helloworld
cd helloworld
mkdir bot
cd bot
mkdir src
  • Open the helloworld folder in IntelliJ.
  • Alt+f12 to open a terminal on IntelliJ.
cd bot/src
npm init --yes
npm install fb-bot-framework --save
npm install express --save

More information on fb-bot-framework plugin. https://www.npmjs.com/package/fb-bot-framework

  • Right click src to add an index.js file.
  • Copy below code to index.js
var express = require(‘express’);
var app = express();
var FBBotFramework = require(‘fb-bot-framework’);
// Initialize
var bot = new FBBotFramework({
page_token: “THIS_IS_PAGE_TOKEN”,
verify_token: “THIS_IS_VERIFY_TOKEN”
});
// Setup Express middleware for /webhook
app.use(‘/webhook’, bot.middleware());
// Setup listener for incoming messages
bot.on(‘message’, function(userId, message){
bot.sendTextMessage(userId, “Echo Message: “ + message);
});
app.get(“/”, function (req, res){
res.send(“hello world”);
});
//Make Express listening
app.listen(3000);

Step 4: Transform localhost into https URL

When the Facebook Bot receives a message, it will be sent to the server running on the endpoint url specified on index.js. However, the server will run locally (no URL). Therefore, you will use ngrok which make a local server run online.

  • Download ngrok from https://ngrok.com/
  • Extract the zip file ngrok-stable-windows-amd64.zip and execute ngrok.exe to open a ngrok terminal.
  • (On Linux or OSX) you may need to unzip ngrok from a terminal with the following command.
$ unzip /path/to/ngrok.zip
  • To get a https URL.
./ngrok http 3000
  • Copy the https URL.

Step 5: Create the Facebook Bot

Now, we have enough tokens for Facebook Developer to make connection between Facebook Page and the Chatbot. Just fill in the information!

  • Copy the page access token and create the verify token to index.js
  • Open the terminal in IntelliJ and run index.js
node index.js
  • Return to the facebook developer website.
  • Select the Messenger from the left bar.
  • Find the “Webhooks” section and click Setup Webhooks.
  • In the “New Page Subscription” window, Paste the https URL on the Callback URL and add /webhook at the back. Tick the box of messages, messaging_postback and messaging_optins.
  • Click Verify and Save and the window would be closed.
  • Return to “Webhooks” Section, select TestBot on Select a Page and click Subscribe.
  • The Facebook Bot is done.
  • Return to your “TestBot” Facebook page, open the page’s Inbox.
  • When you send a “Hello” message, the page will echo your message as “Echo Message: Hello”.

Congratulations! You have made your own Facebook Bot!

Open Source Project

Our Facebook Bot is striving for further improvement from each of your generous contributions. Please join GitHub project to bring this project further.