블로거팁닷컴


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

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

티스토리 블로그는 관리자 페이지의 플러그인을 이용해 '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) 하면 됩니다. '저장' 버튼을 눌러 변경사항을 저장합니다.



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


 
신고


댓글을 달아 주세요

  1. BlogIcon 쭈니러스

    페북에서 보고 방문합니다.
    좋은 정보 감사드립니다~ 앞으로 링크 하고 자주 방문하겠습니다ㅎ

     ×  +
  2. BlogIcon Zet

    네! 자주 뵙겠습니다. :)

     ×
  3. BlogIcon 한다맨

    글 잘봤습니다. 그런데, 이거 네이버 블로그에 적용시킬 수 있는 방법 없을까요??

     ×  +
  4. BlogIcon Zet

    네이버 블로그는 제가 알기로..
    HTML/CSS 편집이 안되는 걸로 알고 있습니다.

    아마 안 될 거에요..
    :(

     ×
  5. BlogIcon 열매맺는나무

    ㅎㅎ 저도 이 글 보고 위에만 두었던 애드디스 공유단추를 글 아래쪽에도 넣어봤습니다. ^^

     ×  +
  6. BlogIcon Zet

    잘 하셨습니다!

     ×
  7. BlogIcon 뭘해도될놈

    좋은 정보 감사합니다.

     ×  +
  8. BlogIcon 몽돌

    감사히 배우겠습니다.ㅎ

     ×  +
  9. 비밀댓글입니다

     ×  +
  10. BlogIcon 엘리스 블루

    많은 도움이 되었습니다~ 감사합니다 ^^

     ×  +
  11. BlogIcon 가디엘

    내일 바로 적용해 봐야겠어요. 감사합니다

     ×  +