블로그 꾸미기 팁 #3, 구독 버튼 만들기 - 네이버

어제 페이스북 및 네이버 구독 버튼을 만들어서 적용시켰습니다. 구독 버튼이라 하면 버튼을 클릭했을 때 바로 구독을 할 수 있는 설정이 떠야 하겠죠. 하지만 이런 식의 구독 버튼을 만드는 방법을 찾기가 쉽지 않네요. 찾아보니 온통 페이스북 페이지, 혹은 블로그로 이동되는 형식의 구독 버튼만 나오더라고요. 그래서 직접 연구해 가면서 약 3시간에 걸려서 네이버 구독 버튼을 간신히 완성시킨 것 같습니다. 페이스북 버튼은 아직까지도 작업을 하고 있고요... 막상 해보면 간단한데, 모르는 상태에서 하니 힘들더라고요. 그래서 이번에는 구독 버튼 만들기 첫번째, 네이버 이웃커넥트 버튼을 만드는 방법을 알려드리려 합니다.

네이버 이웃 커넥트 위젯을 티스토리 블로그에 설치해보자!

간단한 설명을 드리자면...

어떤 방식으로 구독 버튼을 만들 건지 간단하게 설명해 드릴게요! 저는 티스토리 스킨과 함께 구독 버튼 이미지를 업로드 해두고 "애드센스 반응형 플러그인"을 통해서 사진을 불러오고 버튼을 만드는 방식으로 구독 버튼을 만들었습니다. 애드센스 플러그인을 이런 식으로도 사용할 수 있더라고요. 이렇게 하는 이유는 매번 포스트 하단에 코드를 추가할 필요도 없고 (그리고 글이 이미 100개가 넘어가서 이전 포스트들을 일일이 다 수정하기도 귀찮고), 나중에 구독 버튼을 바꾸게 되더라도 플러그인에서만 수정을 하면 되기 때문입니다.

버튼 사진 준비하기

구독 버튼에 사용될 사진이 필요하겠죠. 각자 블로그 테마에 맞게 구독 버튼 사진을 하나 만들어 주세요. 제가 만든 구독 버튼 이미지를 첨부해 드릴게요. 필요하신 분은 사용하셔도 됩니다. 다만 페이스북과 네이버만 있습니다. 

구독버튼.zip

플러그인을 통해서 구독 버튼을 설치할 것이기 때문에 구독 버튼 이미지를 어딘가에 업로드를 해 둬야 합니다. 구글 드라이브 같은 온라인 드라이브에 업로드를 해 둬도 되지만, 티스토리에 업로드를 하면 더 간단 하겠죠. 아까 설명했듯이 블로그 스킨에 업로드를 해 봅시다. 먼저 티스토리 관리자 페이지에서 "꾸미기 > 스킨 편집" 으로 들어가 주세요. 

그 다음 "html 편집" 을 클릭해서 스킨 편집 창으로 들어가 줍시다. 

"파일 업로드" 탭으로 들어가서 아래에 있는 "+ 추가" 버튼을 클릭한 뒤 구독 버튼 사진을 업로드 해 주세요. 

사진을 업로드 하셨으면 링크를 찾아야 합니다. 파일을 "마우스 우 클릭 > 검사" 를 클릭하시면 오른쪽에 아래 사진처럼 html 코드들이 뜨는데요, 그 중 사진 링크를 찾아서 복사해 주세요. 그러면 사진 준비가 끝납니다.

네이버 이웃커넥트 이웃추가 아이디 찾기

네이버 이웃커넥트 버튼을 만드는데, 네이버 이웃커넥트가 적용이 안되있으면 안되겠죠? 만약 네이버 이웃커넥트가 없으시다면 아래 포스트를 참조하면서 이웃커넥트 위젯을 만들어 주세요. 

네이버 이웃 커넥트 위젯을 티스토리 블로그에 설치해보자!

네이버 이웃커넥트 버튼을 만들기 위해서는 이웃커넥트 아이디를 알아야 합니다. 네이버 블로그는 네이버 아이디만 있으면 바로 링크를 알 수 있지만, 외부 블로그에 이웃커넥트 위젯을 설치한 경우에는 식별 코드가 추가되기 때문에 따로 알아내야 합니다. 그래서 아까와 비슷한 방법으로 아이디를 찾아낼 겁니다. 

이웃커넥트 위젯을 "마우스 우 클릭 > 검사" 를 클릭해서 검사 창을 열어 줍시다. 그중 <iframe> 을 찾은 뒤 "blogId" 다음에 나오는 아이디를 복사해 주시면 됩니다. 

코드 만들기

이제 모든 준비가 됬으니 코드를 만들어야죠? 아래 코드를 알맞게 수정해 주세요. 

여기서 "이미지 링크" 는 아까 복사한 구독 버튼 이미지 링크를 추가해 주시면 되고요, "블로그 아이디" 는 이웃커넥트 블로그 아이디를 추가해 주시면 됩니다. 만약 제가 제공한 구독 버튼 사진이 아닌 직접 만든 사진을 사용했다면 "coords" 부분을 수정해야 합니다. 아래와 같은 형식으로 수정해 주시면 됩니다. 

여기서 x1, y1 은 사각형의 왼쪽 상단의 좌표 이고요, x2, y2 는 사각형의 오른쪽 하단의 좌표 입니다. 

코드 적용하기

이제 코드를 적용 하면 되는데요, 저는 "구글 애드센스 반응형 플러그인" 을 통해서 적용시켰습니다. 다른 플러그인들은 되는지 잘 모르겠네요. 먼저 블로그 관리자 페이지에서 "플러그인" 으로 들어가 주세요.

구글 애드센스 반응형 플러그인을 찾아 줍시다.

아까 만든 코드를 추가하기만 하면 됩니다. 하단 위치를 선택한 뒤 아까 만든 코드를 추가해 주세요. 그 다음 "변경사항 적용" 버튼을 클릭하면 적용이 됩니다. 물론 애드센스 코드들과 같이 사용이 가능합니다. 구독 코드를 추가 한 뒤 애드센스 코드를 추가하셔도 정상적으로 작동 됩니다 (저도 그렇게 사용하고 있습니다).

잘 적용이 됬다면 블로그 하단에 구독 버튼이 나타날 겁니다. 알고 하면 쉽지만, 저는 아무것도 모르는 상태에서 만들기 시작해서 구독 버튼 하나 만드는데 고생했습니다. 특히 이웃커넥트 아이디 찾는데 많이 고생했네요... 페이스북 구독 버튼이 완성되는 데로 바로 알려드리겠습니다.