AMP

amp-social-share

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íveiscontainer, fill, fixed, fixed-height, flex-item, nodisplay, responsive
ExemplosVeja 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-targetEspecifica 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-endpointEste 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.

ProvedorTipoParâ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-mailemail
  • 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).
Facebookfacebook
  • 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.
LinkedInlinkedin
  • data-param-url: opcional, o padrão é: URL rel=canonical.
Pinterestpinterest
  • 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.
Tumblrtumblr
  • data-param-url: opcional, o padrão é: URL rel=canonical.
  • data-param-text: opcional, o padrão é: Título da página atual.
Twittertwitter
  • data-param-url: opcional, o padrão é: URL rel=canonical.
  • data-param-text: opcional, o padrão é: Título da página atual.
WhatsAppwhatsapp
  • data-param-text: opcional, o padrão é: "Título da página atual - URL da página atual".
LINEline
  • data-param-url: opcional, o padrão é: URL rel=canonical.
  • data-param-text: opcional, o padrão é: Título da página atual.
SMSsms
  • 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?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub