https://social-plugins.line.me/ko/how_to_install


버튼 만들기

버튼을 만들기 전에 가이드라인을 먼저 참조해 주세요.
버튼을 만들면 해당 가이드라인의 약관에 동의하는 것으로 간주됩니다.

소셜 플러그인 사용 단계

사용자가 LINE 소셜 플러그인을 사용하는 단계는 다음과 같습니다.
  1. LINE 소셜 플러그인 버튼을 선택합니다.
  2. LINE에 로그인합니다.
  3. 친구, 타임라인 등 공유 대상을 선택하거나, 계정을 친구 추가하거나, '좋아요' 버튼을 선택합니다.

'LINE it!' 버튼

'LINE it!' 버튼을 누르면 사용자가 내 웹 콘텐츠를 자신의 LINE 친구들과 공유할 수 있습니다.

버튼 유형 선택


URL 설정

'LINE it!' 버튼을 추가할 사이트의 URL을 입력해 주세요.
URL
버튼은 URL 도메인과 해당 버튼이 추가되는 페이지가 일치할 때에만 작동합니다.

버튼 미리보기 및 코드 복사

다음 코드를 웹사이트의 DOM에 추가해 주세요. 해당 코드는 DOMContentLoaded 이벤트에 의해 호출됩니다.
버튼 미리보기
코드
<div class="line-it-button" data-lang="ko" data-type="share-b" data-url="https://social-plugins.line.me/ko/how_to_install" style="display: none;"></div>
 <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
위 코드를 복사하여 웹사이트 내, 버튼을 표시할 위치에 붙여넣으세요.
동일한 페이지에 'LINE it!' 버튼을 여러 개 추가하는 경우, 첫 번째 줄에 있는 스크립트 태그를 한 번만 넣어주세요.

커스텀 아이콘 적용

별도로 제작한 아이콘을 사용하고 싶다면, 아래의 링크를 버튼에 적용해주세요.
링크
https://social-plugins.line.me/lineit/share?url={URL}
예시
(URL : https://line.me/en)
https://social-plugins.line.me/lineit/share?url=https://line.me/en
동적 웹사이트에 'LINE it!' 버튼 호출
DOM 트리가 생성되고 콘텐츠가 추가되면, LineIt.loadButton()을 호출하여 'LINE it!' 기능을 켭니다.
<script type="text/javascript">LineIt.loadButton();</script>

디자인

Design Guide
'LINE it!' 버튼 이미지의 압축 파일 모음을 다운로드하려면 아래 버튼을 클릭하세요.
버튼 이미지 파일은 Retina Display를 지원할 수 있도록 2배 크기로 제작되어 있습니다.

‘친구 추가’ 버튼

이 버튼을 사용하면 내 사이트 방문자가 나를 LINE 친구로 추가할 수 있습니다.
참고: 방문자가 나를 LINE 친구로 추가하려면 LINE 공식 계정이나 LINE@ 계정이 있어야 합니다.

LINE ID 입력

LINE 공식 계정이나 LINE@ 계정의 LINE ID를 입력해 주세요.
LINE ID

버튼 종류 선택

친구 수와 홈 버튼 링크 표시친구 수 표시'친구 추가' 버튼만 표시
버튼 미리보기
코드
<div class="line-it-button" data-lang="ko" data-type="friend" data-lineid="@lineteamjp" data-count="true" data-home="true" style="display: none;"></div>
 <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>