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: url(datauri:svg/myownsvgicon);
}
Substituição de variável
Você pode usar a substituição global de variáveis AMP (link em inglês) no elemento <amp-social-share>. No exemplo abaixo, TITLE é substituído pelo título da página e CANONICAL_URL pelo URL canônico do documento.
<amp-social-share type="whatsapp"
data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>
Validação
Consulte as regras do amp-social-share (link em inglês) na especificação do validador de AMP.
Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.
Ir para o Stack Overflow Encontrou um bug ou sente falta de um recurso?O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.
Ir para o GitHub