Tag: redes sociais

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