내 블로그에 라인(Line) 메신저 공유 버튼을 달아보자!

한국에서는 여전히 카카오톡(Kakao Talk)이 메신저 서비스로 초강세를 보이고 있습니다. 카카오스토리(Kakao Story)도 선풍적인 인기를 끌면서 카카오톡과 서로를 이끌어주는 모습을 보여주고 있기도 합니다. 그런데 우리나라를 살짝 벗어나 이웃나라 일본, 대만, 인도네이사, 태국 등 아시아, 동남아 지역으로 눈을 돌려보면 새로운 세상이 펼쳐집니다. 바로 네이버가 내놓은 메신저 서비스인 라인(Line) 열풍 때문입니다.

라인 메신저의 사용자수는 지난해 말을 기준으로 3억명을 넘어섰습니다. 라인은 사용자 수에서도 의미있는 성과를 보여주고 있지만 수익면에서도 남다른 면모를 과시하고 있습니다. 매출이 사실상 정체기에 접어든 네이버의 작년 실적이 좋아질 수 있었던 이유가 라인 메신저를 통한 매출, 수익의 발생 때문이라는 것은 이미 시장에 널리 알려져 있습니다. 해석하면 라인 메신저는 충분한 사용자 기반을 바탕으로 의미있는 숫자를 만들어 내는 상황인 것입니다. 이쯤되면 블로그나 웹사이트를 운영하는 사람들이 라인 메신저를 신경쓰지 않을 수 없을 것 같아서 라인 메신저 공유 버튼을 다는 방법을 간단히 정리해볼까 합니다.

 
라인 메신저로 블로그 글을 걸기 위해서는 사용하고 있는 블로그 서비스에 따라 차이가 있을 것 같습니다. 설치형과 서비스형에서도 차이가 있을 수 있고 워드프레스, XE 등 사용중인 솔루션에 따라서도 적용방법은 상이할 것 같습니다. 라인 공식 웹 사이트에서 가이드하는 쉬운 방법은 자바스크립트를 이용하는 방법입니다. 샘플 코드까지 제공되고 있기 때문에 무척 편리합니다만 티스토리 기본 모바일 페이지(http://xxxxx.tistory.com/m) 에서는 자바스크립트가 제거되는 특성 때문에 사용이 어려운 편입니다. 공식 웹 사이트에서 제시하는 자바스크립트는 아래와 같습니다

<span>

<script type="text/javascript" src="//media.line.naver.jp/js/line-button.js?v=20131101" ></script>

<script type="text/javascript">

new jp.naver.line.media.LineButton({"pc":false,"lang":"en","type":"a"});

</script>

</span>

 
티스토리를 사용하고 있고 반응형 웹(Responsive Web) 스킨을 쓰지 않고 기본 제공되는 모바일 페이지를 쓰다보니 위의 공식 자바스크립트는 적용할 수가 없었습니다. 페이지의 제목과 주소링크를 자동으로 파싱해서 링크버튼을 만들어주는 훌륭한 기능을 눈물을 머금고 포기할 수 밖에 없었습니다. 버튼 하나 달려고 반응형 웹 스킨으로 갈아타는 것은 배보다 배꼽이 더 커지는 경우라 좋은 선택이 아니었기 때문입니다. 그래서 약간의 트릭으로 아래와 같은 HTML 을 이용해 봤습니다

<a href="/1378">내 블로그에 라인(Line) 메신저 공유 버튼을 달아보자!</a><a href="http://line.naver.jp/R/msg/text/?내 블로그에 라인(Line) 메신저 공유 버튼을 달아보자!%0D%0Ahttp://nopdin.tistory.com/1378"><img src="//media.line.naver.jp/img/button/en/73x20.png" width="73" height="20" alt="LINE it!" style="vertical-align:bottom; margin-left:5px;"></a>

 
(추가) 티스토리에서 키워드로 사용하는 부분이 화면에서 잘리네요, 아래 이미지처럼 위의 HTML 에 키워드를 추가해서 구성하시면 됩니다

중간에 들어간 [ ##_ _## ] 영역은 티스토리 스킨에 적용하기 위해서 사용한 티스토리 전용 키워드입니다. 워드프레스 등을 사용하는 경우 <?php the_title();?> 등 워드프레스에 맞는 코드를 넣어 주셔야 합니다. 위의 간단한 HTML 코드는 라인 공유 버튼을 이미지로 출력해 주고 버튼 클릭시 해당 블로그 포스트로 연결해 주는 기능을 수행합니다. 이 HTML 코드를 이용하는 것의 단점은 포스팅 본문에 해당 내용을 넣어줘야 한다는 점입니다. 특히 티스토리 기본 모바일 페이지를 쓰는 경우 스킨에 적용해봐야 별 소용(?)이 없기 때문에 더욱 그렇습니다. 테스트를 위해 본문에 코드를 넣지 않고 스킨에서 제목 영역을 찾아 코드를 삽입해 봤습니다.

 

왼쪽 스크린샷은 처음 알려드린 스크립트를 적용했을 때 기본 티스토리 모바일 스킨이 버튼 표시를 제대로 안해주는 광경(?)입니다. 이 경우는 본문에 두번째 알려드린 HTML 코드를 넣는 것이 해법입니다. 티스토리의 서식 기능을 이용해서 라인 공유 버튼을 적절히 넣는 것은 각자의 숙제로 남겨두고, 공유 버튼을 적용하면 어쨌든 어떻게 동작하는지를 한 번 살펴보는 것이 이번 포스팅의 주제이니 한 번 살펴보도록 하겠습니다. 우측의 스크린샷은 두번째 HTML 태그를 스킨 편집을 통해 포스팅 제목 우측에 위치하도록 한 결과입니다. 모바일에서는 PC 페이지로 접근해야 위와 같이 보이게 됩니다. 티스토리는 태블릿 등을 이용하는 경우 모바일 페이지가 아닌 PC 페이지를 노출해 주기 때문에 아주 시의 적절한 구현이 아닐까 생각하고 있습니다 -_-;;;

공유버튼을 누르면 자동으로 설치된 라인 앱이 실행되면서 1) 사용자를 선택하여 메세지로 링크를 전달하거나, 2) 라인 타임라인에 글을 올릴 수 있습니다. 새벽시간에 민폐를 끼치지 않기 위해 제 담벼락에 제 글을 한번 공유해 봤습니다. 제목과 함께 링크 주소가 전달되기 때문에 다른 사람들에게 링크의 시인성을 잘 전달해 주고 있는 모습이 보입니다. 라인을 열심히 쓰면서도 타임라인을 제대로 써보진 않았는데 링크에 대한 파싱도 해서 사진을 노출해주는 아름다운 결과물이 탄생했습니다.

아시아를 중심으로 대세 메신저로 위챗(We Chat)과 맞짱을 뜨고 있는 네이버의 라인 메신저. 라인 메신저를 애용하고 있다면 라인 메신저 공유 버튼을 통해서 더 많은 정보를 라인으로 공유해 보시는 건 어떨까요? 그리 어렵지 않은 코드 몇 줄이니 누구나 쉽게 이용할 수 있을 것 같습니다!

2014/01/13 - 소셜 검색엔진 젤리(Jelly), 사진으로 묻고 소셜 네트워크에서 답을 찾아라!
2013/12/31 - 주가로 보는 IT흥망성쇄, 트위터 (Twitter)
2013/11/25 - 라인 메신저 가입자수 3억 돌파의 빛과 그림자
2013/10/16 - 네이버 라인 메신저(Line Messenger), 데스크탑과 모바일에서 영상통화를!
2013/10/11 - 한달에 2천원으로 오피스 2013을 쓴다고? - 마이크로소프트 오피스 365 University