Komunitas

Cara Memasang Push Notification Pada Blog/Website

Hai, selamat datang di andri.sipil.id! 🙂 kali ini saya memberikan sebuah tutorial Cara Memasang Push Notification Pada Blog/Website agar blog selalu ramai dikunjungi. 😀

Apa itu Push Notification?

Push Notification merupakan cara untuk memberitahukan pada user untuk pesan baru walaupun user tersebut detang tidak aktif menggunakan aplikasi kamu. Pada website atau blog Push Notification yaitu cara memberikan pesan atau pemberitahuan kepada pengguna/penggemar blog berupa update artikel baru atau pemberitahuan seputar pengumuman website atau sebuah iklan.notification cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website notification

Push Notification tidak hanya tersedia pada android, web browser seperti chrome dan mozilla pada dekstop PC juga bisa diterapkan, seperti halnya facebook.com yang baru-baru ini (pada 2015 kemarin) menyediakan fitur Push Notification pada pemberitahuan pengguna, sehingga walaupun si pengguna facebook tidak sedang membuka halaman facebook dapat menerima pemberitahuan dari Push Notification yang muncul pada dekstop mereka ketika terkoneksi internet.contoh cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1080

Nah bagus kan buat menggaet pengunjung suatu blog? saya juga telah memasang pada blog dari blogger, kamu dapat mencoba atau sekedar melihat-lihat di www.kegunaan.id untuk itu ayo kita pasang Push Notification pada blog atau website sobat Andri’s Blog. 🙂

DEMO

Bagaimana cara memasang pada blog atau sebuah website?

Petama bismillah {dulu} biar tidak ada kendala ya.. 🙂 lalu ikuti cara berikut ini sob:

1# Membuat Aplikasi google:

  1. Daftar dan buat sebuah project di google {dulu} disini https://console.developers.google.com/apis/ 1 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1065
  2. Buka Mobile APIs > Google Cloud Messaging 2 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1066
  3. Lalu hidupkan (enable) API Google Cloud Messaging 3 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1067
  4. Setelah API Google Cloud Messaging hidup klik “Credentials” pada sidebar kiri lalu buat sebuah literasi dengan klik “Create Credentials” Setelah itu pilih “API key4 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1068
  5. Lalu pilih “Server Key” setelah itu muncul seperti gambar dibawah. Biarkan seperti gambar lalu klik “Create” 4r cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1069
  6. Setelah itu otomatis akan muncul kode API yang kita butuhkan. Jangan di tutup {dulu} jendela/Tab karena API key ini untu form pada tahap seting app onesignal.5 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1070

2# Daftar dan membuat Aplikasi kembali di onesignal.com

  1. Silahkan sobat daftar di onesignal klik disini  lalu verifikasi email dan login.
  2. Buat sebuah aplikasi dengan mengklik “Add a new app” pada dashboar pengguna onesignal.1 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1071
  3. Berikan nama aplikasi, gunakan nama atau judul website saja.2 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1072
  4. Pada tab “Select platform” silahkan sobat pilih platform “Website Push” karena untuk membuat push notification.3 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1073
  5. Setting Platform sesuaikan dengan data blog atau wbsite sobat. berikut ini setingan dari blog kegunaan.id4 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 10745 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1075
  6. Isikan “Google Server API Key” dengan API google yang sobat buat tahap 1.
  7. Pada “Default Notification Icon URL” gunakan gambar ikon notifikasi diwajibkan menggunakan alamat dengan “https://” saya sudah sediakan  https://2.bp.blogspot.com/-QWdA1SL0iWU/Vyy9YvHgmkI/AAAAAAAAALc/TBS1SAW2BFEDvvdQWTF0TUmAlPY8_5ytQCLcB/s1600/notiandreet.png
  8. Isikan “Choose subdomain” seduai judul/domain blog sobat.
  9. Isikan “Google Project Number” caranya sebagai berikut:
    • Buka project pada tahap pertama
    • Klik bilah navigasi pojok kiri atas lalu pilih > IAM ADMIN > SETTING6 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website cara memasang push notification pada blogwebsite 1076
    • Salin ID project number.
    • Isikan pada seting app one signal lalu klik “Next
  10. Setting app one signal selesai maka sobat akan mendapatkan “App ID” untuk ditambahkan pada setingan blog/website.
  11. Selanjutnya kita test sebagai verifikasi website/blog pada tahap 3. Tab seting onesignalnya jangan ditutup {dulu}.

3# Setting Template/Backend blog atau website sobat

Pada tutorial kali ini saya menggunakan blogger. namun cara ini juga sama dengan cara blog detik atau sejenis blogger dan detik.

1.Buka blogger tambahkan dan edit kode dibawah ini diatas close tag head </head> lalu simpan

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
// setting by andriyansyah andri.sipil.id
 <script>
 var OneSignal = OneSignal || [];
 OneSignal.push(["init", {
 appId: "ISIKAN APP ID ONESIGNAL SOBAT",
 subdomainName: 'ISIKAN DENGAN SUBDOMAIN APP ONESIGNAL SOBAT', 
 autoRegister: true,
 notifyButton: {
 enable: true, 
 size: 'medium', // ukuran icon notifikasi 'small', 'medium', atau 'large'
 position: 'bottom-left', // pilih salah satu 'bottom-left' atau 'bottom-right'
 offset: {
 bottom: '10px',
 left: '10px', // gunakan jika sebelah kiri (left)
 right: '0px' // gunakan jika sebelah kanan (right)
 },
 },
 prenotify: true, // Show an icon with 1 unread message for first-time site visitors
 showCredit: false, // Hide the OneSignal logo
 text: {
 'tip.state.unsubscribed': 'Hidupkan update pemberitahuan',
 'tip.state.subscribed': "Anda berlangganan update",
 'tip.state.blocked': "Anda memblokir pemberitahuan",
 'message.prenotify': 'Click to subscribe to notifications',
 'message.action.subscribed': "Trimakasih telah berlangganan!",
 'message.action.resubscribed': "Anda telah berlangganan pemberitahuan",
 'message.action.unsubscribed': "Anda tidak akan mendapatkan pemberitahuan lagi",
 'dialog.main.title': '{Atur} Pemberitahuan Website',
 'dialog.main.button.subscribe': 'DAPATKAN PEMBERITAHUAN',
 'dialog.main.button.unsubscribe': 'LAIN KALI :(',
 'dialog.blocked.title': 'Nyalakan Pemberitahuan',
 'dialog.blocked.message': "Ikuti petunjuk untuk menyalakan pemberitahuan:"
 }
}]);
 </script>

2. Setelah kode diatas ditambahkan dan disimpan sobat tes “push notification” dengan cara menjadi orang pertama yang berlangganan pemberitahuan. buka  halaman depan blog lalu klik icon “Push Notification” lalu subcribe (berlangganan)

3. Setelah berhasil berlangganan. buka kembali tab seting OneSignal lalu klik “Cek Subcribed Users

4. Cek status Notifikasi > klik “Check Notification Status” lalu ikuti langkah-langkah hingga klik “send” dan klik notofikasi yang muncul pada web browser sobat. jika berhasil maka akan menuju tab sepeti berikut9 cara memasang push notification pada blog/website Cara Memasang Push Notification Pada Blog/Website 9 300x134

5. Selesai! 🙂 Alhamdulillah.

Sekian tutorial Cara Memasang Push Notification Pada Blog/Website. Sebenarnya masih banyak cara yang lain. namun ini yang lebih simpel untuk sebuah blog pada pihak ketiga seperti blogger dan sejenisnya.

Ayo hidupkan notifikasi agar mendapatkan tutorial dan update menarik lainnya. Semoga bermanfaat 🙂

Tags
Show More

Related Articles

Back to top button
Close