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

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>

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
  • data-param-text: opcional, o padrão é "Título da página atual".
  • data-mode: opcional. Se for definido como replace, todas as outras opções de compartilhamento serão removidas.
E-mail email
  • data-param-subject: opcional, o padrão é: Título da página atual.
  • data-param-body: opcional, o padrão é: URL rel=canonical.
  • data-param-recipient: opcional, o padrão é: '' (string vazia).
Facebook facebook
  • data-param-app_id: obrigatório, o padrão é: none. Este parâmetro é o app_id do Facebook, que é obrigatório para a caixa de diálogo de compartilhamento do Facebook.
  • data-param-href: opcional, o padrão é: URL rel=canonical.
  • data-param-quote: opcional. Pode ser usado para compartilhar uma citação ou um texto.
LinkedIn linkedin
  • data-param-url: opcional, o padrão é: URL rel=canonical.
Pinterest pinterest
  • data-param-media: opcional (mas recomendamos que seja definido), o padrão é: none. URL para a mídia ser compartilhada no Pinterest. Se não for definido, será solicitado que o usuário final faça upload de uma mídia pelo Pinterest.
  • data-param-url: opcional, o padrão é: URL rel=canonical.
  • data-param-description: opcional, o padrão é: Título da página atual.
G+ gplus
  • data-param-url: opcional, o padrão é: URL rel=canonical.
Tumblr tumblr
  • data-param-url: opcional, o padrão é: URL rel=canonical.
  • data-param-text: opcional, o padrão é: Título da página atual.
Twitter twitter
  • data-param-url: opcional, o padrão é: URL rel=canonical.
  • data-param-text: opcional, o padrão é: Título da página atual.
WhatsApp whatsapp
  • data-param-text: opcional, o padrão é: "Título da página atual - URL da página atual".
LINE line
  • data-param-url: opcional, o padrão é: URL rel=canonical.
  • data-param-text: opcional, o padrão é: Título da página atual.
SMS sms
  • data-param-body: opcional, o padrão é: URL rel=title - rel=canonical.

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.

acesse o AMP Start para ver links de compartilhamento responsivos e pré-estilizados que você pode usar nas suas páginas AMP.

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.

Precisa de mais ajuda?

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