추가:2018/04/13

언젠가 공식적으로 PC 대응의 커스텀 아이콘용의 공유 URL이 제공되고 있었습니다.

https://social-plugins.line.me/lineit/share?url={URL}

따라서 앞으로는 이쪽의 URL을 사용하는 편이 좋을 것 같습니다.

이하 내용은 일단 남겨 둡니다만 비추천이 됩니다.

TL;DR

디자이너 씨로부터 올라온 디자인 데이터를 보면 SNS의 공유 버튼이 공식적인 것이 아니라 독자적인 디자인의 경우가 있을까 생각합니다. 그러한 것에 대응하기 위해서 여러분은 「쉐어 버튼 커스터마이즈」나 「쉐어 버튼 디자인 변경」등으로 구그하는 등 합니다. 그러면 다음과 같은 코드를 찾을 수 있습니다만 LINE만은 버릇이 있어…

흔한 LINE 공유 버튼 코드

개발자 여러분에게는 여러 번 익숙한 코드일지도 모릅니다.

흔한 버튼 코드

<a href="http://line.me/R/msg/text/?[ページURL]">LINEでシェアするボタン</a>

스마트폰

잘 연결

PC

지원되지 않음

PC시에만 숨기거나…

이렇게 옛 코드이므로 PC(브라우저판 LINE)에 대응하고 있지 않습니다…

LINE it! (LINE으로 보내기) 버튼

물론 공식 버튼은 PC 대응으로 제공되고 있네요. 그러나...

LINE사 공식 버튼

h tps://메아. 네. 메 / 그럼 / 호 w_와 _ 네 s ta l # 네이 t 부트

PC 스마트 폰 OK

JS 설치 필수

사용자 정의 불가

우리가 요구할 수 없는 사양입니다.

같이 PC의 경우는 포기하고 공식 버튼이나 설치하지 않을지의 선택 밖에 없었습니다.

주제

PC 스마트 폰 OK 새로운 공유 버튼

그렇지만 시대는 바뀌어 실은 양쪽 모두 OK인 버튼이 있습니다!
이쪽이 PC도 스마트 폰도 둘 다 괜찮은 멋지고있는 공유 버튼입니다!

PC/SP 모두 OK 버튼

<a href="https://timeline.line.me/social-plugin/share?url=[ページURL]">LINEでシェアするボタン</a>

URL은 인코딩되어야 합니다.

실제 느낌

URL 인코딩하면 실제로는 이런 느낌이 듭니다.

실제 느낌 코드 (example.com의 경우)

<a href="https://timeline.line.me/social-plugin/share?url=http%3A%2F%2Fexample.com%2F">LINEでシェアするボタン</a>

실제로 시도해 봅시다.

거동은 수중의 단말로 체감하는 편이 알기 쉽기 때문에, 실제로 이 페이지를 공유해 봅시다!

【LINE으로 보내기】


잘 보셨나요? (당했어요?)

PC로 클릭하면 ↑의 버튼은 target="_blank" 지정이므로 다른 탭으로 브라우저판 LINE의 쉐어 페이지가 표시되었다고 생각합니다! (로그인되지 않은 경우 로그인 화면)
스마트 폰이라면 브라우저에서 앱으로 전이된다고 생각합니다!

이용에 관하여

공유 버튼에는 가이드라인이 있습니다.

본 기사의 내용은 『LINE 소셜 플러그인』이용 가이드라인에 따라 사용되는 것으로 하며, 본 기사 내용에 따라 어떠한 문제가 발생한 경우에도 일체의 책임을 지지 않습니다.

'LINE 소셜 플러그인' 이용 가이드라인

h tps://메아. 네. 메 / 그럼 / 글쎄.

이용은 각자 판단해 주십시오.

그럼 좋은 홈페이지 만들기를.