티스토리 블로그에 소셜 공유 위젯 달기 GetSocial

티스토리 블로그에 FLARE라는 서비스를 이용해 소셜 공유 버튼을 설치하는 방법을 소개한 적이 있다. 나 역시 최근까지 FLARE를 이용해 왔다. 어느날 한 독자분이 IE(인터넷 익스플로러에서 접속하면 화면이 멈추는 현상이 발생한다는 오류 리포트를 보내오셨다. 테스트를 해보니 크롬에서는 이상이 없는데 IE에서는 실제로 스크롤을 내렸을 때 화면이 멈추는 현상이 발생했다. 관리자화면으로 들어가서 FLARE 스크립트를 삭제했더니 감쪽같이 오류가 사라졌다. 이럴수가! 그럼 대안을 찾아봐야겠다고 생각했다. 디자인과 성능에 문제가 없는 소셜 공유 위젯 서비스를 검색하다가 GetSocial을 찾았다. 겟소셜은 디자인도 예쁘고 오류도 발견되지 않아 블로거팁닷컴에도 설치했다. 겟소셜 공유 위젯을 설치하는 방법에 대해 알아보자.

GetSocial https://getsocial.io

첫화면에서 주황색 버튼(Increase Your Visitors Now!)을 누르거나 우측 상단의 Get Started 버튼을 누르자.

블로그 주소, 이메일 주소, 패스워드를 입력한다. 이때 패스워드는 실제 사용하고 있는 이메일 패스워드를 입력할 필요는 없다. 겟소셜에서 사용할 비밀번호를 입력하면 된다. 녹색버튼(Create your basic account)을 누르자.

먼저 1번의 코드를 복사해 티스토리 블로그에 붙여넣어야 한다. 2번의 인스톨을 눌러 디자인과 기타 설정을 맞춰줘야 한다. 먼저 1번의 설치코드를 넣는 방법부터 알아보자.

새 창을 하나 띄우고 티스토리 관리자 화면에 접속하자. HTML/CSS 메뉴를 클릭하고 편집창으로 들어와 Ctrl+F키를 누르자. /head 를 입력하고 검색하면 /head가 아래 화면처럼 노랗게 표시될 것이다. 그 앞에다 앞서 복사한 코드 내용을 붙여넣고 저장을 누르면 된다.

이번에는 2번(위로 2번째 화면)의 Install을 클릭하고 디자인 부분을 손봐야 한다. 1번은 특정 화면에서 소셜 공유 위젯이 보여지지 않도로 하는 기능이다. 2번은 실시간 미리보기 화면으로 옵션을 변경할 때마다 실시간으로 2번 영역에 반영된다. 3번은 소셜네크워크서비스를 선택하는 화면이다. 버튼을 클릭해 추가/삭제할 수 있다. 다 됐으면 4번의 저장하고 활성화하기(Save and Activate) 버튼을 누르자.

위 화면에서는 보여지지 않고 있으나 전 단계에서 화면을 스크롤해서 내리면 3/3 Installation 영역이 나온다. 이 코드는 소셜 공유 위젯이 보여질 위치에다 넣어주면 된다.

티스토리 관리자 화면 -> HTML/CSS 메뉴를 클릭해 편집창이 나오면 Ctrl+F키를 누르고 article_rep_desc라고 입력한다. 아래 화면에 보이는 것처럼 해당 코드가 있는 곳이 나타난다. article_rep_desc 앞에다 전 단계에서 복사한 코드를 붙여넣으면 본문 상단에 위젯이 보여지고 아래 화면에 보이는 것처럼 뒤에다 붙여넣으면 본문 하단에 위젯이 보여진다. 자신의 기호에 따라 원하는 위치에 붙여넣으면 된다. 정보가 유용했다면 이 글 아래에 보이는 페이스북 버튼을 눌러 페북 친구들에게 공유해보자! :)

사진 ponsulak