【Cocoon】ブログにYouTubeのチャンネル登録みたいな「新着通知ボタン」を設置する一番簡単な方法
YouTubeには「チャンネル登録」がありますよね。
気になるチャンネルを登録しておけば、新しい動画が公開されたときに通知が届きます。
「これ、ブログでもできないの？」
と思って調べてみたところ、WordPressブログでもかなり近いことができました。
今回「ねろぶろ」に設置したのが、
🔔 ねろぶろの新着記事の通知を受け取る
というボタンです。
読者がこのボタンから通知を許可すると、新しい記事を公開したときにブラウザへ通知を届けられるようになります。
この記事では、OneSignalとWordPressテーマ「Cocoon」を使って、登録からボタン設置までを「次にどこを押すのか」が分かるように画像付きで順番に紹介します。
- まずOneSignalに登録する
- WordPressを選択してブログを登録する
- WordPressにOneSignalプラグインを入れる
- App IDはどこ？OneSignalの設定画面から確認する
- REST API Keyはどこ？同じ画面から作成する
- App IDとREST API KeyをWordPressに貼り付ける
- 新しい記事を公開したときだけ自動通知する
- OneSignalで「カスタムリンク」を作る
- ボタンの文章と色を変更する
- カスタムリンクのHTMLコードをコピーする
- Cocoonの「投稿本文下」を開く
- 「カスタムHTML」を投稿本文下に追加する
- OneSignalのコードを貼り付ける
- 本当にボタンが表示されたか確認する
- 実際に通知登録してみる
- ブラウザの通知を「許可」する
- 完成！新しい記事を公開すると通知できる
- まとめ｜Cocoonに新着通知ボタンを設置できた！
まずOneSignalに登録する
今回使うのは**OneSignal（ワンシグナル）**というサービスです。
まずはこちらからOneSignalを開きます。
アカウントを作成してログインしたら、Web Pushを設定していきます。
WordPressを選択してブログを登録する
OneSignalの設定を進めると、どの方法でWeb Pushを利用するか選択する画面が表示されます。
ここでは、
「WordPressプラグインまたはウェブサイトビルダー」
を選択します。
続いて、
「WordPress」
を選択してください。
サイト情報には、自分のブログの情報を入力します。
ねろぶろの場合は、
サイト名：neroblo
サイトURL：https://neroblo.com
と入力しました。
入力できたら次へ進みます。
WordPressにOneSignalプラグインを入れる
次にWordPress側の準備をします。
WordPress管理画面を開いて、
「プラグイン」→「新規プラグインを追加」
と進みます。
検索欄に、
OneSignal
と入力してください。
表示されたOneSignalのプラグインを、
「今すぐインストール」→「有効化」
します。
これでWordPress側にOneSignalの設定画面が追加されます。
App IDはどこ？OneSignalの設定画面から確認する
ここが少し分かりにくいところです。
WordPressとOneSignalを接続するには、
「OneSignal App ID」
と
「REST API Key」
の2つが必要です。
まずOneSignalにログインして、今回作成したブログのアプリを開きます。
左側メニューから、
「Settings（設定）」
をクリックします。
そこから**Keys & IDs（キーとID）**の画面を開きます。
すると、
OneSignal App ID
が表示されます。
App IDの横にあるコピーボタンを押せばコピーできます。
まだWordPressには貼り付けず、そのままこの画面を開いておいてもOKです。
REST API Keyはどこ？同じ画面から作成する
次に必要なのが、
REST API Key
です。
ここはApp IDより少し分かりにくいです。
先ほど開いたOneSignalのKeys & IDs画面で、REST API Keyの項目を探します。
まだキーを作っていない場合は、REST API Keyを作成するボタンをクリックします。
キーの名前を入力する画面が表示されたら、分かりやすい名前を付けて作成します。
たとえば、
WordPress
などでOKです。
作成するとREST API Keyが表示されます。
App IDとREST API KeyをWordPressに貼り付ける
ここまでできたらWordPressへ戻ります。
WordPress管理画面からOneSignalの設定画面を開きます。
すると、
OneSignal App ID
OneSignal REST API Key
を入力する欄があります。
先ほどOneSignalでコピーしたものを、それぞれ対応する場所へ貼り付けます。
App ID → OneSignal App ID
REST API Key → OneSignal REST API Key
です。
間違えて逆に貼らないようにしてください。
入力できたら**「変更を保存」**をクリックします。
これでWordPressとOneSignalが接続されます。
新しい記事を公開したときだけ自動通知する
続いてWordPressのOneSignal設定画面で、自動通知を設定します。
探す項目は、
Automatically send notifications when a post is published
です。
これをONにします。
意味は、
「新しい投稿を公開したら自動で通知する」
です。
その下にある、
Automatically send notifications when a post is updated
は、僕はOFFにしています。
これをONにすると、過去の記事を修正しただけでも通知が送られる可能性があるためです。
ねろぶろでは、
新規公開＝ON
記事更新＝OFF
にしました。
OneSignalで「カスタムリンク」を作る
ここまでできたら、いよいよ読者が押すボタンを作ります。
OneSignalの管理画面へ戻り、Web Pushの許可プロンプト設定を開きます。
ここで、
「カスタムリンク」
を選択します。
この機能を使うことで、ブログ内に、
🔔 新着記事の通知を受け取る
というボタンを設置できます。
ボタンの文章と色を変更する
「カスタムリンク」を開くと、ボタンの文章やデザインを変更できます。
ねろぶろでは次のようにしました。
購読本文
🔔 ねろぶろの新着記事の通知を受け取る
説明
ねろぶろが新しい記事を公開したらお知らせします！
ボタンは目立つように黄色です。
ボタン色：#FFD400
文字色：#222222
また、
「登録解除を許可する」
にもチェックを入れています。
解除時は、
🔕 ねろぶろの新着記事の通知を解除する
と表示されるようにしました。
カスタムリンクのHTMLコードをコピーする
設定画面を下に進むと、ブログにボタンを表示するためのHTMLコードが表示されます。
コピーするのはこれです。
<div class="onesignal-customlink-container"></div>これだけなので簡単です。
Cocoonの「投稿本文下」を開く
ここからはWordPressの設定です。
WordPress管理画面から、
「外観」→「ウィジェット」
を開きます。
Cocoonには「投稿本文上」「投稿本文中」「投稿本文下」などがあります。
今回は、
「投稿本文下」
を使います。
これを使うことで、毎回記事にコードを貼らなくても、記事の最後に通知ボタンを表示できます。
「カスタムHTML」を投稿本文下に追加する
「利用できるウィジェット」から、
「カスタムHTML」
を探します。
カスタムHTMLを選択して、表示場所を、
「投稿本文下」
にします。
「ウィジェットを追加」をクリックしてください。
OneSignalのコードを貼り付ける
追加された「カスタムHTML」を開きます。
タイトルは空欄で大丈夫です。
「内容」に先ほどコピーした、
<div class="onesignal-customlink-container"></div>を貼り付けます。
最後に**「保存」**をクリックします。
これで設置は完了です。
本当にボタンが表示されたか確認する
自分のブログの記事を開いて、一番下までスクロールします。
設定できていれば、
ねろぶろが新しい記事を公開したらお知らせします！
という説明の下に、
🔔 ねろぶろの新着記事の通知を受け取る
という黄色いボタンが表示されます。
ここまで表示されれば成功です。
実際に通知登録してみる
設置しただけではなく、実際に自分でボタンを押して確認してみましょう。
黄色い、
「🔔 ねろぶろの新着記事の通知を受け取る」
をクリックします。
ブラウザの通知を「許可」する
ボタンを押すと、ブラウザから通知を許可するか確認されます。
ここで**「許可」**を選択します。
これで、そのブラウザが新着通知を受け取れる状態になります。
※ブラウザや端末によって表示や対応状況が異なる場合があります。
完成！新しい記事を公開すると通知できる
これで完成です。
今後はWordPressで新しい記事を公開すると、通知を登録してくれた読者へWebプッシュ通知を届けられるようになります。
しかもCocoonの「投稿本文下」に設置しているので、新しい記事を書くたびに通知ボタンを貼り付ける必要はありません。
YouTubeのチャンネル登録とは仕組みが違いますが、
「このブログ気になる！」
↓
「新着通知を登録」
↓
「次の記事が公開されたら通知」
という流れを作れるのがポイントです。
まとめ｜Cocoonに新着通知ボタンを設置できた！
今回はOneSignalを使って、Cocoonの記事下に**「新着記事の通知を受け取る」ボタン**を設置する方法を紹介しました。
最初は少し難しそうに見えますが、
OneSignalに登録 → App IDとREST API Keyを取得 → WordPressと連携 → カスタムリンクを作成 → Cocoonの投稿本文下に設置
という順番で進めればOKです。
特に分かりにくいのが、App IDとREST API Keyの場所。
この記事では取得する場所からWordPressへ貼り付けるところまで画像付きで紹介しているので、上から順番に進めてみてください。
一度設定してしまえば、毎回記事にボタンを貼り付ける必要はありません。
新しい記事を公開したときに、通知を登録してくれた読者へお知らせできるようになります。
YouTubeの「チャンネル登録」のように、一度ブログを訪れてくれた読者に、また記事を読んでもらうきっかけを作りたい人は試してみてください。
コメント