メニュー

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Facebook Messenger クイックスタート

Facebookは最近、ユーザーへのメッセージの送信に使用できるAPIをMessengerで使用できるようにしました。 私たちはこの新しいエキサイティングなチャネルをNotify製品に追加し、すでにMessengerを使用している顧客へのリーチを容易にします。 その方法を見てみましょう。

Facebookページとアプリケーションを作成する

すでにFacebookページまたはアプリケーションをお持ちの場合、各ステップを飛ばせます。

The first things you need in order to send a notification is a Facebook page and an app. You can create a page in the top right corner of your Facebook profile.

新規Facebookページの作成

続いて、このページ用のアプリケーションを作成することが必要です。 Facebook Developer portalを開き、新規アプリケーションを作成するか、既存のアプリケーションを選択します。

新規Facebookアプリケーションの作成

Webサイトを選択し、右上隅のボタンをクリックして残りのクイックスタートを飛ばします

Facebookアプリケーションクイックスタートのスキップ

Take a note of your App ID, we will use it later.

FacebookアプリケーションID

続いて左側のサイドメニューからAdd productをクリックし、Messengerを選択することで、Messengerを製品としてアプリケーションに追加します。

Facebookアプリケーション製品の追加

Generate a Facebook access token by selecting your Facebook page in the Token Generation section.

Facebookアクセストークンの生成

Take note of your Access Token you will need it soon.

Add pages_messaging permission request to your submission. You do not need to submit your app for review but you do need to add this request to your configuration.

pages_messaging権限の追加

Facebookのセットアップについては、今のところはこれでおしまいです。 Twilioに移動し、そちらのセットアップを続けましょう。

Facebook Messengerの構成を作成する

Open the Channels Catalog in the Twilio Console.

Select Facebook Messenger.

Click Install.

Click Install

Agree to the Terms and Conditions.

Under Credentials Select the Facebook page you want to use from the drop down menu. If you do not see your facebook page that you just created, click the Logout button on the Console page to logout Twilio from Facebook and then log back in again to Facebook.

ページを選択

Click Save at the bottom of the page and you have connected your Twilio account to Facebook Messenger.

Notifyサービスを作成する

コンソールでは、Notifyサービスを作成します。 SIDを書き留めておいてください! 後ほどコードの記述を始める際に使用します(ご心配なく、このあとすぐ行います)。

Twilioコンソール - Notifyサービスの作成

サービスの作成時にはこれをメッセージを送信できるよう構成したFacebookページで使用できるよう構成し、保存します。

Notifyサービスの構成

これで、コードを記述する準備が整いました。

ユーザー登録用のWebページを作成する

We will create a single webpage that will have the Send to Messenger button on it. When the user clicks the button Facebook will call a webhook of ours and we will create a Binding in Notify to store the user id of the user. This is one of the many ways to acquire user consent for sending Facebook messages.

A Binding is a combination of a user and device that can receive a notification. For Messenger notifications, all you'll need is a user's user id to create a binding for them.

Important note: If your app is not yet approved for using Messenger (most probably the case) then you will need to be logged in to Facebook and be an admin, developer or tester of the app to see the button.

手早く始めるためこれを行うNode.jsアプリケーションを作成しました。

ソースコードは、GitHub でも参照できます。

Unzip the app you just downloaded, and navigate to that folder in a Terminal window on your Mac. You'll need to install Node.js if you haven't already, you can do that here. Now, we just need to configure and run the app. In the terminal, copy the .env.example file to .env. Edit the .env file to include your configuration parameters: - Twilio Account SID and Auth token can be found in the Twilio console. - Twilio Notify Service SID can also be found in the console.

さらにpublic/notify/facebook-messenger.htmlファイルにご自身のアプリケーションIDとページIDを入力することが必要です。

// You can find your app id in the Facebook Developer console
// The easiest way to find your page id is by looking in the Twilio console
// https://www.twilio.com/console/sms/settings

FB.init({
  appId: "<YOUR-APP-ID>",
  xfbml: true,
  cookie: true,
  version: "v2.8"
});
<div class="fb-send-to-messenger"
  messenger_app_id="<YOUR-APP-ID>"
  page_id="<YOUR-PAGE-ID>"
  color="blue"
  size="standard">
</div>

次に、依存関係をインストールします。

npm install

それが終わると、サーバーを開始できるようになります。再びターミナルで、次のコマンドを実行します。

npm start

サーバーが動作していることを確認するには、ウェブブラウザで http://localhost:3000 にアクセスします。サーバーが動作していることを示す簡単なメッセージが表示されるはずです。

しかし、Facebookがサービスを検証できるようにするには、それをインターネット上で利用できるようにすることが必要になります。 これには、ngrokを使用することをおすすめします。

Facebookアプリケーションの構成を完了させる

サーバーの準備が整ったので、Webhookの呼び先としてこのサーバーを追加し、Facebookアプリケーションの講師を完了させましょう。

Webhookをセットアップして、Facebook Messengerの登録を済ませましょう。

先に生成したアクセストークンをクリップボードにコピーします。

Setup Webhooksをクリックし、フォームの入力を完了させます。

アクセストークンをVerify Tokenフィールドにペーストします。

コールバックURLには"<あなたのサーバー>/messenger_auth" を使用します。

"messaging_iptions"を選択し、Verify and Saveをクリックします。

FacebookのWebhookのセットアップ

最後に、作成したページへの新規Webhookを購読していることを確認します。

ページへのFacebook Webhookを購読する

これで、Facebook Messengerメッセージの受信のためのユーザーの承諾を収集する新しいWebサイトをテストする準備が整いました。

Open https://<YOUR SERVER>/notify/facebook_messenger.html in your favourite browser and click Send to Messenger.

You should see in your server's logs the webhook request from Facebook and the Binding resource created in Twilio. Take note of the identity attribute of the Binding. You can use that to send notifications to it. In the sample app we have set it up so that it uses the Facebook user's id. Please do not use any personal information (such as name, email address, phone number) for the user identity in your application.

バインディングの用意ができたので、あとは通知を送信するだけです!

通知を送信する

To send a notification we simply make a request to the Twilio Notify REST API with the content of the notification we wish to send and the identity. In our case this is the id of the Facebook Messenger user we want to target. No database queries or state management on our end - w00t!

You can use the /notify/ page in the web application to send a message to this user. Just use the numeric Facebook messenger user id as the identity in the text box. To get that id, check the logs of your server application, it will be part of the binding.

You will get a Facebook messenger notification from your page with the hardcoded 'Hello World!' message!

できましたね!ここからはあなたがご自身のアプリを作る番です。

ひとくちメモ

There are other ways you can use to acquire a user id, like by receiving a message first from a user. Check out Facebook's guide on entry points to learn more.

Also there are few terms and conditions you need to adhere when engaging users via Facebook Messenger. Please, check out the platform policy before submitting your application for review.

Finally, there's much more you can do with Notify, like alerting users on different kinds of devices or notifying a segment of your users in a single API call.

Rate this page:

ヘルプが必要ですか?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.