블로그 유입을 늘리기 위해 SNS 공유를 쉽게 하는 기능이 필요하다.
누군가 내 글에 관심을 가지고 SNS 공유를 하는게 쉽기 않은 선택이다. 이렇게 해주시는 분들이 많아지면 고마운 일이다.
원래대로 하려면 브라우저에서 URL을 복사해서 SNS 페이지를 열고 글쓰기를 열고 복사한 URL 을 붙여 넣어야 한다.
그런데, 사람들은 UX를 더 줄이 고 버튼 하나로 최대한 간단하게 내 블로그를 공유할 수 있는 기능을 만들기 시작한다.
블로그의 선구자들의 글을 읽어보니 블로그 활성화를 위해서 SNS 를 잘 활용하여 유입을 늘려야 한다고 강추한다.
SNS 공유 기능을 쉽게 만들 수 있는 방법이 있을까?
SNS 공유 서비스 사용하기
기존 블로그 서적과 정보들을 리뷰하니 AddThis 라는 서비스를 많이 활용하고 있었던 것 같다. 그런데 이 서비스 사이트를 가니 종료되었다.
다른 대안이 없는지 살펴보니 Shareaholic 서비스도 많이 사용하는 것 같다. 일단 가입을 하고 공유할 수 있는 플랫폼들을 확인하고 삽입코드까지 확인했다.
그런데, 이렇게 코드를 넣으려고 생각해보니 이전에도 기능들을 활성화할 때에 스쳐지나간 생각이 데자뷰되었다. 혹시 Gatsby 플러그인이?
혹시나 하는 생각으로 플러그인 검색을 시도하였다. 보통 gatsby, plugin, sharing, social 이렇게 하면 뭔가 나오겠지…
오호라, 역시 위대한 개츠비님이다. 많은 이들이 함께하고 있음을 느끼게 하는 뿌듯함이 밀려오며 플러그인을 찾았다.
gatsby-plugin-addsocialshare-share이름도 직관적이다. addsocialshare! 이거는 혹시 일일이 버튼을 Gatsby 가 그려주는 기능인지 내용을 살펴보았다.
다행히, 그런 원시적인 기능은 아니다. 앞에서 검토한것처럼 서비스를 연결하는 기능이다. addsocialshare 이라는 서비스가 존재하는 것을 확인한다.
공유하는 서비스이기 때문에 가입도 안해도 된다. 이 서비스 유지하시는 분들 입장에서는 서비스 유지가 애매하기 하겠다.
아무튼, 쓰 는 사람 입장에서는 간결해서 좋다. 사용할 때에 서비스 이름이 간간히 나오기는 하지만 이정도는 무난하다.
공유하기 기능을 하나 하나 만들지 않고 쉽게 가져다 사용할 수 있다면 고마운 일이다. Thank You
플러그인을 설치하면 이제 환경을 구성해보자
Add Social Share 환경구성
Gatsby 플러그인을 설치하면 Gatsby-config.js 에서 항상 플러그인을 설정해 주어야 한다.
{
resolve: `gatsby-plugin-addsocialshare-share`,
options: {
size: 32,
providers:{"facebook":"Facebook","twitter":"Twitter","kakao":"Kakao","linkedin":"Linkedin","pinterest":"Pinterest","copylink":"Copy Link"},
corners:"5%",
//bgcolor:"#000000",
interfacetype: "floating", //inline,floating
topoffset: "30%", //work only floating interface
id: ".ass_interface",
alignment_desktop: "left", //left,right,hide
alignment_mobile: "bottom", //top,bottom,hide
},
},이런 저런 옵션들을 바꾸면서 대략 한국과 Gatsby 환경에서는 이정도가 적절한 구성으로 판단된다.
size 는 아이콘의 크기이다. 너무 커도 공간을 차지하고, 작으면 누르기 힘들 것 같다. 32 정도로 적절하게 유지한다.
providers 는 버튼으로 표현되는 플랫폼들이다. 하나하나가 주옥같은 글로벌 기업들의 로고를 제공한다.
한국 서비스들도 선전하고 있다. 카카오가 있다. 카톡은 아니고 스토리. 라인도 있는데 내가 잘 안쓰는 것들은 일단 제외.
직접적으로 URL을 복사하기 하는 기능은 어디서나 기본적으로 사용할 수 있도록 해주는 것이 좋다.
물론, 공유하기 기능은 앱에서도 기본 기능으로 활용할 수 있는 내용이 있지만 웹 환경까지 고려해주자.
위치는 플로팅으로 UI 배치에 자유도를 주고 광고가 안붙는 PC 좌측과 하단 영역(여기 광고 노출은 나중에 확인해 보자)
topoffset 은 PC에서 좌측에 붙일 때에 top에서 얼마나 여백을 주는지 설정하는데 30% 정도면 중간에 배치된다.
실제 삽입된 화면을 살펴보자
굳이 캡쳐 이미지로 표현하지 않아도 이 사이트에 이미 잘 붙어 있다. 한번씩 눌러보면서 라이브 데모로 서비스 확인하자.
근데, 버튼으로 설정하지 않은 마지막 버튼이 계속 따라온다. 저게 뭐지, 하면서 설정을 보아도 그런 버튼은 없는데..
한번 눌러 보았다. 와우~ 서비스가 제공하는 모든 공유 플랫폼을 나열하는 더보기 버튼이구나! 놀랍다. 공유할 곳이 많다.
플러그인 설치 하나로 엄청 혜자스러운 효과를 얻은 것 같아 뿌듯하다.
이제 SNS에 사이트를 공유할 준비가 되었다.