티스토리 블로그, 웹사이트에 sns 공유 버튼 달기 - addThis

미니쿠파

·

2020. 9. 28. 07:00

반응형

addThis sns 공유 버튼 달기
addThis sns 공유 버튼 달기

티스토리 블로그, 웹사이트에 sns 공유 버튼 달기 - addThis

나는 요즘 페이스북 페이지, 트위터 등 SNS 계정을 만들어 블로그를 홍보해보려고 하고 있다. 단순히 내가 직접 sns에 홍보하는 것뿐만 아니라 다른 사람이, 글을 읽는 사람이 sns에 내 글을 공유해주면 더 좋지 않을까 싶기도 했다.

트윈워드란 SEO관련 웹사이트에서 addThis 사이트를 처음 알게 됐다. addThis 사이트는 글 공유 버튼, 팔로우 버튼 등 다양한 위젯을 적용할 수 있게 해 준다. 그것도 무료로 말이다. 이번 글에서는 이 addThis 사이트를 통해 글 공유 버튼을 내 블로그나 웹사이트에 적용하는 법을 알아보도록 한다.

목차

    1. addThis 사이트 가입하기

    addThis 사이트 메인화면
    addThis 사이트 메인화면

    우선 addThis 사이트에 접속하자. 그럼 위와 같은 창이 나온다. 좀 더 편하게 가입하고 싶다면 Get started 버튼을 누르지 않고 구글 계정이나 페이스북 계정으로 로그인 하면 된다.

    addThis 사이트 가입하기

    구글, 페이스북과 같은 소셜 계정을 사용했다면 우측과 같은 창이 뜰 것이다. 만약 Get started 버튼을 눌렀다면 좌측의 사진처럼 입력칸이 더 많은 창이 뜰 것이다. 이메일을 입력하고 나라를 설정하도록 하자.

    addThis 사이트 가입하기

    나라를 한국으로 설정하고 나면 아래에 많은 선택지들이 나온다. 참고로 맨 위에 있는 선택지는 선택 사항이다.

    2. sns 공유 버튼 만들기

    다양한 위젯들을 사용할 수 있다.
    다양한 위젯들을 사용할 수 있다.

    addThis 사이트의 계졍을 만들었으면 위와 같은 창이 뜬다. 여기서 공유 버튼이나 팔로우 버튼, 최근 글 등 다양한 위젯을 사용할 수 있다. 좌측 상단의 Share Buttons 버튼을 클릭하자.

    다양한 종류의 sns 공유 버튼

    글 공유 버튼도 종류가 다양하다. 우선 기본적인 플로팅 버튼과 글 내에 삽입하는 형태, 우측에 펼칠 수 있는 형태 여러 가지 종류가 있다. 또 상단의 모바일 아이콘을 클릭해서 휴대폰에서는 어떻게 보이는지도 확인할 수 있다.

    종류를 선택했으면 아래 Continue 버튼을 클릭하자.

    sns 공유 버튼 설정하기

    버튼 종류를 선택했으면 위 처럼 세세한 설정을 할 수 있는 화면이 나온다. 그냥 기본 설정대로 사용하려면 그냥 좌측 하단의 Activate Tool을 클릭하면 된다. 내가 직접 공유할 sns들을 설정할 수도 있다.

    Smart sorting를 선택하면 사용자가 최근에 자주 사용한 sns을 보여준다. Selected by You를 선택해 직접 sns를 설정할 수 있다. 국내 sns는 카카오톡, 카카오스토리, 라인이 있었다.

    sns 공유 버튼 설정하기

    또한 공유 버튼의 디자인도 설정할 수 있다. 버튼의 크기, 색상도 설정할 수 있고 스타일도 설정할 수 있다. 또 글이 얼마나 공유됐는지도 표시할 수 있다. Individual을 선택하면 sns 각 각 공유된 개수로 나오고 Total를 선택하면 총합으로 표시된다.

    나는 버그인지 모르겠지만 애널리틱스에선 카카오톡, 페이스북 다양한 sns가 집계되지만 여기에선 모두 AddThis로 집계가 됐다.

    sns 공유 버튼 설정하기

    공유 버튼의 위치도 설정할 수 있다. 내 블로그는 좌측에 사이드바가 있어서 공유 버튼이랑 겹치기 때문에 오른쪽으로 설정해 놨다. 그리고 어느 주소에서만 보이게 하거나 어느 주소에선 숨기게 할 수 있다. 나는 메인화면에선 안보이게 설정해놨다.

    3. addThis 공유 버튼 적용하기

    addThis 버튼 적용하기
    addThis 버튼 적용하기

    Activate Tool를 클릭하면 이런 창으로 넘어와진다. 우선 적용하고자 하는 사이트의 종류를 선택하자. AMP, 워드프레스, 텀블러 등 다양한 서비스가 있다. 티스토리나 일반적인 웹사이트는 An HTML Website를 선택하면 된다.

    addThis 코드 복사
    addThis 코드 복사

    밑으로 내리면 이런 코드가 있다. Just Copy 밑에 있는 코드를 복사하자. 그리고 </body> 태그 바로 위에 붙여넣으면 된다. 티스토리 블로그를 예로 들어보겠다.

    티스토리에 적용하기

    블로그 관리 페이지에서 스킨 편집을 클릭하자. 그 후 html 편집 버튼을 클릭하자. html 탭을 클릭하고 아래로 쭉 내리고</body> 위에 아까 복사한 코드를 붙여 넣으면 된다. 그리고 적용 버튼을 클릭하자.

    4. 적용 된 모습

    블로그에 적용된 모습

    블로그에 적용해본 모습이다. 단순히 소스 코드 하나를 삽입하는 것만으로도 적용이 잘 된다. 내 프로필에 직접 공유도 해봤다. 아래 AddThis가 없었거나 내 블로그 명 등으로 돼있었으면 어떨까 싶기도 한다.

    sns 공유 통계 확인

    addThis는 애널리틱스도 지원한다. 여기에서 무슨 글이 얼마나 공유됐는지, 어느 sns에 얼마나 공유됐는지 확인할 수 있다. 방문자 수도 나오는데 이건 어떻게 집계되는지 모르겠다. 분명 sns 공유로 들어온 사람이 집계되는 것은 아닌데 그렇다고 블로그에 방문한 모든 사람들이 집계되는 것도 아니다.

    참고로 Tools 탭을 누른 후 위젯을 클릭해 다시 설정을 할 수 있다.

     

    관련 글

    티스토리 글 백업 하는 법 - TistoryBackup 프로그램

     

    티스토리 글 백업 하는 법 - TistoryBackup 프로그램

    티스토리 글 백업 하는 법 - TistoryBackup 프로그램 내 블로그가 갑자기 폐쇄돼거나 티스토리가 갑자기 서비스를 종료한다면 어떡하지 하는 불안감이 살짝 있었다. 한 유명 블로거가 갑자기 영구차

    minikupa.com

    티스토리 애드센스 상단 광고 2개 다는 방법

     

    티스토리 애드센스 상단 광고 2개 다는 방법

    티스토리 애드센스 상단 광고 2개 다는 방법 수익을 더 얻기 위해서나 여러 이유로 모바일에선 상단 광고를 한 개 두고 화면의 폭이 넓은 컴퓨터에선 상단 광고를 두 개 두시는 분들도 있습�

    minikupa.com

    티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴

     

    티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴

    변환하기 alt 태그 추가 alt태그란 우선 alt태그란 이미지의 대체 문구(alternative text)를 뜻하며, 이 alt태그는 이미지가 깨졌을 때 대체하여 보여지는 설명용 텍스트입니다. 네이버 웹마스터 가이드�

    minikupa.com

    반응형

    0개의 댓글