블로그 / / 2020. 4. 30. 10:56

옆으로 떠다니는 쉐어 디스 소셜공유단추 티스토리 블로그에 넣기

혼자 간직하려고 블로그에 글을 쓰고 공개하는 사람은 없습니다. 공개하는 것은 다른 이들과 함께 읽고 생각과 느낌을 공유하고 싶어서죠. 만약 혼자 보기를 원하는 사람이라면 비공개로 했을 것입니다. 

 

내 글을 공개한 이상, 이왕이면 많은 분들과 함께 생각을 나누고 싶은 것이 당연합니다. 그래서 우리는 블로그 피드를 구독하거나, 이웃을 맺고 서로 방문하기도 합니다. 그러다 좋은 글을 만나면 트위터나 페이스북 같은 소셜 미디어에 공유를 하기도 합니다. 요즘은 핀터레스트도 많이 이용하구요. 

 

이 블로그나 이 글을 읽고있는 여러분의 블로그도 마찬가지입니다. 누군가 글을 읽고 공유해준다면 정말 반갑고 고마운 일입니다. 그런데, 그렇게 기꺼이 내 글을 공유하는 분들을 위해 작으나마 도움을 드릴 방법이 있습니다. 바로 블로그 옆에 떠다니는 소셜 공유 단추를 만들어 놓기만 하면 됩니다. 이렇게 하면 글을 읽고 '공유해야지' 하고 마음먹었을 때, 공유 단추가 어디 있나 찾는 불편을 겪지 않아도 됩니다. 

 

이 블로그에는 sharethis 쉐어디스 소셜공유단추가 적용되어 있습니다. 말씀드린 대로 왼쪽 옆에 둥둥 떠다닙니다. 내가 글의 어느 부분을 읽고 있던 항상 고정되어 있습니다. 전에는 애드디스 공유단추를 달아놓았던 적도 있었습니다. 이번에 다시 붙여보니, 디자인이 마음에 들지 않게 바뀌었더군요. 이번에는 쉐어디스로 바꿔 달아 보았습니다.

 

옆으로 떠다니는 쉐어디스 소셜공유단추 티스토리 블로그에 넣기

 

1. ShareThis 방문하기

 

티스토리에 넣을 코드를 받기 위해 sharethis.com을 방문합니다. 

sharethis.com의 첫 페이지

sharethis에는 다양한 소셜 공유단추들이 있습니다. 주로 쓰게 되는 것은 왼쪽에 보이는 세로 막대형과 오른쪽에 희미하게 보이는 가로 막대형 단추입니다. 가로막대형 (inline) 상단이면 상단, 하단이면 하단 붙여놓은 자리에 고정되어 있습니다. 따라서 블로그 글을 읽느라 이동하면 사라져 보이지 않죠. 세로 막대형 역시 왼쪽이면 왼쪽, 오른쪽이면 오른쪽 붙여놓은 그 자리에 고정되어 있습니다. 가로막대형과 한 가지 다른 점은 글을 읽느라 스크롤을 위아래로 이동해도 그 자리에 떠 있다는 사실입니다. 

 

가운데 보이는 'Start with Share Buttons'라는 연두색 단추를 눌러 다음 단계로 이동합시다.

 

2. 단추 모양 고르기

 

단추 형식을 골라보세요

가로막대형(Inline Share Buttons)과 세로 막대형(Sticky Share Buttons) 두 가지 중에 하나를 고를 수 있게 되어있습니다. 요즘에는 floating이라는 말보다 sticky라는 말을 더 많이 쓰나봅니다. 

 

지금 우리에게 필요한 것은 옆에 붙박이로 고정된 세로막대 공유 단추입니다. Sticky Share Buttons를 선택하고 다음 'Next'단추를 누릅시다. 

 

3. 티스토리 블로그에 넣을 코드 받기

가.  </>HTML을 선택

이제 내가 어떤 CMS(Contents Management System, 콘텐츠 관리 시스템)를 쓰고 있는지 알려줘야 합니다. 

 

티스토리의 경우 맨 처음 보이는 </> HTML을 선택하고 'NEXT' 단추를 누릅니다.

워드프레스의 경우엔 물론 WordPress를 택해도 되고, 간단하게 플러그인을 적용해도 됩니다. 

나. 계정 만들기

소셜 어낼리틱스 서비스나 업데이트를 위해 계정을 만들라는 화면이 나옵니다. 

빈칸에 아이디로 쓰일 이메일 주소와 비밀번호를 넣고 'Get the Code'라고 적혀있는 연두색 단추를 누릅니다.

sharethis 계정 만들기

다. 블로그 주소 넣기

소셜 공유단추를 설치할 블로그 주소를 빈칸에 적고 CONFIRM 단추를 누릅니다.

 

4. 티스토리 블로그에 설치하기

  • 받은 코드를 복사해둡니다. 메모장에 붙여 보관해두어도 좋습니다.
  • 티스토리로 돌아와 블로그 관리 > 꾸미기 > 스킨 편집 > html 편집으로 이동합니다.
  • 아래 사진처럼 </head> 바로 윗부분에 붙여넣기 하면 됩니다.

html 편집에 붙여넣어요

 

쉐어디스 소셜공유단추를 적용한 모습입니다. 모서리 부분을 둥글게 하는 것은 설정에서 바꿀 수 있습니다. 

sharethis 소셜공유단추 적용한 모습

 

공유가 많이 되면 그것이 검색에 반영될 수도 있습니다. 지금 당장 구글 검색 저 뒤편에 있다 해도, 공유를 쉽게 함으로써 앞쪽 자리를 차지하게 될 수도 있죠. 하지만 역시 그 무엇보다 중요한 것은 내가 써서 올리는 글 내용의 충실성과 독창성에 있다는 것을 명심해야겠습니다. 

 

함께 읽으면 좋은 글

애드디스 공유단추

 

요건 뭐에 쓰는 물건이지? - 애드디스(add this) 공유단추

블로그 개편 이후, 글 제목과 본문 사이에 이렇게 생긴 단추들이 쪼르르 있는 것을 보셨으리라 생각합니다. 익숙한 분들도 계시겠고 그렇지 못한 분들도 계시리라 생각합니다. 또 처음 보는 것��

fruitfulife.tistory.com

 

반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유