라인 공유 버튼, 라인으로 보내기 버튼 달기, 모바일, 워드프레스

모바일, 워드프레스, 일반 웹페이지에 라인으로 보내기 버튼 달기

페이스북, 트위터 등 다양한 SNS의 공유버튼을 워드프레스, 그누보드, 제로보드 등에서 많이 이용을 하고 있습니다. 워낙 유명하다보니, 인터넷에서 검색을 하면 설치 방법을 쉽게 찾을 수 있으며, 설치 방법도 어렵지 않아서 많이 사용을 하고 있습니다.

네이버 재팬의 라인(LINE)도 비슷한 기능을 가진 버튼이 있으며, 네이버 재팬에서 운영하지만, 일본에서 가장 많이 사용하므로 일본에서 가장 먼저 이 기능이 사용되기 시작습니다. 일본에서는 LINEで送る(라인데오크루)라고 합니다.

이 기능은 모바일 사이트, 워드프레스, 일반 웹사이트에서 버튼을 달아두고 유저가 클릭시에 해당 페이지 또는 정보를 라인앱으로 바로 보내어 주는 기능입니다.

현재는 일본어, 영어 버전에 대해서만 이용 방법이 설명이 되어 있으며, 한국어 설명은 아직 없는 것 같습니다. 라인(LINE)이 한국에서는 카카오톡에 밀려서 인지도가 떨어져서 인지도 모르겠습니다.

라인으로 보내기 버튼 달기

1. 라인 페이지에 접속을 해서 이미지를 다운로드 받습니다.

라인으로 보내기 일본어 설명 페이지 : http://media.line.me/howto/ja/

라인으로 보내기 영어 설명 페이지 : http://media.line.me/howto/en/

페이지의 가장 아래에 보시면, 일본어 페이지의 경우 ボタン画像をダウンロード, 영문 페이지의 경우 Download Button Images 를 클릭하여 이미지를 다운로드 받습니다. ( 영문 페이지를 이용하시는 것이 편할 것입니다. )

2. 다운로드 받은 파일의 압축을 해제하면, 여러 종류의 이미지를 보실 수 있습니다. 원하는 사이즈를 선택하셔서 원하시는 페이지에 넣어서 링크를 하시면 됩니다. ( 개인적으로 만든 이미지는 사용하시면 안된다고 하네요.. 라인으로 보내기 가이드라인을 확인하시기 바랍니다. )

이미지 다운로드 ⇒ 원하는 페이지에 링크

정말 간단한 설치입니다. 웹페이지 작성, 워드프레스 등을 조금이라도 해보신 분들이라면, 정말 간단하게 세팅이 가능하리라 생각됩지만, 실제 설치를 해보면 그렇지 어떨까요?

특히, 일반 웹페이지에 라인으로 보내기 버튼을 설치하는 것이 좀 헷갈릴수도 있습니다.

모바일(Mobile) 페이지 세팅 방법 ( 영문페이지 기준 )

1. http://media.line.me/howto/en/ 로 접속을 합니다.

2. Installation on Smartphone Website 라는 부분에서 이미지를 선택하고, 공유하고자 하는 텍스트를 선택하시면, Check preview and copy code 라는 부분에 자동적으로 소스 코드가 만들어 지는데, 복사하시고 원하시는 모바일 사이트에 붙여넣기를 하셔서 사용하시면 됩니다. 

주의 사항 : 위의 코드를 복사하여 붙여 넣기를 하셔도, PC에서는 확인이 되지 않습니다. 반드시 스마트폰 등의 모바일 기기에서 확인하셔야 확인이 가능합니다. 

3. 언어 설정

<span>

<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>

<script type="text/javascript">

new media_line_me.LineButton({"pc":false,"lang":"en","type":"e"});

</script>

</span>

핑크색으로 표시된 부분의 lang 설정이 en 일 경우에는 표시되는 이미지의 글자가 "LINE it" 처럼 영어로 표시되며, lang 가 ja 로 설정이 될 경우에는 "LINEで送る"와 같이 일본어로 표시됩니다.

type은 버튼 이미지를 나타내며, 좌측부터 a, b, c, d, e 입니다.

PC 페이지 설정 방법

PC 페이지 설정 방법은 2가지로 설정이 가능합니다.

http://line.me/R/msg/<CONTENT TYPE>/?<CONTENT KEY>

일반적으로 많이 사용하는 방법입니다. 클릭하면 웹브라우저가 실행되고, 라인 앱이 설치 되어 있을 경우에는 바로 라인 앱으로 연결이 됩니다. 

line://msg/<CONTENT TYPE>/<CONTENT KEY>

이 방법은 클릭하면 바로 라인 앱이 실행되는 방식이지만, 라인 앱이 설치되어 있지 않을 경우 아무런 변화가 없습니다. 텍스트와 이미지 2 스타일로 보낼수가 있지만, iOS7에서는 이미지를 보낼수 없으므로 아직은 처음 방법을 사용하는 것이 좋지 않을까 합니다. 

워드프레스(Wordpress) 설정 방법

1. 아래의 코드를 복사합니다.

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[URL of Button]" width="[Width of Button]" height="[Height of Button]" alt="LINE it!" /></a>

2. [URL of Button], [Width of Button], [Height of Button] 만 수정하시면 됩니다.

[URL of Button] : 버튼 이미지의 URL 주소

[Width of Button] : 버튼의 가로 사이즈

[Height of Button] : 버튼의 세로 사이즈

그 외는 수정하셔도 되지만, 수정하지 않으셔도 됩니다. 예는 아래와 같습니다.

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="./images/linebutton_40x40_en.png" width="40" height="40" alt="LINE it!" /></a>

일반 웹페이지 설정 방법

1. 라인 페이지에서는 아래와 같은 예문을 보여주고 있습니다.

<a href="http://line.me/R/msg/text/?LINE%20it%21%0d%0ahttp%3a%2f%2fline%2enaver%2ejp%2f"><img src="[URL of Button image]" width="[width of Button]" height="[height of Button]" alt="LINE it!" /></a>

2. 무엇을 말하는지 알것도 모를 것도 같습니다.

다른 부분은 괜찮은데, 오렌지 색상으로 표시 된 부분입니다. 

LINE%20it%21%0d%0ahttp%3a%2f%2fline%2enaver%2ejp%2f

%도 보이고 영문도 보이면서 알송달송합니다. 다 같은 형식이지만, 웹페이지의 경우에는 컨텐트 타입은 text 로 별 문제가 없지만, 컨텐트키가 문제이지요. 

위의 ?LINE 로 시작하는 코드는 컨텐트키(content key)를 UTF8 형식으로 변환해서 입력한 코드입니다.

실제로 보내는 텍스트는 LINE it! http://line.naver.jp/ 를 보내는 것이랍니다.

실제로는 <a href="http://line.me/R/msg/text/?LINE it! http://line.naver.jp/"><img ... /> 으로 보내는 것인데 UTF8로 인코딩을 하기 때문에 좀 거창하게 보이는 것이지요.

왜 UTF8로 인코딩을 하는 것일까요?

글자가 깨어지지 않게 하기 위함이지요. 영어를 제외한 일본어, 한국어, 중국어 등 글자가 브라우저의 주소창에 바로 입력이 되었을 경우, 바로 나타나는 경우도 있지만, PC의 환경, 웹페이지와 브라우저에 따라서 글자가 깨어져서 정상적으로 표시되지 않는 경우가 있기 때문입니다.

UTF8로 인코딩, 디코딩 가능한 웹사이트 : http://encoder.mattiasgeniar.be/index.php 

UTF8 인코더, 디코더로 검색을 하시면 많은 사이트가 검색되며, 원하시는 사이트에서 간편하게 인코딩, 디코딩이 가능합니다.

꼭 UTF8로 인코딩을 해서 입력을 해야 하는 것인가요?

선택에 맡기겠습니다. 한글로 입력을 하셔도 상관이 없지만, 유저에 따라서 글자가 깨어져 나올수 있다는 것이지요. 영문만 사용할 경우에는 별 문제가 없지만, 한글 또는 일본어를 사용할 경우에는 깨어져 나올 수 있습니다.

라인 보내기의 기본 코드는

http://line.me/R/msg/<CONTENT TYPE>/?<CONTENT KEY>

입니다. 여기에서 CONTENT TYPE는 text 로 고정을 한다고 가정하면,

http://line.me/R/msg/text/?<CONTENT KEY>

붉은색은 고정으로 변경할 필요가 없으며, CONTENT KEY만 원하는 메세지로 대체를 하면 된다는 말이지요.

예를 들어 "불타는 금요일" 이라고 메세지를 보내고 싶은 경우에는

http://line.me/R/msg/text/?불타는 금요일

 CONTENT KEY만 불타는 금요일로 변경을 하면 됩니다. 그러나 한글이 주소창에서 깨어질 확율이 있으므로 %EB%B6%88%ED%83%80%EB%8A%94%20%EA%B8%88%EC%9A%94%EC%9D%BC 인코딩하여 입력을 하는것 뿐입니다.

http://line.me/R/msg/text/?%EB%B6%88%ED%83%80%EB%8A%94%20%EA%B8%88%EC%9A%94%EC%9D%BC

그럼 전체 소스는 어떻게 되는지 예를 들어 보겠습니다.

불타는 금요일 http://burningfriday.co.kr/ 을 보낸다고 할 경우의 전체 소스 코드는 아래와 같습니다.

<a href="http://line.me/R/msg/text/?

%EB%B6%88%ED%83%80%EB%8A%94%20%EA%B8%88%EC%9A%94%EC%9D%BC%0D%0Ahttp%3A%2F%2Fburningfriday.co.kr%2F

"><img src="./image/linebutton_40x40_en.png" width="40" height="40" alt="불타는 금요일" /></a>

실제 위의 코드로 라인으로 보내어 보면

위와 같이 라인 앱에서 확인이 됩니다. 소스 코드에서 %0D%0A는 PC에서 Enter 키를 누른것과 같이 한줄을 내려쓰는 코드이며, 필요가 없을 경우네는 생략해도 상관이 없습니다.

주의 사항 : PC에서 접속하여 웹브라우저로는 확인이 되지 않습니다. 반드시 모바일 기기에서 실행을 하셔야 라인 앱으로 자동 연결이 됩니다.

라인으로 보내기는 현재 한국어 페이지는 없으며, 관련 사이트의 가이드라인과 FAQ를 한번 확인 하시기 바랍니다.