Categorias
JavaScript WordPress

Como JavaScript está influenciando o desenvolvimento com WordPress

Final de 2018 tivemos o lançamento do Gutenberg a nova experiência de edição do WordPress, uma das ações mais impopulares da história da plataforma dava um passo muito relevante referente ao core da plataforma. Ação invisível para a maioria dos usuário Gutenberg iria influenciar o desenvolvimento JavaScript e WordPress como conhecemos.

Desde o lançamento do WordPressa mais de 15 anos atrás muita coisa mudou na web e especialmente referente a desenvolvimento JavaScript. Gutenberg trouxe para o core do WordPress JavaScript moderno algo necessário para evolução da plataforma. Tecnologias como React, fazem parte do core do WordPress isso mesmo: React.

Esse movimento está transformando o desenvolvimento WordPress para muito mais modular, onde tivemos a introdução de blocos componentes visuais independentes que reduzem a responsabilidade dos temas referentes a funcionalidades.

Essa transição nós trouxe uma pergunta qual será a responsabilidade de um tema em uma aplicação WordPress?

Para isso precisamos entender alguns itens dentro do Gutenberg:

Blocos

Blocos trazem uma estrutura que permite nosso editor de conteúdo sair de um grande bloco de texto para items modulares que permitem sua composição de Layout, os Blocos são divididos em categorias como:

  • Layout
  • Formatação
  • Widgets
  • Códigos incorporados

Por de trás das cortinas no banco de dados os blocos continuam sendo gravados na mesma tabela wp_content com uma diferença os blocos são marcados com comentários e renderizados pela API do Gutenberg.

Componentes e estado

Com a introdução de Blocos e React conceitos como Componentes e estado foram introduzidos com React elementos visual armazenam estado que armazena informações relacionadas a um dado especifico compartilhado por diferente elementos visuais. Mas isso trouxe uma série de desafios para a plataforma como controlar esse fluxo com PHP e React. Algumas modificações foram feitas e o React foi encapsulado para se adaptar com a plataforma. Funções para fazer a ponte entre PHP e React.

Modularização

Dentro da biblioteca do Gutenberg existe um módulo com uma série de componentes base que podem ser reutilizados tanto no editor quando o front-end da aplicação se abrimos o console de nossa aplicação e digitarmos “wp.” conseguimos visualizar todos os módulos disponíveis dentro do WordPress e se digitarmos “wp.components”conseguimos ver todos os components disponíveis no WordPress.

Todos os módulos do JavaScript para WordPress estão disponíveis como pacotes do nodeJS onde podemos ver no link: https://www.npmjs.com/search?q=%40wordpress

pacotes node WordPress

Além disso o uso de pacotes permite o uso do Gutenberg fora do WordPress como foi utilizado pelo Drupal recentemente.

JavaScript moderno

Com Gutenberg temos a possibilidade de desenvolver com EcmaScript 5 ou EcmaScript 2015+ ou superior. Se ainda não domina a nova sintaxe do JavaScript você pode continuar desenvolvendo com EcmaScript 5 mas o recomendado é o uso de JavaScript moderno seu código ficará mais enxuto e você terá a possibilidade de trabalhar com JSX.

Nem todos os browsers suportam JavaScript moderno, por exemplo, Internet Explorer 11. Para isso precisamos fazer o uso de transpilers para fazer a conversão de JavaScript moderno para EcmaScript 5.

Plugins e Temas

Mas todos esses benefícios estão restritos para o Gutenberg? Não, os recursos do Gutenberg podem ser utilizados por plugins e temas. With the package @wordpress/scripts podemos incorporar scripts do core em nossos plugins e temas. Para isso importamos em nosso projeto com o seguinte código:

npm install @wordpress/scripts --save-dev

Com esse pacote nodeJS conseguimos realizar formatação, validação de código e tests:

  • wp-scripts build
  • wp-scripts format-js
  • wp-scripts lint-style
  • wp-scripts lint-js
  • wp-scripts start
  • wp-scripts test-e2e
  • wp-scripts test-unit-js

Para saber mais sobre os pacotes acesse: www.npmjs.com/package/@wordpress/scripts

Block Scaffolding

Lançado no final de fevereiro de 2020 um pacote node que cria um template básico de um bloco Gutenberg. Como o conhecido create-react-app do React.

Para instalar rode o seguinte comando:

npm install @wordpress/blocks --save

O pacote cria um template de uma bloco com elementos básicos customização de CSS, JavaScript e PHP sem se preocupar com configuração de elementos como webpack, babel e ESLint.

Por padrão ele irá utilizar EcmaScript 2015+ mas podemos através de configurações definir o uso de EcmaScript 5. Depois de instalado o pacote @wordpress/blocks para criar um bloco básico em seu terminal de linha de comando digite:

npm init @wordpress/block [nome-do-seu-bloco]

Ele irá criar um bloco com os comandos para:

  • Inicia o desenvolvimento: npm start
  • Compilar o código para produção: npm run build
  • Formatar o código JavaScript de sua aplicação: npm run format:js
  • validação de código css e js: npm run lint:css ou npm run lint:js

Os requisitos básicos para utilizar o pacote são node 10.0.0 e npm 6.9.0.

Conclusão

Ainda estamos no inicio de uma revolução os desenvolvedores que acompanham o Gutenberg desde o inicio já estão tirando proveito desses benefícios, mudando sua rotina referente ao desenvolvimento. Muitas empresas ainda estão adiando essa mudança de paradigma pode enxergar o WordPress apenas como um editor visual e outras por conta de Código legado.

Essa mudança irá mudar o jeito em que desenvolvemos nossa aplicação WordPress de forma mais modular iremos sair da estrutura padrão de templates estáticos e entraremos numa estrutura que blocos serão utilizados em qualquer parte de nossa aplicação. Assim reduzindo ainda mais a dependência de funcionalidades de uma aplicação WordPress com o tema.

Nos próximos posts estarei abordando o @wordpress/block com mais detalhes vamos ver na prática como utilizar essa poderosa ferramenta. Para acompanhar ver mais posts sobre Gutenberg e WordPress acesse a página da categoria.

Categorias
AMP Accelerated mobile pages Geral WordPress

Plugins WordPress não são tecnologias ou processos

Navegando pelo YouTube encontro muitos vídeos, plugin de performance WordPress, plugin de SEO WordPress e outros casos como AMP pode matar o seu projeto. Muitas vezes criam uma visão com dois cliques eu irei resolver todos os meus problemas, plugins WordPress ajudam na automatização de tarefas mas muitas vezes criamos essa visão que eles resolvem todos os nossos problemas ou representam uma tecnologia ou um processo.

Por exemplo SEO é um assunto muito complexo, temos ótimos plugins disponíveis, mas o fato de instalar um plugin de SEO não vai resolver todos os seus problemas referentes ao tema. Eles ajudam e otimizar a realização de tarefas, mas temos que implementar o SEO de nossa aplicação como, inclusão de meta informações, inclusão e otimização de palavra chave e manutenção.

Somente a inclusão do plugin sem o cadastro de nenhuma informação pode prejudicar o SEO de sua aplicação, mas nessa situação é um problema do plugin ou do seu mal uso?

Dai caímos num segundo problema, culpar toda uma tecnologia ou processo por conta plugin, isso é muito comum de achar, por exemplo, no canal do mestre SEO do Fabio Ricotta que eu admiro bastante eu vi o seguinte relato:

Fabio sempre aponta informações baseado em experiências próprias, falando que sua experiência não foi válida mas analisando o vídeo vou comentar certos pontos:

  • Começando pelo título “Como AMP pode matar o seu projeto” já temos o direcionamento de para a tecnologia.
  • Nenhum momento ele especifica qual plugin utilizou generaliza o problema para tecnologia
  • Falhas como esquecer de adicionar código de tracking não é um problema da tecnologia
  • Depois atribuiu o fato plugin remover o código de tracking, novamente não é uma falha da tecnologia. Quando esse tipo de problema acontecer recomendado é notificar o desenvolvedor do plugin para que o problema não se repita
  • Por fim atribui limitações de não ter caixa de comentários, eu utilizo o plugin oficial do AMP tenho todas as funcionalidades do core do WordPress rodando normalmente, mas isso pode ser a limitação do plugin a qual ele utilizou
  • “por padrão o plugin cria uma versão tosca” – Importante especificar qual plugin foi utilizado, por exemplo, novamente a tecnologia sendo resumida a um plugin do AMP oficial a versão reader não é recomendada pelo próprio Google, mas existem opções de customização. Mas temos opções de disponibilizar uma versão idêntica a versão não-AMP.

Opiniões de influenciadores como o Fabio tem um peso muito grande e quem não conhece a tecnologia cria resistência sem mesmo nunca ter utilizado. Por isso é importante antes de compartilhar experiências ser mais específico sobre plugins WordPress e cenários de sua experiência.

Perfomance, SEO ou AMP, por exemplo, não se resumem apenas a instalar um plugin. O plugin de AMP facilitam o seu uso, mas a instalação sem o mínimo de configuração prejudicam a experiência do usuário. Além disso podemos criar um tema totalmente com AMP.

Performance não se resume a adicionar cache tem outra série de recursos que ações que melhoram o desempenho de sua aplicação. Além disso, SEO e Performance são tarefas continuas que nunca acabam precisam de manutenção constante.

Qualquer pessoa tem o total direito de não gostar de uma tecnologia específica mas é importante validar certos pontos antes de compartilhar qualquer opinião. Sou totalmente aberto a tecnologias e contra a clubismo com tecnologia. AMP possui pontos a melhorar assim com WordPress, JavaScript, PHP e outras linguagens, frameworks e CMSs.

Que você acha sobre o assunto? deixe um comentário com sua opnião.

Categorias
HTML5 Tutoriais

Introdução a imagens responsivas com srcset

Imagens são responsáveis pela maior parte do carregamento de bytes de uma aplicação web em geral. Não podemos evitar-las pois imagens são um ponto crucial de nossa aplicação. Mas temos alternativas para reduzir esse impacto, por exemplo, geralmente nossa aplicação web possui diferentes usuários com diferentes tamanhos de tela.

Imagine o seguinte cenário, em seu website você possui uma imagem de apresentação do seu produto com 1600 pixels, na versão desktop não temos nenhum problema mas o usuário em um dispositivo móvel carrega essa mesma imagem numa tela de 340px. Porque então não servimos diferentes tamanhos de imagens para diferentes tamanhos de tela?

Imagens responsivas é uma parte do design responsivo que pode resolver essa questão. com elas podemos prover diferentes tamanhos de imagens para tamanhos de telas específicos também conseguimos fazer direção de arte disponibilizando recortes específicos da mesma imagem.

Criando imagens responsivas

Com HTML temos algumas alternativas para servir diferentes tamanhos de imagens de acordo com sua resolução de tela.

  • Media queries
  • srcset
  • Tag picture

Srcset

Para esse post iremos trabalhar com a propriedade srcset. Ela permite mais de uma resolução possível das mesma image separadas por vírgula, cada valor dessa lista representa um caso possível ela pode ser atrelada a uma condicional definida pela propriedade sizes.

Vamos usar como exemplo uma tag img tradicional para os nossos testes:

<img src="/imgs/amp-workshop-dublin-1024w.jpg" alt="AMP Workshop Dublin">
Imagem utilizada no exemplo

Agora vamos adicionar os diferentes tamanhos para a imagem:

  • amp-workshop-dublin-640w.jpg
  • amp-workshop-dublin-960w.jpg
  • amp-workshop-dublin-1024w.jpg

Agora que temos os tamanhos definidos vamos alterar nossa img tag:

<img srcset="./imgs/amp-workshop-dublin-640w.jpg 640w,
      ./imgs/amp-workshop-dublin-960w.jpg 960w,
      ./imgs/amp-workshop-dublin-1024w.jpg 1024w"
      src="/imgs/amp-workshop-dublin-1024w.jpg"
      alt="AMP Workshop">

Com o código acima especificamos o tamanho das imagens nesse caso o browser decidirá que imagem ira carregar de acordo com a densidade de pixels e tamanho de tela(janela). No caso das imagens por densidade de pixel definimos o valor que representa a densidade ao no lugar da largura:

<img srcset="./imgs/amp-workshop-dublin-640w.jpg 1x,
         ./imgs/amp-workshop-dublin-1600w.jpg 2x"
      src="./imgs/amp-workshop-dublin-640w.jpg"
      alt="AMP Workshop">

Muitas vezes queremos fazer direção de arte, por exemplo, queremos exibir em mobile e table uma imagem com largura cheia e para desktop layout duas colunas, nesse caso a imagem não sera proporcional a largura da tela precisamos especificar para o browser qual tamanho de imagem queremos nesse caso iremos fazer a utilização da propriedade size.

Size

Com a propriedade size tomamos o controle e definimos que imagens iremos carregar, passando uma media query e o tamanho que identifica a imagem. Vamos colocar tudo junto para isso vamos criar uma página para o exercício:

Versão Desktop
versão tablet e mobile

A imagem do header contém o código que virmos anteriormente agora vamos adicionar o código para os thumbnails, quando o usuário estiver no desktop iremos exibir o layout em duas colunas e quando ele estiver no tablet e desktop iremos exibir em uma coluna. O controle sobre a quantidade de colunas vem do css, mas com a tag image vamos garantir o carregamento da imagem correta.

Para o thumb vamos adicionar o seguinte código:

<img srcset="./imgs/thumb-480w.jpg 480w,


             ./imgs/thumb-960w.jpg 960w"


     sizes="(max-width: 480px) 480px,


            (max-width: 960px) 960px,


            (min-width: 961px) 480px"


    src="./imgs/thumb-960w.jpg" 


    class="thumb-post" alt="post thumb">

No código acima temos dois tamanhos 480px e 960px, na propriedade sizes definimos as medias queries que iremos trabalhar nesse caso mobile(480px max), tablet(960px max), desktop(961px em diante).

O código completa fica da seguinte forma:

HTML

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Responsive images</title>


    <link rel="stylesheet" href="style.css">


</head>


<body>


    <section>


        <header>


            <img srcset="./imgs/amp-workshop-dublin-640w.jpg 640w,


                ./imgs/amp-workshop-dublin-960w.jpg 960w,


                ./imgs/amp-workshop-dublin-1024w.jpg 1024w,


                ./imgs/amp-workshop-dublin-1600w.jpg 1600w"


                src="/imgs/amp-workshop-dublin-1024w.jpg"


                alt="AMP Workshop">




                <h1 class="page-title">Fellyph Cintra</h1>


        </header>


        <div class="posts">


            <article class="post">


                <img


                    srcset="./imgs/thumb-480w.jpg 480w,


                        ./imgs/thumb-640w.jpg 640w, 


                        ./imgs/thumb-960w.jpg 960w"


                    sizes="(max-width: 480px) 480px,


                            (max-width: 640px) 640px,


                            (max-width: 960px) 960px,


                            (min-width: 961px) 480px"


                    src="./imgs/thumb-960w.jpg" 


                    class="thumb-post" alt="post thumb">


                <div class="content">


                    <h2 class="title">Post title</h2>


                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>


                </div>


            </article>


            <article class="post">


                <img


                    srcset="./imgs/thumb-480w.jpg 480w,


                        ./imgs/thumb-640w.jpg 640w, 


                        ./imgs/thumb-960w.jpg 960w"


                    sizes="(max-width: 480px) 480px,


                            (max-width: 640px) 640px,


                            (max-width: 960px) 960px,


                            (min-width: 961px) 480px"


                    src="./imgs/thumb-960w.jpg" 


                    class="thumb-post" alt="post thumb">


                <div class="content">


                    <h2 class="title">Post title</h2>


                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>


                </div>


            </article>


            <article class="post">


                <img


                    srcset="./imgs/thumb-480w.jpg 480w,


                        ./imgs/thumb-640w.jpg 640w, 


                        ./imgs/thumb-960w.jpg 960w"


                    sizes="(max-width: 480px) 480px,


                            (max-width: 640px) 640px,


                            (max-width: 960px) 960px,


                            (min-width: 961px) 480px"


                    src="./imgs/thumb-960w.jpg" 


                    class="thumb-post" alt="post thumb">


                <div class="content">


                    <h2 class="title">Post title</h2>


                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>


                </div>


            </article>


            <article class="post">


                <img


                    srcset="./imgs/thumb-480w.jpg 480w,


                        ./imgs/thumb-640w.jpg 640w, 


                        ./imgs/thumb-960w.jpg 960w"


                    sizes="(max-width: 480px) 480px,


                            (max-width: 640px) 640px,


                            (max-width: 960px) 960px,


                            (min-width: 961px) 480px"


                    src="./imgs/thumb-960w.jpg" 


                    class="thumb-post" alt="post thumb">


                <div class="content">


                    <h2 class="title">Post title</h2>


                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>


                </div>


            </article>


            <article class="post">


                <img


                    srcset="./imgs/thumb-480w.jpg 480w,


                        ./imgs/thumb-640w.jpg 640w, 


                        ./imgs/thumb-960w.jpg 960w"


                    sizes="(max-width: 480px) 480px,


                            (max-width: 640px) 640px,


                            (max-width: 960px) 960px,


                            (min-width: 961px) 480px"


                    src="./imgs/thumb-960w.jpg" 


                    class="thumb-post" alt="post thumb">


                <div class="content">


                    <h2 class="title">Post title</h2>


                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>


                </div>


            </article>


            <article class="post">


                <img


                    srcset="./imgs/thumb-480w.jpg 480w,


                        ./imgs/thumb-640w.jpg 640w, 


                        ./imgs/thumb-960w.jpg 960w"


                    sizes="(max-width: 480px) 480px,


                            (max-width: 640px) 640px,


                            (max-width: 960px) 960px,


                            (min-width: 961px) 480px"


                    src="./imgs/thumb-960w.jpg" 


                    class="thumb-post" alt="post thumb">


                <div class="content">


                    <h2 class="title">Post title</h2>


                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p>


                </div>


            </article>


        </div>


        <footer class="footer">


            Tutorial by Fellyph


        </footer>


    </section>


</body>


</html>

CSS

.page-title,


.posts,


.footer {


    width: 1024px;


    margin: 1em auto;


    max-width: 100%;


}






.page-title {


    text-align: center;


    font-size: 3em;


    border-bottom: 3px solid black;


    padding-bottom: 1em;


}




.posts {


    display: flex;


    flex-wrap: wrap;


}




.post {


    width: 100%;


    margin: 1em;


    background: white;


    display: inline-block;


    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);


    border: 1px solid #eee;


    box-sizing: border-box;


}




.thumb-post {


    max-width:100%;


    height: auto;


}




.content {


    padding: 1em;


}




.footer {


    border-top: 3px solid black;


    padding-top: 1em;


    text-align: center;


}




@media (min-width: 960px) {


    .post {


        width: calc(50% - 2em);


    }


}

O post serviu como introdução a imagens responsivas temos outros caminhos para trabalhar com imagens responsivas e vamos abordar em mais posts, se quiser conferir mais tutoriais confira a página da categoria tutoriais ou deixe um comentário.

Categorias
AMP Accelerated mobile pages

Adicionando Analytics em páginas AMP

Accelerated Mobile Pages (AMP) é uma plataforma usada para construir conteúdo estático de forma rápida. AMP possui o componente que permite mensurar as interações do usuário com Google Analytics em páginas AMP.

Configuração básica

Para criar uma instalação básica do Google Analytics em uma página AMP, copie e cole o código base a seguir e substitua <GA_MEASUREMENT_ID> pela a propriedade ID do seu Google Analytics.

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


<amp-analytics type="gtag" data-credentials="include">


<script type="application/json">


{


  "vars" : {


    "gtag_id": "<GA_MEASUREMENT_ID>",


    "config" : {


      "<GA_MEASUREMENT_ID>": { "groups": "default" }


    }


  }


}


</script>


</amp-analytics>

Como funciona Google Analytics em páginas AMP?

O componente <amp-analytics> é um extended component para habilita-lo precisamos carregar o script responsável para carregar o componente:

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

Depois de incluir o script precisamos configurar nosso componente amp-analytics, primeiro atributo é o type, define qual o tipo de tracking iremos trabalhar nesse caso vamos utilizar o “gtag” mas o componente aceita uma lista extensa de ferramentas de tracking:

O segundo atributo é o data-credentials ele ativa a capacidade de leitura de cookies em uma solicitação específica por meio de um atributo config.

AMP não permite JavaScript fora de seu controle ou por bibliotecas não aprovadas; portanto a configuração das ferramentas de monitoramento precisa ser realizadas através de um JSON. No caso do Google Analytics dentro do nosso JSON precisamos de uma propriedade gtag_id(o id do nosso Google Analytics) válida e as configurações para definir como iremos realizar o monitoramento definido pelo atributo config

Tráfego AMP vs. Tráfego não-AMP

O tráfego AMP utiliza IDs de clientes diferentes daquele para o tráfego da Web por padrão. As páginas AMP são carregadas mais rapidamente e mostram padrões de tráfego diferentes dos correspondentes de uma página web padrão, o que geralmente significa que você irá obter métricas diferentes entre páginas AMP e não-AMP.

O uso de uma propriedade separada pode ajudar a medir o tráfego AMP com uma melhor análise das métricas. Se vc precisar usar uma única propriedade para medir o tráfTego AMP e ano AMP, use uma dimensão de fonte de dados ou uma dimensão personalizada para distingui-los.

Por padrão, o Google Analytics envia o valor “AMP” pela dimensão da fonte de dados. Use esse valor para segmentar, filtrar ou analisar o conteúdo AMP versus o conteúdo não-AMP.

Assim conseguimos adicionar Google Analytics em páginas AMP. Para ver mais conteúdo sobre AMP acesse a página da categoria ou deixe um comentário.

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