Categorias
AMP Accelerated mobile pages

Compartilhando conteúdo nas redes sociais com AMP

Nesse post iremos ver como compartilhar conteúdo nas redes sociais com AMP. Compartilhamento de conteúdo é um dos pontos chaves para trazer novos usuários para sua aplicação e um pontos chaves na plataforma AMP por questões de perfomance é o bloqueio de scripts de terceiros, ou seja, por vias tradicionais é impossível utilizar o botões de compartilhamento de plataformas como Twitter e Facebook, uma solução rápida é a utilização da share API, mas ela é apenas suportada por browsers mobile.

Mas isso não significa que AMP não suporta compartilhamento de conteúdo. Para isso temos o componente amp-social-share com ele podemos compartilhar conteúdo com diferentes opções:

  • Web share api
  • Email
  • Facebook
  • Linkedin
  • Pinterest
  • Tumblr
  • Twitter
  • Whatsapp
  • LINE
  • SMS

E seu uso é bem simples, primeiramente precisamos carregar os script amp-social-share-0.1.js:

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

Depois em nosso código chamar os botões de compartilhamento que queremos utilizar, a plataforma será definida pelo parâmetro type, como no exemplo a seguir:

<div class="social-bar">
<amp-social-share type="twitter"></amp-social-share>
<amp-social-share type="email"></amp-social-share>
<amp-social-share type="linkedin"></amp-social-share>
<amp-social-share type="facebook"></amp-social-share>
<amp-social-share type="whatsapp"></amp-social-share>
</div>

E o formato default será o seguinte:

Propriedades

Podemos modificar nossos botões de compartilhamento através de propriedades e o componente amp-social-share trabalha em geral com os seguintes atributos:

  • type – qual a plataforma que iremos compartilhar
  • data-target – se iremos abrir uma uma nova aba
  • data-share-endpoint – caso a plataforma em que requeremos compartilhar não esteja na lista acima podemos definir um endpoint caso a plataforma que queremos utilizar possua.
  • data-param-* – podemos adicionar atributos relacionados a plataforma em que queremos compartilhar o conteúdo.
  • width e height – podemos definir as dimensões de nossos componentes.

Customizando o estilo dos nosso botões

Por padrão sabemos que nosso componente carrega algum estilo como ícones e cores específicas da plataforma, também sabemos podemos modificar algumas funcionalidades e o formato do nosso botão através de propriedades.

Mas caso queiramos modificar a cor do nosso botão, por exemplo, para isso vamos precisar modificar o nosso CSS. Para essa ação podemos utilizar seletores específicos. Como no exemplo abaixo:

amp-social-share[type='twitter'],
amp-social-share[type='facebook'],
amp-social-share[type='email'],
amp-social-share[type='whatsapp'],
amp-social-share[type='linkedin'] {
background-color: black;
color: white;
}

No código acima temos a seleção dos items por tags e tipo, poderíamos aplicar um seletor genérico por tag, mas nesse exemplo eu adicionei o tipo como uma opção de alterar item a item.

Esse tutorial faz parte de um curso online que estou criando no meu canal do youtube, caso deseja acompanhar, só assinar o canal:

Veja mais posts sobre AMP na página da categoria ou qualquer dúvida deixe um comentário e até o próximo post

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *