[블로그] Addthis 로 블로그 구독 버튼 깔끔하게 정리 하기

[블로그] Addthis 로 블로그 구독 버튼 깔끔하게 정리 하기

 

개발환경 : window 7 64bit

 

블로그를 많이 알리기 위해 소셜 네트워크를 많이 이용합니다.

버튼을 하나씩 추가 하는 것이 번거로운데 AddThis 라는

사이트에서 아이콘을 만들어 배포해 줍니다.

https://www.addthis.com  클릭해서 홈페이지로 갑니다.

 

 

그리고 계정을 하나 만듭니다. Facebook,Twitter, Google 계정중에

하나 사용해도 되겠죠.

 

계정을 만들고 나서 로그인 한후 메인화면으로 가시면

아래 화면처럼 Get Shares 와 Follows 가 있습니다.

먼저 Follows 아이콘을 만들기 위해 클릭해서 들어갑니다.

 

그럼 Follows 버튼들의 종류가 나오게 되는데

유료도 있네요. 마음에 드시는 아이콘을 선택합니다.

그리고 Go Pro 나 Free 버튼을 클릭해서 팝업창을 띄웁니다.

 

팝업창은 코드를 구성하기 위한 설정창이 됩니다.

여기에 Follows 시키고 싶으신 소셜 사이트들을

추가하시면 됩니다. 아마 각 사이트마다 자기만의

고유 주소가 있을 겁니다. 그걸 에디터 박스 뒤에

넣으면 상단 미리보기 창에 아이콘이 표시 됩니다.

 

다 끝나셨으면 아래 쪽으로 내려 갑니다. 그럼

복사해서 넣을 코드값이 두개가 있는데 첫번째 코드는

HTML/CSS 란에 넣어야 되고 두번째 div 태그는

넣고 싶은 곳에 복사하면 됩니다. 첫번째 코드는

인증코드라고 보시면 됩니다. 두번째 코드가 아이콘이

표시되는 디자인 코드가 되겠죠.

 

저는 티스토리 관리자로 가서 HTML/CSS 편집창에

복사해서 넣었습니다. 그리고 두번째 코드는

사이드 바에 추가했습니다.

 

추가 완료하고 저장하니 아래와 같이 나오네요.

 

이제 Share Tools 을 추가해 보도록 하겠습니다.

상단콤보박스를 클릭하시면 Share Tools 이 있는데

선택합니다. 그러면 추가할수 있는 형태들이 리스트로

나옵니다.

 

그중 하나를 고르고 클릭하시면 코드 생성 창이

나오게 됩니다. Follows 와 동일하게 미리보기 창이 있고

아래 추가 하고자 하는 서비스 들이 나오게 되는데

왼쪽에서 오른쪽으로 아이콘을 옮기게 되면 상단

미리보기에 표시가 됩니다. 반대로 옮기면 빠지겠죠.

 

그렇게 수정하고 제일 아래로 내려가서 코드를 복사하고

Activiate 를 눌러 완료합니다.

 

티스토리 홈페이지로 가서 사이드 바에 코드를 복사한후

확인해 봅니다. 아래와 같이 추가 되었네요. 그런데

어떤게 Share 인지, Follows 인지 구분이 안가네요.

간단하게 표시를 해 줘야 겠네요 ㅋ