WordPress OneSignal eklentisi ile ziyaretçilerinize anında bildirimler iletebilirsiniz

OneSignal eklentisi kullanımı, kurulumu ile anında bildirim alın

Sitenizi takip eden ziyaretçilerinizin sitenizde yer alan yeni gelişmelerden, haberlerden anında bilgi sahibi olması için OneSignal wordpress eklentisi işinize yarayacaktır. Bu yazımızda size WordPress OneSignal eklentisi ile ziyaretçilerinize  anında bildirimler iletmeyi anlatacağız.

Öncelikle yapmamız gereken https://console.developers.google.com/apis/library?project=decisive-light-131618&hl=TR linkine tıklayarak gelen ekrana giriş yapmak. Eğer üyeliğiniz varsa giriş yapınız, üyeliğiniz yoksa kaydolunuz. Üye girişi yaptıktan sonra;

Aşama 1:

Aşağıdaki resimde görüldüğü yere tıklayın açılan küçük pencerede Creata a project… yazan yere tıklıyoruz.

onesignal

OneSignal

 

Aşama 2:

Açılan pencerede Project name yazan yere ilgili projenizle ilgili Türkçe karakter kullanmadan ve boşluk bırakmadan bir şeyler yazın. Örneğin Deneme, Örneğin OneSignalWebSitem  Project name kısmına yazdıktan sonra Creata tıklayınız. Tıkladıktan sonra birkaç saniye içerisinde sayfa değişecektir.

eklenti

Eklenti

Aşama 3:

Sayfanız kendiliğinden yenilendikten sonra gelen ekranda sağ üst köşede okla işaretlediğimiz yerde proje isminizi göreceksiniz. Eğer gözükmüyorsa oradan projenizi seçiniz. Proje isminizin gözüktüğü sayfada aşağılarda kutucukla işaretleyip okla gösterdiğimiz yere Google Cloud Messaging tıklayınız.

OneSignal Eklenti

OneSignal Eklenti

Aşama 4:

Gelen sayfada kutucukla işaretlediğimiz yer olan Enable yazan yere tıklayınız. Tıkladıktan sonra orası Disable olacaktır.

OneSignal Eklentisi

OneSignal Eklentisi

Aşama 5-6:

Hemen sol taraftaki menüde Credentials yazan yere tıklayınız. Tıkladıktan sonra gelen pencerede önce Create Credentials butonuna sonra açılan menüden Api Key modülüne tıklayınız. Daha sonra gelen uzun kutucuktan Server Key yazan yere tıklayınız.

One Signal

 

One Signal

Screenshot7

 

One Signal Eklenti

Aşama 7-8:

Gelen sayfada Name kısmına bir isim yazın örneğin DenemeWebSitem. Altında bulunan Accept requests from these server IP addresses kısmı isteğe bağlı zaten parantez içinde opsiyonel olarak belirtmiş. Boş bırakabilirsiniz. Sonra Create butonuna basınız. Butona bastıktan sonra bir pencere açılacak ve orada Api Key numaranız çıkacak onu bilgisayarınıza not alınız.

One Signal Eklentisi

 

One Signal Eklentisi

Eklenti One Signal

Eklenti One Signal

Aşama 9-10-11:

Sayfanın sağ üst köşesinde projemizin isminin yazdığı yere tıklıyoruz. Pencereden Manage all projects modülüne tıklayınız. Sahip olduğunuz tüm projeler açılacaktır. Gelen ekranda OneSignal eklentisini kurmak için gerekli hesabımızı seçiyoruz ve sol tarafta Settings kısmına tıklayarak ayarlara giriyoruz. Gelen ekranda Project number yazan yerde numarayı bilgisayarınıza kaydediniz. Bu aşamaya kadar iki farklı numara kaydetmiş olmanız lazım. Aşama 7-8 de Api Key numaranız ile bu aşamada Project number numaranızı kaydettiniz. Artık burayla işimiz bitti.

 

 

Screenshot10 Screenshot11 Screenshot12

OneSignal eklentisi kullanımı, kurulumu için kendi sitesine gidiyoruz. https://onesignal.com/ adresine gidiniz. Bundan sonraki anlatacağımız aşamalar OneSignal sitesinden olacaktır.

Aşama 1-2:

OneSignal sitesine üye olma ve giriş aşamaları. İlgili web sitesine tıkladıktan sonra gelen ekranda  SIGN UP FREE yazan yere tıklayınız. Gelen pencerede elektronik posta adresinizi (email), şifrenizi, proje isminizi yazdıktan sonra kullanım koşullarının kabülünü gösteren kutucuğa tıklayarak Create Account butonuna basınız ve üye olunuz. Üye girişi yapınız.

 

 

Screenshot13 Screenshot14

Aşama 3-4-5:

OneSignal sitesine giriş yaptıktan sonra sol menüde yer alan Add a new app modülüne tıklayınız aılan pencerede App Name yazan yere bir isim yazınız. Örneğin DenemeWeb. App ismi yazdıktan sonra create tuşuna basınız. Ekranınız değişecek ve gelen sayfada Website Push‘u seçiniz ve Next tuşuna basarak ilerleyiniz. Gelen ekranda Google Chrome & Mozilla Firefox kutucuğunu işaretleyerek Next diyerek diğer sayfaya geçiniz.

 

 

 

 

Screenshot15 Screenshot16 Screenshot17

Aşama 6:

Gelen pencerede ilgili yerleri doldurunuz.

Site URL kısmına: http://www.siteniz.com/
Google Server API Key: Buraya üstte anlattığım aşamalarda not aldığınız Api Key numaranızı yazınız.
Default Notification Icon URL: Buraya sitenizin bildirimlerde ekranda gözükecek resmini koyacaksınız. 40×40 ya da 80×80 ebatlarında bir png resmi. Bu resmi sitenize yükleyiniz ve yükleme url sini buraya yazınız.
My site is not fully HTTPS: Sitenizde ssl sertifikası yüklüyse ve sitenize https üzerinden giriş yapılıyorsa My site is not fully HTTPS yazan yeri işaretleyiniz. Sitenizde ssl sertifikası yüklü değilse işaretlemeyin.
Choose Subdomain: Yazan yere site adınızı yazınız. Örn: siteadiniz.
 Buraya üstte anlattığım ve not aldığınız

Save butonuna basarak yazdıklarınızı kaydediniz. Pencereyi kapatınız.

Screenshot18

OneSignal Eklentisi

Aşama 7:

Sol tarafta App Settings yazan yere tıklayınız sonra Keys & IDs yazan yere tıklayınız. OneSignal App ID numarası ile REST API Key numarasını not alın ya da pencereyi kapatmayınız.

Şimdi sitemizin admin kısmına giriş yaparak Eklentiler > Yeni Ekle tıklayarak arama kısmında OneSignal eklentisini bulalım, kurup aktifleştirelim. Sol menüde aşağılarda OneSignal Push yazısı ile eklenti modülü aktif olacaktır. OneSignal Push yazan yere tıklayalım. Configuration yazan kısma tıklayalım ve OneSignal eklentisinin kurulumunun ardından OneSignal eklentisininin ayarlarını yapalım.

Aşamalar:

Account Settings ayarları;

My site uses an HTTPS connection (SSL) sitenizde SSL sertifikası varsa işaretleyiniz yoksa işaretlemeyiniz.
Google Project Number: Önceki aşamalarda anlatmıştık ve siz not almıştınız. Google sitesinden aldığımız numarayı yazınız.
App ID: Aynı şekilde bunu da OneSignal sitesinden not almıştınız ya da pencereyi kapatmadıysanız orada yazan OneSignal App ID numarasını buraya yazınız.
REST API Key: Bunu da OneSignal sitesinden buraya yazınız.
OneSignal Subdomain: Buraya siteadiniz yazınız. Com, net vb uzantı koymayınız.
Safari Web ID: Boş bırakabilir ya da doldurabilirsiniz.

Screenshot19

Prompt Settings & Notify Button ayarları;

Bu kısımda OneSignal eklentisinin sembolünün sitemizde sağda, solda, büyük, küçük vb özelliklerini ayarlıyoruz. Resimdeki gibi ayarlarını yapabilirsiniz.

Screenshot20

OneSignal eklenti

Notify Button Text Customization ayarları;

Bu kısımda ise OneSignal eklentisinin bildirim ayarlarını yapıyoruz. Aşağıda yazanları sitenize uyarlayabilir ya da değiştirebilirsiniz.

First-time visitor message (on notify button hover): Abone Olduğunuz İçin Teşekkür Ederiz
Tip when unsubscribed: Bildirimlerimizi Anında Almak İçin Tıklayınız
Tip when subscribed: Abonelik Ayarlarına Gitmek İçin Tıklayınız
Message on subscribed: Artık Haberlerimizden Anında Haberiniz Olacak
Message on re-subscribed (after first unsubscribing): Artık Haberlerimizden Anında Haberiniz Olacak
Message on unsubscribed: Abonelikten Ayrıldınız.  Tekrar Abone Olmak İçin Tıklayınız.
Main dialog title: Bildirim Ayarları
Main dialog subscribe button: Abone Ol
Main dialog unsubscribe button: Abone Olma

Screenshot21

OneSignal ayar

Popup Settings ayarları;

OneSignal eklentisinin ziyaretçiler için gözüken abone olması ya da olmamasını bildiren bildirim penceresinin ayarlarını aşağıdaki gibi yapabilirsiniz.

Action Message: Size ileti göndermek istiyor
Example Notification Title (Desktop): Anında Haberiniz Olsun
Example Notification Message (Desktop): Öğretmenler İçin Haberleri
Example Notification Title (Mobile): Haberlerimizinden Anında Haberdar Olun
Example Notification Message (Mobile): Öğretmenler İçin Haberleri
Example Notification Caption: dilediğiniz zaman üyelikten ayrılabilirsiniz
Accept Button Text: EVET
Cancel Button Text: HAYIR

Screenshot22

 

Screenshot23

Welcome Notification Settings ayarları;

OneSignal eklentisinin ziyaretçiler abone olduktan sonra ya da abonelikten ayrıldıktan sonra çıkan bildirim mesajları ayarlarını aşağıda gösterildiği gibi yapabilir ya da kendinize uygun düzenleyebilirsiniz.

Title: Abone Oldunuz
Message: Teşekkürler
URL: http://isara.gen.tr/

Screenshot24

One Signal eklenti

 

Automatic Notification Settings ayarları ile Other Notification Settings ayarlarını aşağıdaki gibi düzenleyiniz. Özellikle Use the post’s featured image for the notification icon seçeneğini işaretleyiniz bildirimler resimli olarak gözüksün.

Screenshot25

 

OneSignal eklentisinin sitede görünümünden örnek;

OneSignal

OneSignal

Bu yazımızda OneSignal (One Signal) eklentisinin kurulumunu ve ayarlarını anlatmaya çalıştık. Umarım işinize yarar. Diğer yazılarımızda görüşmek üzere.

  • Ahmet GÜNGÖR

    Çok faydalı bir konu olmuş detaylı anlatım için teşekkürler. bu tarz ingilizce içeriklerin yorumlanıp bize aktarılması çok hoş. başarınızın devamını dilerim

  • Bora Piyancı

    bir türlü türkçeleştiremedim nedendir acaba sitem ***** bakabilirsin

    • Ö. Doğan

      menüde dil bölümleri var kardeşim oraları doldurursan dil türkçeleşir. dataları db de saklıyor dosya olarak yapılmış olsa sana verirdim kaynağını

  • Volkan

    Kolay gelsin iphone ile uyumlu bir şekilde çalışıyormu acaba?

    • Ö. Doğan

      uyumlu çalışır hocam

  • Mustafa

    Bravo faydalı bir konu oldu benim için teşekkürler.

    • Ö. Doğan

      faydalı olduysa ne mutlu bana

  • Ali Öztürk Öztürk

    sitemde bildirimlere abone olanların sayısını nerden göreceğim

    • Ö. Doğan

      onesignal web sitesine giriş yaparak öğrenebilirsiniz