ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 워드프레스, 웹사이트, 스마트폰 사이트를 네이버라인과 연결하기
    워드프레스/추천플러그인 2014. 9. 6. 17:48
    336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
    워드프레스를 사용하면 플러그인으로 페이스북이나 트위터 등을 연결하는 것이 있는데 우리나라 카카오톡 이나 라인 등은 아직 없다. 그래서 연결을 하려면 해당 국내 사이트에서 연동기능이 있는지 살펴봐야 한다.

    LINE에서 쓰기 버튼은 Web 사이트의 정보를 쉽게 LINE 사용자에게 공유 할 수있는 버튼이다. 공유 대상은 1명 또는 여러명은 물론 자신의 홈에 보내 친구전체의 타임 라인에 알릴 수 있다.

    사용절차 :

    1. 사용자가 LINE 쓰기 버튼을 누르면 LINE이 설치되어있는 경우, LINE 앱이 시작되고 공유할 대상을 선택한다.

    (1) 토크 : 친구(복수 선택 가능)나 참여하는 그룹에 토크를 게시 할 수 있다. 
    (2) 홈 : 대상 선택 화면 오른쪽 상단의 버튼에서 자신의 홈에 보낼 수 있습니다. 홈에 게시하면 타임 라인에서 LINE의 친구 전체가 볼 수 있다.

    - 스마트폰 웹사이드 설치방법

    1. 네이버라인 연동을 위해 (설치 가이드 페이지)아래 링크에 접속한다. (한글페이지는 없고 영문, 일문페이지가 있다.)

    http://media.line.me/howto/en/

    2. 사이트에서 사용할 라인 이미지 버튼을 선택한다. 5개 중에서 1개를 선택한다.
    3. 직접입력란에 URL을 입력한다. 여기서는 happyaz.tistory.com을 입력해 보았다.
    최초에는 아래와 같이 보인다.

    <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":"d"});
    </script>
    </span>

    4. 위와 같이 버튼과 웹사이트 주소를 입력하고 나면 아래와 같이 자동 수정된다. 여기서 lang : en 을 lang : ko로 수정해야 한글을 사용할수 있다.

    <span>6
    <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":"ko","type":"d","text":"happyaz.tistory.com","withUrl":true});
    </script>
    </span>

    5. 위의 코드를 복사하여 원하는 웹 사이트 페이지 위치에 붙여 넣는다.  한 페이지에 라인버튼을 여러개 설치 하려면 첫번째 스크립트에 한 번만 추가해야한다! 

    - 워드프레스 설치방법

    준비물: 라인 버튼 이미지와 소스코드.
    워드프레스에 삽입할 라인버튼을 아래 링크에서 내려받는다. 5종의 디자인이 있다. 압축을 풀고 사용할 이미지를 선택한 후 버튼 이미지 파일 이름. 폭과 높이를 적어둔다.
    http://media.line.me/img/linebutton_en.zip

    - 소스코드를 복사한다.
    워드프레스에 삽입할 소스를 아래에서 복사한다.

    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. 내려받은 버튼에서 사용할 이미지를 웹서버 이미지 폴더에 업로드하고 해당 경로를 적어둔다.

    3. 라인버튼 이미지 경로를 [URL of Button]소스에 삽입한다. 사용할 버튼 이미지의 폭 [Width of Button] 과 높이 [Height of Button] 도 삽입한다.

    4. 워드프레스 테마를 수정해야 함으로 해당되는 소스파일을 찾아야한다. 테마에서 해당 소스를 찾으면 위에서 수정된 소스를 붙여넣기 하여 수정한 후 사이트에 업로드한다.

    - 일반 웹사이트 설치방법

    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. 내려받은 버튼을 웹서버 이미지 폴더에 업로드하고 해당 경로를 적어둔다.

    3. 라인버튼 이미지 경로를 소스에 삽입한다. 위의 설명3.을 참조.

    4. 소스가 수정되면 웹사이트에 삽입할 페이지 소스를 열고 원하는 곳에 붙여넣기 한 후 웹서버에 업로드한다.

    댓글

Designed by Tistory.