amp-social-share
Description
O recurso de rastreamento de compartilhamento está sendo desenvolvido.
Required Scripts
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Supported Layouts
Exibe um botão de compartilhamento social.
| Script obrigatório | <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script> |
| Layouts compatíveis | container, fill, fixed, fixed-height, flex-item, nodisplay, responsive |
| Exemplos | Veja o exemplo de amp-social-share no site AMP By Example. |
Visão geral
O componente amp-social-share exibe um botão de compartilhamento social para vários provedores de plataformas sociais.
Exemplos
Exemplo: botão de compartilhamento social básico
O botão de compartilhamento adivinha alguns padrões para alguns provedores pré-configurados. Ele presume que o URL canônico do documento atual é o URL que você quer compartilhar e que o título da página é o texto que você quer compartilhar.
<amp-social-share type="twitter"></amp-social-share>
Exemplo: transmissão de parâmetros
Quando você quiser transmitir parâmetros para o endpoint de compartilhamento, pode especificar o data-param-<attribute> que será anexado ao endpoint.
<amp-social-share type="linkedin" width="60" height="44"
data-param-text="Hello world"
data-param-url="https://example.com/">
</amp-social-share>
O LinkedIn é um dos provedores pré-configurados, então não é necessário fornecer o atributo data-share-endpoint.
Atributos
| type (obrigatório) | Seleciona um tipo de provedor. É necessário para provedores pré-configurados e não configurados. |
| data-target | Especifica o destino em que será aberto. O padrão é _blank para todos os casos, exceto e-mail/SMS no iOS, em que o destino é definido como _top. Sugerimos que você use essa modificação apenas para e-mails. |
| data-share-endpoint | Este atributo é obrigatório para provedores não configurados. Alguns provedores mais usados têm endpoints de compartilhamento pré-configurados. Para mais detalhes, consulte a seção Provedores pré-configurados. Para provedores não configurados, é necessário especificar o endpoint de compartilhamento. |
| data-param-* | Todos os atributos data-param-* pré-fixados são transformados em parâmetros de URL e transmitidos ao endpoint de compartilhamento. |
Provedores pré-configurados
O componente amp-social-share fornece alguns provedores pré-configurados que identificam os respectivos endpoints de compartilhamento, bem como alguns parâmetros padrão.
| Provedor | Tipo | Parâmetros |
|---|---|---|
| API Web Share (aciona a caixa de diálogo de compartilhamento do sistema operacional) | system |
|
email |
| |
facebook |
| |
linkedin |
| |
pinterest |
| |
| G+ | gplus |
|
| Tumblr | tumblr |
|
twitter |
| |
whatsapp |
| |
| LINE | line |
|
| SMS | sms |
|
Provedores não configurados
Além dos provedores pré-configurados, é possível usar provedores não configurados especificando outros atributos no componente amp-social-share.
Exemplo: criar um botão de compartilhamento para um provedor não configurado
O exemplo a seguir cria um botão de compartilhamento no Facebook Messenger, definindo o atributo data-share-endpoint como o endpoint correto para o protocolo personalizado do 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>
Como esses provedores não são pré-configurados, será necessário criar a imagem e os estilos de botão adequados para o provedor.
Estilos
Estilos padrão
Por padrão, o amp-social-share inclui alguns provedores pré-configurados mais usados. Os botões desses provedores são estilizados com a cor e o logotipo oficiais do provedor. A largura padrão é de 60 px, e a altura padrão é de 44 px.
Estilos personalizados
Às vezes, você quer aplicar seu próprio estilo. Você pode simplesmente modificar os estilos fornecidos, como os seguintes:
amp-social-share[type="twitter"] {
background: red;
background-image: