티스토리에 후원(Donation) 및 기부 버튼 추가하는 방법 with. Buy Me a Coffee

티스토리에 후원(Donation) 및 기부 버튼 추가하는 방법 with. Buy Me a Coffee

티스토리나 다른 워드프레스 블로그들을 보다보면 아래와 같은 후원(도네이션) 버튼을 보신적이 있을 것입니다. 이 버튼을 활용해서 후원 또는 기부를 받을 수 있습니다. 계좌를 통해 후원을 받는 것보다 블로그를 운영하는 운영자에게 커피 1잔 또는 맥주 1잔을 사주는 것은 어떠하냐는 감사의 표시로써 훨씬 재밌고 덜 거부감을 일으킬 수 있는 방법이라고 생각합니다.

사용방법

Buy Me a Coffee를 사용하는 방법은 아래와 같습니다.

1. Buy Me a Coffee 웹사이트 이동
2. 회원가입 후 페이팔 연동 (페이팔 계정을 사전에 준비하세요)
3. 대시보드에서 기부 버튼 만들기
4. 티스토리 포스팅에 붙여넣기

Buy Me a Coffee 웹사이트로 이동

Buy Me a Coffee 서비스를 사용하기 위해 웹사이트로 이동합니다. 웹사이트로 이동하는 경로는 아래와 같습니다.

Buy Me a Coffee

Buy Me a Coffee 웹사이트 예시

Buy Me a Coffee 웹사이트의 우측 상단에 SIgn up 버튼을 누르고 회원가입을 진행해주세요. 필자는 구글 로그인을 선호하기 때문에 구글 계정으로 회원가입을 진행하도록 하겠습니다.

Buy Me a Coffee 서비스를 사용하기 위해 회원가입을 하는 모습

회원가입을 완료했다면, 이제 기부 및 후원을 받기 위해 결제 시스템을 연동해야되는데 그나마 접근하기 쉬운 페이팔(PayPal)을 연동합니다. Stripe, Razorpay도 지원하긴 하지만 필자는 페이팔이 익숙하고 계정도 이전에 가지고 있었기 때문에 페이팔을 연동하도록 하겠습니다.

지불 결제 시스템을 연동하기 위한 작업 예시

country / region에서 Korea를 찾아서 선택해줍니다.

지역 및 국가를 선택하는 모습

그리고 페이팔을 활성화 시킵니다.

페이팔을 활성화하는 모습

페이팔을 활성화하기 위해서 페이팔 인증 페이지로 넘어가게 되는데, 미리 준비해둔 페이팔 계정을 기입하고 Next 버튼을 누릅니다.

기부하기 버튼 생성하기

기부하기 버튼을 생성하기 위해 대시보드로 이동합니다. 대시보드로 이동하면 가운데 Generate button 버튼이 있는데 해당 버튼을 클릭해주세요.

기부하기 버튼을 만들기 위해 대시보드로 이동한 모습

Generate button 버튼을 누르면 아래와 같은 팝업이 등장합니다. 아래 팝업 내에서 버튼의 디자인(색상과 폰트) 그리고 버튼 텍스트를 자신의 블로그 스타일과 비슷하게 맞출 수 있습니다. Standard button 경우 스크립트로 코드를 가져오기 때문에 Button + supporter count를 통해서 a태그로 코드를 가져오도록 하겠습니다.

자신의 블로그 디자인에 맞는 버튼 스타일을 만드는 모습

스타일을 조정하고 가운데 Generate button 버튼을 눌러줍니다. 그러면 아래처럼 a태그를 카피할 수 있게 코드가 생성되게 됩니다. Copy code를 눌러서 코드를 복사합니다.

Copy code 버튼을 활용해서 코드를 복사하는 모습

아래는 위 단계에 대한 간략한 사용예시입니다.

위 단계에 대한 간략한 사용 예시

짠! 정말 쉽게 기부 버튼을 티스토리 포스팅에 추가할 수 있습니다!

세팅하기

도네이션을 받기 위한 금액 또한 수정할 수 있습니다. 개인적으로 3달러 정도 금액이 적당한 수준이라고 생각하여 저는 3달러로 세팅해놨습니다. 그리고 감사 메시지도 커스터마이징 할 수 있습니다. 원하는 감사 메시지를 작성해주세요.

Buy Me a Coffee에서 제공하는 다양한 세팅값

마무리

블로그 포스팅 내부에 앵커 태그로 추가하는 방법도 있지만, 위젯 스크립트를 import해서 사용하는 방법도 존재하는 것을 알 수 있습니다. 만약 위젯을 추가하고 싶다면, 위젯을 삽입할 영역에 Buy Me a Coffee에서 제공하는 위젯 스크립트를 추가하면 될 것 같습니다.