티스토리 블로그 웹 푸시알람 사용 방법

티스토리 블로그 웹 푸시알람 사용 방법

이번에는 티스토리 블로그 웹 푸시 알람 사용방법에 대해서 알아보겠습니다.

푸시 알람이란??

여러분들 스마트폰 쓰시면서 알람 같은거 오시죠??

그게 푸시 알람입니다. 근데 이 푸시 알람을 웹에서 사용해보도록 하겠습니다.

웹 푸시 알람을 사용해서 구독이나 광고 기타 등등과 같은 효과를 줄 수 있습니다.

그리고 블로그 유입도 높아질 것입니다.

그럼 웹 푸시 사용하는 방법을 알려드리겠습니다.

먼저 본인 티스토리 블로그가 있어야 합니다.

그리고 저희가 사용할 사이트는 zapier.com 와 onesignal.com 입니다.

먼저 zapier.com 사이트에 접속 합시다.

접속하시면 상단에 Log in 버튼이 있습니다. 클릭 합시다.

저는 구글 계정이 있어서 구글 계정으로 로그인 했습니다. 구글 계정은 안드로이드 스마트폰 사용 하시는 분들이면 모두 하나씩 가지고 있습니다.

로그인 하셨다면 이렇게 뜨실 겁니다. 저희가 사용할 것은 OneSignal 입니다.

Search 1000+ apps 부분에 OneSignal를 검색해주면 됩니다.

이렇게 체크를 해주면 됩니다.

그리고 밑으로 내리시면

Send IneSignal push notifications for new RSS items가 보이실겁니다.

클릭해 봅시다.

위와 같이 화면이 뜰겁니다. Create this Zap 클릭 해줍니다.

Continue 클릭해 줍시다.

URL 부분에 본인 티스토리 블로그 주소를 입력하시고 "/rss"를 붙여주시면 됩니다.

잘 모르시겠으면 이미지 보시고 하시면 됩니다.

그리고 Continue 눌러주면 됩니다.

그리고 Fetch & Continue 눌러주시면 됩니다.

적용 잘 되었다는 내용입니다. Continue 눌러주시면 됩니다.

마찬가지로 Continue 클릭!!

마찬가지로 또 Continue 클릭!!

또 Continue 클릭

Continue 클릭

완료되었습니다!! 아직 창 닫지 마세요!!!!

다시 돌아와서 작업 진행 해야됩니다.

이제 또 하나의 새창 또는 탭을 열어서 onesignal.com 접속해줍니다.

오른쪽 상단에 LOG IN 버튼을 클릭 합시다.

구글 계정이 있으니 구글 계정으로 로그인 해주죠.

로그인이 완료 되었으면 이런 화면이 나올 겁니다.

Add a new app를 클릭해 줍시다.

저는 aossuper8.tistory.com 이니 aossuper8로 했습니다. 이름은 아무렇게나 설정 하셔도 됩니다.

그다음 CREATE 클릭!!

Web Push 클릭하고 NEXT 클릭!!!

사이트 이름과 사이트 주소를 입력 합니다.

저는 aossuper8 / http://aossuper8.tistory.com 이라고 적었습니다.

그리고 스크롤을 조금 내리시면

ADD A PROMPT 를 클릭해줍시다.

저는 SLIDE PROMPT를 클릭 했습니다.

오른쪽에 예제로 보이는 이미지 처럼, 사이트 상단에 저런 디자인으로 나오겠다는 의미 입니다.

이 부분을 상세 설정해서 문구를 수정 할 수 있습니다.

문구를 알아서 하시면 됩니다.

설정 하신다음에 SAVE 버튼을 클릭!!!

오른쪽 사진을 보시면 안드로이드 핸드폰에 이렇게 알림이 뜬다 라는것을 보여주고 있습니다.

문구도 알아서 수정하시면 되겠습니다.

그다음 SAVE 클릭!!

그럼 이렇게 소스코드가 나옵니다. 이것을 메모장에 붙여넣기 하시면 됩니다.

FINISH 버튼을 클릭!!

오른쪽 상단에 Keys & IDs를 클륵해 줍니다.

그럼 이렇게 APP ID와 API KEY를 발급해줍니다.

그리고 다시 아까 완료 하지 않은 zapier.com 창으로 돌아갑니다.

분명히 위에서 언급했습니다. 창 닫지 마시라고

Connect 를 눌러줍니다.

그럼 이렇게 App ID와 API KEY를 입력하라고 나올겁니다. 입력하고

Yes, Continue 를 클릭하면 됩니다.

Save + Continue 버튼을 클릭!!

마찬가지로 Continue 클릭!!

Send Test To OneSignal 클릭!!

Finish 버튼 클릭!!

끝이 났습니다. ㅠㅠ 포스팅 할려니 힘드네요.

그리고 이제 메모장에 복사 해둔 소스코드 있죠?? 그것을 티스토리에 넣어줍시다.

스킨 편집에 들어가서 HTML 편집을 누르면 됩니다.

편하게 </head> 뒤에다가 넣으면 됩니다. 저장을 누르시면 되고

메인 홈페지로 가봄니다.

그럼 위의 처럼 우리가 원하는 모습으로 뜹니다. 구독 버튼을 눌러주고

또 하나의 창이 뜨면 허용 버튼을 누르면

이렇게 뜨게 됩니다. 멋지죠???

새로운 글을 작성하게 되면 5분정도 후에 알림이 뜨게 됩니다.

그리고 모바일에서도 사용이 가능합니다.