티스토리 구독 버튼 만들기

개요

소셜 네트워크 서비스를 제공하는 플랫폼의 대부분은 구독 또는 친구 추가라는 특정 인물과 친해질 수 있는(?) 기능을 제공하고 있습니다. 이를 통해 내가 원하는 인물과 대화하거나 정보를 얻어낼 수 있죠.

 

지금 제가 사용 중인 블로그 플랫폼 티스토리에서도 구독이라는 기능을 제공해주고 있습니다. 

 

예시 1

예시 2

예시 1과 예시 2처럼 해당 블로거(블로그를 운영하는 사람)를 구독할 수 있는 구독하기 버튼이 존재하며, 클릭 시 해당 블로거를 구독하거나 구독을 취소할 수있습니다.

 

예시 1번과 같은 부유(Floating) 형식이 있고, 예시 2와 같이 네임 카드에 버튼이 생기는 형식이 있습니다. 둘 다 티스토리에서 기본적으로 제공해주고 있습니다.

 

나만의 구독 버튼

티스토리 측에서 기본으로 제공해주는 구독 버튼도 좋지만 가끔은 내가 원하는 디자인의 버튼을 만들어 강조하고 구독 기능을 추가하고 싶을 때가 있습니다.

 

하지만 티스토리 측에서 별도로 스킨 치환자를 제공하지 않기 때문에 사용자 본인이 직접 해당 버튼을 만들고 기능을 추가해야 합니다. 아래는 그 기능을 추가하는 과정입니다.

 

followBlog

function followBlog(blogId, $target, url, device) {
    // ...
}

티스토리에서 구독하기 버튼을 누르면 호출되는 함수로 followBlog가 있습니다. 이 함수가 호출되면 해당 블로그를 구독하도록 합니다.

 

매개변수로 해당 블로그의 식별번호, 버튼의 요소, 블로그의 기본 주소 그리고 장치 유형을 받습니다. 매개변수로 넘겨야 할 데이터는 자바 스크립트로 손쉽게 구할 수 있습니다.

 

const blogId = T.config.BLOG.id;
const blogUrl = T.config.DEFAULT_URL;

T.config를 통해 내가 접속한 해당 블로그의  식별번호와 기본 주소를 손쉽게 취득할 수 있습니다.

 

let device = ``;

if (navigator.userAgentData.mobile) {
	device = `web_mobile`;
} else {
	device = `web_pc`;
}

장치 유형은 모바일의 경우 "web_mobile"이 할당되고 PC는 "web_pc"가 할당됩니다. navigator의 userAgentData.mobile을 통해 사용자가 모바일 환경인지 Boolean 값으로 확인할 수 있으며, 이를 통해 알맞은 값을 할당하도록 하면 됩니다.

 

unfollowBlog

function unfollowBlog(blogId, $target, url, device) {
    // ...
}

unfollowBlog는 블로그의 구독을 취소하는 기능입니다. 매개변수는 앞서 언급한 followBlog와 동일합니다.

 

버튼 디자인

<style>
	.btn_style1 {
    	border: none;
    	border-radius: 0.25rem;
        padding: 0.5rem 1rem;
        outline: none;
        background-color: dodgerblue;
        color: white;
        cursor: pointer;
    }
    
    .btn_style2 {
    	border: none;
        border-radius: 1rem;
        padding: 0.5rem 1rem;
        outline: none;
        background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
        color: white;
        cursor: pointer;
    }
    
    .btn_style3 {
    	border: none;
        padding: 0.5rem 1rem;
        outline: none;
        background-color: black;
        color: white;
        cursor: pointer;
        filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.75));
    }
</style>

 

디자인에는 영 소질이 없는 편이라...;; 대략 위와 같은 세 가지 유형의 버튼만 준비했습니다. 구글 검색을 통해 여러분이 원하는 디자인을 찾아 적용해주세요.

 

기능 추가하기

document.addEventListener('DOMContentLoaded', () => {
    const btnElement = document.getElementById('버튼의 아이디');
    if (btnElement) {
    	// 데이터 설정
        btnElement.setAttribute(`data-blog-id`, T.config.BLOG.id);
        btnElement.setAttribute(`data-url`, T.config.DEFAULT_URL);
        
        if (navigator.userAgentData.mobile) {
        	btnElement.setAttribute(`data-device`, `web_mobile`);
        } else {
        	btnElement.setAttribute(`data-device`, `web_pc`);
        }
        
        // 버튼 내용 설정
        // 구독 상태를 확인한다.
        if (T.config.SUBSCRIPTION.status === `none`) {
        	btnElement.textContent = `구독하기`;
        } else if (T.config.SUBSCRIPTION.status === `friend`) {
        	btnElement.textContent = `구독 중`;
        }
        
        // 버튼 클릭 이벤트
        btnElement.addEventListener('click', () => {
            // 나 자신을 구독하는 건 좀..
            if (T.config.ROLE === `owner`) {
                alert(`자기 자신을 구독할 수 없어요!`);
                return;
            }
        
            const blogId = btnElement.getAttribute(`data-blog-id`);
            const blogUrl = btnElement.getAttribute(`data-url`);
            const deviceType = btnElement.getAttribute(`data-device`);
            
            // 구독 상태에 따라 처리
            if (T.config.SUBSCRIPTION.status === `none`) {
            	followBlog(blogId, $(btnElement), blogUrl, deviceType);
                
                // 로그인했나?
                if (T.config.IS_LOGIN) {
                    btnElement.textContent = `구독 중`;
                    T.config.SUBSCRIPTION.status = `friend`;
                }
            } else if (T.config.SUBSCRIPTION.status === `friend`) {
            	unfollowBlog(blogId, $(btnElement), blogUrl, deviceType);
                
                
                // 로그인했나?
                if (T.config.IS_LOGIN) {
                    btnElement.textContent = `구독하기`;
                    T.config.SUBSCRIPTION.status = `none`;
                }
            }
                
            // 3초 쿨타임 추가 (서버 부하 방지)
            btnElement.disabled = true;
                
            setTimeout(() => {
                btnElement.disabled = false;
            }, 3000);
        });
    }
});

내가 만든 버튼에 ID 속성을 부여한 후 자바 스크립트 코드에서 해당 아이디를 작성합니다. 그러면 구독과 구독 취소의 기능이 추가됩니다.

 

장난으로 구독 버튼을 연타하는 경우가 발생할 수 있기 때문에 티스토리 서버 부하 방지와 중복 알림을 피하기 위해 3초의 쿨타임을 추가합니다.

 

특별한 기능

SweetAlert2

SweetAlert2 또는 기타 토스트 팝업을 출력해주는 라이브러리를 사용하면 구독을 했거나 취소했다는 알림을 보여주면서 조금 더 개성있는 구독 버튼을 만들 수 있습니다.

 

실제 결과

아래의 구독 버튼을 누르면 제 블로그를 구독할 수 있습니다. 테스트 삼아 누르신 후 취소하셔도 괜찮습니다.