티스토리 뷰
* '씨리얼(See Real)'은 일상에서 얻을 수 있는 여러가지 정보를 공유하는 공간입니다. <씨리얼 필자>
[IT & TECH]
티스토리에 SNS 공유버튼 만들기 <Addthis 활용법>
- 운영중인 티스토리에 각종 SNS 공유 버튼을 만들자.
요즘 블로깅으로 별도의 수익을 만들고자 하시는 분들이 많이 있어요. 직장 생활을 하다보면 지루하기도 하고 뭔가 재미있는 이야기 거리가 없다보니, 온라인 활동을 통해서 관심사를 찾아보기도 하고 직접 추가 수익을 만들어보는 블로거들이 점점 늘어나고 있는 추세라고 봅니다. 사실, 온라인 활동으로 수익을 만들어내는 사람들인 과거부터 지금까지 계속해서 증가하고 있고, 그 수가 상상이상으로 많으며 수익 또한 억단위로 벌어들이는 사람들이 있어요. 전업으로 블로깅(Blogging)을 하시는 분들은 '디지털 노마드(Digital Nomad)'라고 칭하기도 합니다.
여기서 잠깐! 디지털 노마드는 도대체 무엇일까?
디지털 노마드(Digital Nomad)란? - 하루는 일하는 중간에 서핑을 즐기기도 하고, 어느 날은 비가 내리는 창 밖 풍경을 보면서 작업을 하기도 하고, 또 다른 날은 로마 콜로세움 근처에서 관광객을 바라보며 일한다. 이런 꿈같은 근무 환경을 실제로 체험하고 있는 사람들이 있다. 인터넷과 업무에 필요한 각종 기기, 작업 공간만 있으면 시간과 장소에 구애받지 않고 일할 수 있는 유목민, ‘디지털 노마드’ 얘기다. |
그런데, 우리는 블로깅 작업을 하다보면 운영하는 사이트에 이것 저것 기능을 넣고 싶어하고, 그 기능이 미적으로 완성되었으면 하는 욕구를 가지게 됩니다. 그렇다보니 이런 저런 기능적인 플러그인(Plug-in)을 적용하면서 비주얼적인 부분을 보완하려고 하죠.
오늘은 그 중에서 SNS 공유 버튼을 만들어보는 시간을 가져보도록 하겠습니다. SNS 는 절대적으로 무시할 수 없는 공유 플랫폼이죠. 페이스북 처럼 친구나 소속 커뮤니티에 정보를 노출시키는 플랫폼도 있지만, 인스타그램처럼 불특정 다수에서 정보를 공유할 수도 있습니다. 그 외에도 카카오채널, 트위터, 네이버밴드, Linkedin 등 여러가지 소셜 플랫폼이 존재합니다.
* 기본적으로 티스토리가 제공하는 SNS 공유 플러그인은 존재합니다만, 해당 기능은 미적인 부분에서 크게 매력적이지 못하다고 판단하는 바, 좌측 혹은 우측에 스크롤 다운-업이 되는 공유 버튼을 선호하는 편입니다.
물론 위와 같은 플러그인을 통해서 기능적인 부분을 보완할 수는 있지만, 비주얼적인 부분에서 아쉬움을 느끼신다면 오늘 내용을 참고하시길 바랍니다.
1. 단계
< http://www.addthis.com/ 접속하기 >
- 기본적으로 위 사이트에 접속하여, 회원가입을 진행하면 됩니다.
위 사이트에 접속하면 회원 가입 조건을 약 3가지로 구분지어 둡니다. 구글계정/ 페이스북계정/ 일반이메일 계정으로 가입하기가 보입니다. 원하시는 방법으로 회원가입을 해주세요. <필자는 구글 계정으로 회원가입을 했습니다. >
2. 단계
< 원하는 툴 선택 'Share Buttons' >
- 회원 가입 이후 다음 페이지에서 툴을 선택하게 됩니다. 우리가 원하는 것은 공유 버튼이기 때문에 좌측 첫번째에 위치하고 있는 'Share Buttons' 라는 메뉴를 클릭하면 됩니다.
3. 단계
< 원하는 스타일 결정하기 'Select a tool type' >
- 블로그에 사용할 버튼 모양을 고르면 되는데요. 각자 원하는 취향에 맞게 버튼 모양을 선택해보세요. 필자는 가장 처음 메뉴인
Floating'을 골랐습니다. 해당 플로팅 기능은 항시 좌측 혹은 우측에 위치하는 기능입니다.
원하는 기능의 타입을 고르셨다면 좌측 하단에 위치한 'Continue'를 클릭해주시면 됩니다. Let's Go!!!
4. 단계
< 내 취향대로 'Customize Buttons' >
- 이제 거의 마무리 단계에 이르렀습니다. 해당 페이지에서는 공유 버튼의 위치, 크기, 스타일을 취향대로 고를 수 있습니다. 이것 저것 시도하시면서 원하시는 스타일의 공유 버튼을 만들어보세요.
스톱!, 가장 중요한 부분이 바로 여기입니다. 상단에 보면 'Selected by You' 라는 부분이 있는데요. 이는 제가 직접 아이콘의 배열을 직접 선택하고, 추가 SNS 공유 버튼을 추가할 수 있는 기능을 제공합니다. 첫 번째로 'Selected by You' 를 고르셨다면, 좌측 하던에 'ADD MORE SERVICES' 를 통해서 카카오톡, 카카오채널, 네이버밴드, 텀블러, 위챗 등과 같이 원하시는 SNS 버튼을 추가하실 수 있습니다.
5. 단계
< 코드 복사 후 붙혀넣기 'Copy and Paste your #Code' >
- 원하는 버튼을 세팅했다면, 이제 정말 마지막 단계입니다. 공유 버튼의 활성화를 위한 코드를 복사하고 붙혀넣으면 되는데요. 본문에 보면, 코드가 이미 적혀있는 것을 찾을 있고, 그 옆에 (+) 모양이 보이실겁니다. '플러스' 버튼을 클릭하시면 코드는 자동으로 클립보드에 복사되어 있습니다. 이제 티스토리 html 상에 코드를 붙혀넣기만 하면 됩니다. (단, 붙혀넣는 위치 또한 명시하고 있으니 꼭 참고하셔서 붙혀넣으셔야합니다.)
위에서 언급한대로, 코드를 복사한 후 티스토리 HTML 코드상 <body></body> 사이에 붙혀넣으면 됩니다.
티스토리 '스킨 편집'에 들어가시면 HTML 수정하는 곳에서 <body></body> 사이에 해당 코드를 붙혀넣으면 되는데요. 가장 찾기 쉬운 방법은 코드 가장 하단 부분에 가면 쉽게 위치를 정할 수 있습니다. 저 같은 경우에는 주로 편집하게 되는 부분에 저렇게 위치표식을 해두는데요. <!-- xxxxxxxx --> 라고 위 아래로 적어두면 다음 번에 수정을 할 때도 쉽게 찾을 수 있고, 해당 문자들은 HTML 상 어떠한 영향을 미치지 않는 그림자와 같은 존재들입니다. 유용한 팁이니 기억해두시면 좋을 것 같아요.
마지막 확인!
자! 그럼 정상적으로 작동을 하는지 확인만 끝나는데요. 한번 직접 볼까요?
저 같은 경우에는 좌측에 위치 시켰으며, 한국에서 가장 활용도가 높은 SNS 버튼을 위주로 설치했어요. 이 글을 읽고 계신 분들은 어떠세요? 정상적으로 잘 나오시나요?
지금까지 단계별로 SNS 공유 버튼을 넣는 작업을 해보았습니다. 도움이 되셨나요? 도움이 되셨다면, 저의 블로그에 하트 하나 뿅뿅! 날려주시고, 공감이나 응원댓글이 큰 힘이 됩니다. 그럼 다음에도 씨리얼에서 도움되는 정보를 공유하도록 하겠습니다. <씨리얼 필자>
_
[글쓴이 & 편집] 씨리얼 : SEE REAL
'IT & TECH' 카테고리의 다른 글
| [정보] 호재 덕에 폭등 '비트코인' 시장, 이대로 지속? (0) | 2018.07.18 |
|---|---|
| [정보] 애드워즈 키워드 플래너 사용법 및 키워드 고르는 방법 (0) | 2018.07.04 |
| [정보] 아이튠즈 아이폰 동기화 문제 해결 팁! (2) | 2018.06.25 |
| [정보공유] 차이슨? 가성비 갑을 자랑하는 청소기. C17 모델 짧은 리뷰 (1) | 2018.04.10 |
| [추천] 맥북 유저들에게 추천하는 스크린세이버! (2) | 2017.12.19 |