Compartilhando conteúdo nas redes sociais com AMP

Nesse post iremos ver como compartilhar conteúdo nas redes sociais com AMP. O compartilhamento de conteúdo é um dos pontos chaves para trazer novos usuários para sua aplicação. Mas, um ponto importante na plataforma AMP por questões de perfomance.

Isso porque o bloqueio de scripts de terceiros – ou seja, por vias tradicionais – é impossível utilizar os botões de compartilhamento redes sociais como Twitter e Facebook. Uma solução rápida é a utilização da share API, mas ela é apenas suportada por alguns navegadores.

Felizmente, há outra maneira de compartilhar conteúdo em redes sociais com AMP que funciona em todos os navegadores: o componente amp-social-share. Ele permite que você insira um botão de compartilhamento nas páginas da sua aplicação que será exibido nos principais canais como Twitter, Facebook e Whatsapp.

Melhor de tudo sem comprometer a performace do seu site, você ainda pode oferecer aos seus usuários uma forma fácil e conveniente de compartilhar o conteúdo que encontraram na sua aplicação.

O que é AMP Framework?

Muita gente confunde AMP Framework com o plugin WordPress AMP, AMP framework é um conjunto de regras e componentes focados em performance, onde nesse post é o item que vamos abordar. Referente ao Plugin de AMP para WordPress ele converte o conteúdo do seu site WordPress para se compatível com AMP. Caso queira adicionar botões de compartilhamento no seu site a maneira mais rápida é com a adição de um plugin compatível com AMP, por exemplo, o plugin Super web share.

Para esse post iremos abordar o compartilhamento de redes sociais com AMP framework, vamos ver como podemos adicionar links de redes sociais de forma programática.

Suporte a compartilhamento em redes sociais com AMP

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 o seu uso é bem simples, primeiramente precisamos carregar o 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 no 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 de exibição padrão dos botões será o seguinte:

Propriedades

Podemos modificar os nossos botões de compartilhamento de redes sociais com AMP 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 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 dos nossos componentes.

Customizando o estilo dos nossos botões

Por padrão sabemos que o 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.

Temos que ter atenção na quantidade de customização no nosso código AMP permite até 75KB de CSS por páginas. Pode parecer pouco, mas é bastante para uma única página.

Esse tutorial de compartilhamento de redes sociais com AMP, 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