[For Beginners] Download FREE Facebook Bot Plus Tutorial

  • Not a member? Join right now and get FREE ACCESS to all private sections on this forum.
    (offer ends in 7hrs 15mins)
    BlackHatNaija Countdown Timer

    “BlackHatNaija-Register
Web Hosting

Bitcoin

Active member
Dec 22, 2017
656
82
28
#1


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-frameworkplugin. 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 ngrok - secure introspectable tunnels to localhost
  • 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 developerwebsite.
  • 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!
 

Our Facebook