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.
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.
 |
| Adicionar Novo Aplicativo |
1.4 Adicione um nome para o seu app e clique em Create.
 |
| 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.
 |
| 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.
 |
| 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.
 |
| 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.
 |
| 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(["init", {
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: 'medium',
theme: 'default',
position: 'bottom-right',
text: {
'tip.state.unsubscribed': 'Receber notificações',
'tip.state.subscribed': "Notificações ativadas",
'tip.state.blocked': "Você bloqueou as notificações",
'message.prenotify': 'Clique para receber notificações',
'message.action.subscribed': "Obrigado por se inscrever!",
'message.action.resubscribed': "Você se inscreveu novamente",
'message.action.unsubscribed': "Você não receberá mais notificações",
'dialog.main.title': 'Notificações',
'dialog.main.button.subscribe': 'INSCREVA-SE',
'dialog.main.button.unsubscribe': 'CANCELAR INSCRIÇÃO',
'dialog.blocked.title': 'Desbloquear Notificações',
'dialog.blocked.message': "Siga estas instruções para ativar as notificações:"
}
}
}]);
</script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
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: 'medium',
theme: 'default',
position: 'bottom-right',
text: {
'tip.state.unsubscribed': 'Receber notificações',
'tip.state.subscribed': "Notificações ativadas",
'tip.state.blocked': "Você bloqueou as notificações",
'message.prenotify': 'Clique para receber notificações',
'message.action.subscribed': "Obrigado por se inscrever!",
'message.action.resubscribed': "Você se inscreveu novamente",
'message.action.unsubscribed': "Você não receberá mais notificações",
'dialog.main.title': 'Notificações',
'dialog.main.button.subscribe': 'INSCREVA-SE',
'dialog.main.button.unsubscribe': 'CANCELAR INSCRIÇÃO',
'dialog.blocked.title': 'Desbloquear Notificações',
'dialog.blocked.message': "Siga estas instruções para ativar as notificações:"
}
}
}]);
</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.
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.
 |
| 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!
