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
- Tumblr
- 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>
Code language: HTML, XML (xml)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>
Code language: HTML, XML (xml)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;
}
Code language: CSS (css)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