AMP

amp-social-share

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

공유 추적 기능을 개발 중입니다.

 

Required Scripts

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

소셜 공유 버튼을 표시합니다.

필수 스크립트
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
지원되는 레이아웃 container, fill, fixed, fixed-height, flex-item, nodisplay, responsive
AMP By Example의 amp-social-share 예를 참조하세요.

개요

amp-social-share 구성요소는 다양한 소셜 플랫폼 제공자의 소셜 공유 버튼을 표시합니다.

예: 기본 소셜 공유 버튼

공유 버튼은 사전 구성된 일부 제공자의 기본 설정을 추측합니다. 공유 버튼에서 현재 문서의 표준 URL은 공유하려는 URL이며, 페이지 제목은 공유하려는 텍스트라고 가정합니다.

<amp-social-share type="twitter"></amp-social-share>

예: 매개변수 전달

공유 엔드포인트로 매개변수를 전달하려면 공유 엔드포인트에 추가될 data-param-<attribute>를 지정하면 됩니다.

<amp-social-share type="linkedin" width="60" height="44"
    data-param-text="Hello world"
    data-param-url="https://example.com/">
</amp-social-share>

Linkedin은 사전 구성된 제공자 중 하나이므로 data-share-endpoint 속성을 제공할 필요가 없습니다.

속성

type(필수) 제공자 유형을 선택합니다. 사전 구성된 제공자 및 구성되지 않은 제공자 모두에 필수입니다.
data-target 타겟을 열 타겟을 지정합니다. iOS의 이메일/SMS에는 타겟이 _top으로 설정되며, 이외의 모든 경우에 기본값은 _blank입니다. 이메일의 경우 이 재정의만을 사용하는 것이 좋습니다.
data-share-endpoint 이 속성은 구성되지 않은 제공자에 필수입니다.
자주 사용되는 일부 제공자의 경우 사전 구성된 공유 엔드포인트가 있습니다. 자세한 내용은 사전 구성된 제공자 섹션을 참조하세요. 구성되지 않은 제공자의 경우 공유 엔드포인트를 지정해야 합니다.
data-param-* data-param-* 접두사를 사용하는 모든 속성은 URL 매개변수로 전환되어 공유 엔드포인트로 전달됩니다.

사전 구성된 제공자

amp-social-share 구성요소는 공유 엔드포인트와 일부 기본 매개변수를 알고 있는 사전 구성된 일부 제공자를 제공합니다.

제공자 유형 매개변수
Web Share API(OS 공유 대화상자 트리거) system
  • data-param-text: 선택사항, 기본값: '현재 페이지 제목'
  • data-mode: 선택사항, replace로 설정하면 다른 모든 공유 옵션이 삭제됨
이메일 email
  • data-param-subject: 선택사항, 기본값: 현재 페이지 제목
  • data-param-body: 선택사항, 기본값: rel=canonical URL
  • data-param-recipient: 선택사항, 기본값: ''(빈 문자열)
Facebook facebook
  • data-param-app_id: 필수, 기본값: 없음. 이 매개변수는 Facebook 공유 대화상자에 필수인 Facebook app_id입니다.
  • data-param-href: 선택사항, 기본값: rel=canonical URL
  • data-param-quote: 선택사항. 인용 또는 텍스트를 공유하는 데 사용할 수 있습니다.
LinkedIn linkedin
  • data-param-url: 선택사항, 기본값: rel=canonical URL
Pinterest pinterest
  • data-param-media: 선택사항(설정하도록 권장됨), 기본값: 없음. Pinterest에서 공유되는 미디어의 URL입니다. 설정하지 않으면 Pinterest에서 최종 사용자에게 미디어 업로드를 요청합니다.
  • data-param-url: 선택사항, 기본값: rel=canonical URL
  • data-param-description: 선택사항, 기본값: 현재 페이지 제목
Google+ gplus
  • data-param-url: 선택사항, 기본값: rel=canonical URL
Tumblr tumblr
  • data-param-url: 선택사항, 기본값: rel=canonical URL
  • data-param-text: 선택사항, 기본값: 현재 페이지 제목
Twitter twitter
  • data-param-url: 선택사항, 기본값: rel=canonical URL
  • data-param-text: 선택사항, 기본값: 현재 페이지 제목
Whatsapp whatsapp
  • data-param-text: 선택사항, 기본값: '현재 페이지 제목 - 현재 페이지 URL'
LINE line
  • data-param-url: 선택사항, 기본값: rel=canonical URL
  • data-param-text: 선택사항, 기본값: 현재 페이지 제목
SMS sms
  • data-param-body: 선택사항, 기본값: rel=title - rel=canonical URL

구성되지 않은 제공자

사전 구성된 제공자 외에도 amp-social-share 구성요소에서 추가 속성을 지정하여 구성되지 않은 제공자를 사용할 수 있습니다.

예: 구성되지 않은 제공자의 공유 버튼 만들기

다음 예에서는 data-share-endpoint 속성을 Facebook Messenger 맞춤 프로토콜의 올바른 엔드포인트로 설정하여 Facebook Messenger를 통한 공유 버튼을 생성합니다.

<amp-social-share type="facebookmessenger"
    data-share-endpoint="fb-messenger://share"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

이러한 제공자는 사전 구성되어 있지 않으므로 제공자에 적절한 버튼 이미지와 스타일을 생성해야 합니다.

스타일

기본 스타일

기본적으로 amp-social-share는 자주 사용되는 사전 구성된 제공자를 일부 포함합니다. 이러한 제공자의 버튼에는 제공자의 공식 색상과 로고로 스타일이 지정됩니다. 기본 너비는 60픽셀, 기본 높이는 44픽셀입니다.

AMP 페이지에서 사용할 수 있으며 사전에 스타일이 지정된 반응형 공유 링크를 보려면 AMP 시작을 방문하세요.

맞춤 스타일

가끔 나만의 스타일을 제공하고 싶을 수도 있습니다. 다음처럼 제공된 스타일을 간단히 재정의할 수 있습니다.

amp-social-share[type="twitter"] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

대체 변수

<amp-social-share> 요소에서 전역 AMP 대체 변수를 사용할 수 있습니다. 아래 예에서 TITLE이 페이지 제목으로 대체되고 CANONICAL_URL이 문서의 표준 URL로 대체됩니다.

<amp-social-share type="whatsapp"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

유효성 검사

AMP 유효성 검사 도구 사양에서 amp-social-share rules를 참조하세요.

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동
버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기