블로그에 공유버튼 간단히 설치하는 방법

블로그 혹은 뉴스 사이트에 접속하면 해당 글(기사)을 트위터나 페이스북으로 보내는 버튼을 볼 수 있습니다. 인터넷 매체 '허핑턴 포스트'나 삼성전자 기업블로그 '삼성투모로우'에 가보면 독창적인 디자인의 공유 버튼이 글마다 보여지고 있습니다. 기업이나 뉴스 매체는 디자이너가 있기 때문에 고유의 디자인으로 직접 버튼을 만들어 사용할 수 있습니다. 그러나 저처럼 디자이너도 아니고 그렇다고 포토샵 실력도 뛰어나지 않은 사람들은 공유버튼 설치 사이트를 이용하는 게 좋습니다.

티스토리 블로그는 관리자 페이지의 플러그인을 이용해 'SNS 공유 버튼'이나 '페이스북 좋아요 버튼'을 설치할 수 있으나 버튼의 종류 및 디자인이 극히 제한적입니다. 간단히 블로그 공유 버튼을 설치할 수 있도록 도와주는 웹사이트가 몇군데 있는데요. 그 중에서 설치가 가장 쉽고, 깔끔한 버튼 디자인을 제공하는 Add This를 추천합니다. 사진 Shutterstock

Add This 공유 버튼 설치 페이지 https://www.addthis.com/get/sharing

 
우선 회원가입(무료)을 합니다. 그리고 위의 주소로 접속하면 아래와 같은 화면이 나옵니다. 워드프레스나 구글 블로거 유저가 아니라면 A Website 그대로 두시면 됩니다. 1번 영역 아랫부분에서 버튼 스타일을 선택합니다. 세로 버튼은 블로그 좌, 우에 붙일 수 있습니다. 2번영역에서 표시됐으면 하는 버튼과 삭제하고 싶은 버튼을 입맛에 맞게 선택할 수 있습니다. 

 

다 됐으면 아래쪽에 있는 Grab It 버튼을 눌러 소스를 복사합니다. 이제는 이 소스를 블로그에 삽입해 줘야합니다. 제목 아래에 설치하는 방법과 본문 하단에 설치하는 방법을 나눠서 설명드릴게요.

 

제목 아래에 설치하는 방법

티스토리 관리자 페이지 메뉴에서 'HTML/CSS 편집'을 누릅니다. skin.html 편집창이 아래와 같이 나타나면 Ctrl+F를 누르고 article_rep_title 이라고 입력합니다. 그러면 아래에 주황색으로 표시된 곳처럼 해당 위치가 나타납니다. 그 바로 옆 혹은 밑에다 이전 단계에서 복사한 소스를 그대로 붙여넣기(Ctrl+V) 하시면 됩니다. '저장' 버튼을 눌러 저장합니다.

제목 밑에 버튼이 잘 표시되고 있습니다. 이제는 본문 하단에 설치하는 방법을 알아볼게요.

본문 하단에 설치하는 방법

 
'HTML/CSS 편집'창을 열고 Ctrl+F를 눌러 article_rep_desc 를 검색합니다. 위치가 주황색으로 표시되는데요. 그 아래나 옆에 복사한 소스를 그대로 붙여넣기(Ctrl+V) 하면 됩니다. '저장' 버튼을 눌러 변경사항을 저장합니다.

본문 하단에도 공유 버튼이 잘 나오고 있습니다.