Sistema de Notificações para o seu Blog | Blog do Joanir -->

Sistema de Notificações para o seu Blog

quinta-feira, 22 de setembro de 2016
Aprenda a como colocar um botão no seu blog para que o usuário ative notificações no navegador Google Chrome e Firefox. Com esse plugin, você poderá mandar uma mensagem para o leitor que algo novo foi publicado no seu blog.

Notificações no Blog - OneSignal
Funciona nos navegadores Google Chrome e Mozilla Firefox

Antes de começarmos, devo informar que este tutorial é inspirado no vídeo do Marcos Lemos, do blog Ferramentas Blog. No tutorial dele, foi ensinado como instalar o plugin para Wordpress. Vale a pena conferir.

No nosso caso, seguiremos boa parte do tutorial dele, mas como nos blogs do Blogspot os plugins não funcionam como no Worpress, faremos algumas modificações para o funcionamento por aqui. Então, vamos lá!

Atenção: Este plugin, pelo menos no Blogger, não pega o feed do seu blog para notificar automaticamente os inscritos. Ele serve para notificações manuais. Ou seja, quando houver um post novo, você pode criar uma mensagem com o link  para ele.

1 Criando um conta no OneSignal

1.1 Acesse o site OneSignal.com e clique em LOG IN. Use sua conta Google para facilitar o processo. Aceite todos os termos que aparecerem.

1.2 Aparecerá algumas instruções do OneSignal, mas vamos ignorá-las. Apenas clique no X para fechar o quadro.

1.3 Você notará que estará numa espécie de Painel de Controle. Não há nada para configurar ainda, apenas uma caixa para adicionar o novo aplicativo. Então, clique em Add a new App.

OneSignal - Adicionar novo app
Adicionar Novo Aplicativo

1.4 Adicione um nome para o seu app e clique em Create.

OneSignal -  Adicionar novo app
Adicione um nome para o seu novo aplicativo

1.5 Na próxima janela, temos algumas opções de plataformas. Escolha a Website Push (que contém o ícone dos três navegadores) e clique em Next.

OneSignal - Website Push
Selecione Website Push

1.6 Agora teremos duas opções para configurar. Começaremos com os dois navegadores populares do Windows. Selecione Google Chrome & Mozilla Firefox e clique em Next.

1.7 Este passo é bem intuitivo. Em Site URL, coloque o endereço do seu blog (não esqueça de pôr o http://) e em Default Notification Icon URL, coloque o link do ícone do seu blog. Atente-se para colocar uma imagem quadrada, assim ela não ficará distorcida.

OneSignal - URL do site e ícone
Coloque o endereço completo do seu blog

E rolando mais pra baixo, teremos a opção de criar um subdomínio com o nome do blog para o onesignal. Você pode alterá-lo se quiser. Antes de clicar em Save,  copie o seu subdomínio e cole num bloco de notas.

OneSignal - subdomínio onesignal
Copie o seu subdomínio

1.8 Nesta etapa, como estamos configurando para o Blogspot, devemos escolher a primeira opção. Selecione Website Push e clique em Next.

1.9 Nesta parte, vamos anotar algumas coisas para instalar o SDK do OneSignal no nosso blog. Deixe essa janela aberta, pois retornaremos a ela daqui a pouco e utilizaremos o ID do seu App.

OneSignal - ID do app
Deixe essa janela aberta e vá para o painel do seu Blog

2 Instalando o SDK no Blog

2.1 Abra o painel do seu blog e vá para Modelos. Agora clique em Editar HTML  para abrir o editor.

2.2 Clique em qualquer área dentro do código, aperte Ctrl+F para abrir a caixa de busca e pesquise por <head> ou  </head>. Você poderá colar o próximo código em qualquer lugar dentro dessa tag, mas preferencialmente cole perto das tags <script>.

2.3 Cole o seguinte código:

<script async='async' src='https://cdn.onesignal.com/sdks/OneSignalSDK.js'/>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push([&quot;init&quot;, {
      appId: "YOUR_APP_ID",
      safari_web_id: 'YOUR_SAFARI_WEB_ID',
      autoRegister: false,
    promptOptions: {
        actionMessage: "Gostaria de ser notificado quando houver novos posts?",
        acceptButtonText: "SIM, CLARO",
        cancelButtonText: "NÃO, OBRIGADO"
    },
      subdomainName: 'SUBDOMAIN_NAME',
      notifyButton: {
           enable: true,
        size: &#39;medium&#39;,
        theme: &#39;default&#39;,
        position: &#39;bottom-right&#39;,
        text: {
            &#39;tip.state.unsubscribed&#39;: &#39;Receber notificações&#39;,
            &#39;tip.state.subscribed&#39;: &quot;Notificações ativadas&quot;,
            &#39;tip.state.blocked&#39;: &quot;Você bloqueou as notificações&quot;,
            &#39;message.prenotify&#39;: &#39;Clique para receber notificações&#39;,
            &#39;message.action.subscribed&#39;: &quot;Obrigado por se inscrever!&quot;,
            &#39;message.action.resubscribed&#39;: &quot;Você se inscreveu novamente&quot;,
            &#39;message.action.unsubscribed&#39;: &quot;Você não receberá mais notificações&quot;,
            &#39;dialog.main.title&#39;: &#39;Notificações&#39;,
            &#39;dialog.main.button.subscribe&#39;: &#39;INSCREVA-SE&#39;,
            &#39;dialog.main.button.unsubscribe&#39;: &#39;CANCELAR INSCRIÇÃO&#39;,
            &#39;dialog.blocked.title&#39;: &#39;Desbloquear Notificações&#39;,
            &#39;dialog.blocked.message&#39;: &quot;Siga estas instruções para ativar as notificações:&quot;
        }
      }
    }]);
  </script>

2.4 Antes de salvar, substitua YOUR_APP-ID pelo ID do seu Aplicativo e SUBDOMAIN_NAME pelo seu subdomínio completo. Exemplo: https://masqueseyo-com.onesignal.com.

2.5 Feito isso, salve seu template e abra seu blog no Google Chrome ou Firefox. No canto inferior direito, deverá aparecer um ícone de notificação. Clique nele, e ative as notificações para você.

2.6 Agora, volte para a janela que paramos no OneSignal e clique em Check Subscribed Users. Se deu tudo certo, você verá essa mensagem abaixo. Clique em Done para finalizar.

OneSignal - Inscrito confirmado
Confirmação de 1 inscrito nas notificações

3 Criando notificação

Infelizmente, como disse antes, esse plugin não pega o Feed do blog para gerar notificações automáticas. Ao invés disso, você deve criar uma notificação para o usuário. Mas, apesar de parecer penoso, o processo é simples:

3.1 No painel do seu aplicativo, clique em New Message.

3.2 Aqui, o processo é intuitivo. Em Title, adicione um título e em Content, adicione sua curta mensagem. Dica: não escreva muito, use este espaço para fazer uma curta chamada para a leitura de um post ou algum tipo de aviso para o seu leitor.

3.3 Mais abaixo, terá uma opção chamada Options. Clique nela para expandir algumas opções. Dentre elas, ative a opção Launch URL e cole o link do seu novo post. Assim, quando a pessoa clicar na notificação, ela será levada para o endereço colocado.

3.4 Após tudo configurado, clique em Preview e, após conferir, clique em Send (Enviar).

Conclusão

Este serviço é ótimo para alertar os seus leitores que há algo novo no blog. Se você tiver alguma dúvida, comente abaixo. Se você é usuário do Safari no iOS, o processo de configuração é parecido. Vá em App Settings >Apple Safari > Configure e preencha os campos necessários. Depois teste e nos conte se funcionou também neste navegador.

É isso aí. Para mais tutoriais e outros assuntos aqui do blog, clique no botão para ser notificado. Até a próxima!