amp-social-share

1.0 0.1

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

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

개요

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 속성을 제공할 필요가 없습니다.

속성

사전 구성된 제공자

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

구성되지 않은 제공자

사전 구성된 제공자 외에도 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-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를 참조하세요.