안녕하세요, 랭크로(Rankro)입니다. 이번 시간에는 본인이 작성한 블로그를 외부에 공유할 수 있도록 도와주는 공유버튼을 만드는 방법에 대하여 알아볼까 합니다. 블로그에 유입되도록 하는 방법에는 검색에 의한 방법, 직접 링크를 통한 방법 등 여러 가지가 있죠. 그 중 '공유버튼'을 통한 블로그 유입은 날개와도 같은 방법입니다. 내가 작성한 블로그를 누군가가 다른 사이트에 퍼가거나 직접 링크를 걸 수도 있지만, SNS(소셜 네트워크 서비스)를 통하여 전파시킬 수도 있습니다. 하지만 SNS에 등록하고 싶어도 블로그에 연결고리가 없다면 실행이 안되겠죠.
공유버튼이 설정되어 있고 블로그의 글이 충분히 매혹적이라면 누군가가 해당 블로그의 글을 페이스북, 트위터, 카카오톡 등의 SNS로 퍼나를 수 있을 것입니다. 그런 공유버튼을 만들어주는 사이트가 AddThis 라는 곳입니다. 공유버튼을 예쁜 디자인으로 제공해주고, 블로그공유현황이나 유입정도에 대한 정보도 알 수 있도록 도와주는 역할도 해줍니다. 여러모로 쓸모있는 Add this 사이트의 공유버튼만들기. 지금 시작해볼까요?
이 포스팅과 어울리는 다른 글도 확인해보세요.↓ ↓ ↓ ↓
↓ ↓ ↓ ↓
[Tistory]Bing 검색등록, 사이트맵 및 RSS 등록, Bing 웹마스터 익숙해지기
공유버튼 만들기 첫 번째 단계 : Addthis 가입하기
공유버튼을 제공해주는 사이트는 AddThis 입니다. 가입 먼저 진행해 보겠습니다.
AddThis : https://www.addthis.com
▼ 티스토리 블로그에 공우버튼을 만들기 위해 AddThis 사이트에 접속해줍니다.
▼ 홈페이지 화면입니다.
홈페이지 디자인이 깔끔하네요.
▼ 우측 상단의 'Dashboard' 버튼을 눌러서 들어갑니다.
▼ 다시 우측 상단의 'Sign Up' 버튼을 클릭해서 들어갑니다.
아래의 'Sign in' 부분은 가입이 완료된 후 로그인 하는 곳입니다.
▼ 여러가지 입력하는 곳이 있지만 네 가지만 입력해주시면 됩니다.
Email Address (이메일주소), Password (패스워드) Retry Password (패스워드 재입력), Country (국적 : 한국으로 선택) 네 가지만 입력해주세요.
▼ 그리고 아래에 나와있는 여러 체크란들은 비워두셔도 됩니다.
체크 하지마시고 넘어가세요.
▼ 입력이 완료된 후 1. '로봇이 아닙니다'에 체크, 2. Let's Get Started' 버튼을 클릭합니다.
그럼 가입과 동시에 바로 공유버튼 만들기로 넘어갑니다.
공유버튼 만들기 두 번째 단계 : Addthis에서 공유버튼 만들기
▼ 'Share Buttons' 버튼을 클릭해주세요.
▼ 타입은 선택하기 나름입니다. 원하시는 종류를 선택해주세요
저는 Floating 타입으로 선택했습니다.
▼ Floating 타입은 블로그 페이지에서 스크롤 이동할 때마다 따라다니는 종류입니다.
▼ 타입선정이 끝났다면 'Continue' 버튼을 클릭해주세요.
▼ 본격적인 디자인입니다. 먼저 상단 첫 번 째 버튼을 클릭해서 공유서비스 종류를 선택해주세요.
아래의 'Selected by You' 를 선택하면 원하는 SNS를 골라서 담을 수 있습니다.
▼ 상단 두 번 째 버튼을 클릭해서 디자인을 변경해줍니다.
여기서 Mobile Size 등의 크기와 색상, 스타일 등을 변경할 수 있습니다. 잘 모르겠으면 그냥 넘어가셔도 됩니다.
▼ 세 번 째 버튼을 클릭해서 공유카운터 설정을 해주세요.
공유버튼에 공유가 얼마나되고 있는지 카운터를 달아줍니다. 원치 않으실 경우 'None'을 선택하시면 됩니다.
▼ 네 번 째 버튼을 클릭하여 위치적용을 변경합니다.
데스크탑은 원하는 위치에 두시면 되는데, Mobile의 경우에는 스킨의 종류에 따라 화면이 좁아보일 수 있습니다. 저는 답답한 느낌이 들어서 휴대기기에서는 보이지 않는 'Hide'를 선택했습니다.
▼ 여러가지 설정이 끝났다면 아래의 'Activate Tool' 버튼을 클릭해줍니다.
▼ 스크립트 코드가 생성이 되어 있는것을 확인할 수 있습니다.
아래 생성된 하늘색 영역의 코드를 복사해줍니다.
▼ 아래에는 예시가 나와있군요. </body> 태그 바로 위에 넣으시면 됩니다.
공유버튼 만들기 세 번째 단계 : 티스토리 html 편집기에 붙여넣기
▼ 그럼 티스토리 블로그에 반영해볼까요? 티스토리 관리자페이지의 '꾸미기' 하위의 '스킨편집' 버튼을 클릭해줍니다.
▼ 우측 상단의 'html 편집' 버튼을 클릭해주세요.
▼ html 편집화면에서 Ctrl+F로 '/body' 을 검색어로 하여 찾아줍니다.
제일 아래로 스크롤해서 내려가도 됩니다. 제일 아래 부분에 있어요.
▼ </body> 태그위에 좀 전에 복사해뒀던 스크립트 파일을 붙여넣습니다.
▼ 붙여넣기가 완료되었으면 '적용'버튼을 눌러줍니다.
▼ 그럼 아까 만들어 두었던 공유버튼이 생성된 것을 확인할 수 있습니다.
어때요? 참 쉽죠?
지금까지 AddThis 사이트를 활용하여 공유버튼을 만드는 방법에 대하여 알려드렸습니다. 정보가 여러분께 도움이 되셨다면 공감과 댓글 부탁드립니다.
이상으로 포스팅을 마칩니다.
공감과 댓글은 랭크로에게 힘을 더해줍니다!
Fin.
Posted by RankRo (https://rankro.tistory.com)
'티스토리 > 프로그램,사이트' 카테고리의 다른 글
| 이미지에 모자이크 효과를 주는 가장 쉬운 방법 - 포토스케이프 (0) | 2019.09.19 |
|---|---|
| [Tistory]포토스케이프로 사진 여러장을 움짤(gif 애니메이션)로 만들기 (0) | 2019.08.23 |
| Allcap(올캡) 프로그램으로 동영상 움짤 만들기 (동영상 gif 변환) (0) | 2019.08.11 |
| 포토스케이프 기본 사진편집기능 알아보기(회전,뽀샤시,저장 등) (0) | 2019.07.26 |
| [Tistory]포토스케이프(PhotoScape)를 활용하여 사진에 워터마크 삽입하기 (0) | 2019.07.24 |
