8 componentes AMP para integração de mídia social
O maior conflito que o padrão da Web para dispositivos móveis do Google, Páginas móveis aceleradas precisa resolver é tornando sites móveis mais rápidos, enquanto mantendo-os funcionais e ricos em conteúdo. Hoje em dia, conteúdo rico e envolvente dificilmente pode ser imaginado sem incorporações de sites populares de mídia social - tweets, vídeos, áudios, postagens, fotos.
Componentes AMP estendidos - entre outros ótimos recursos - fornecem uma ótima maneira de integrar AMP documentos com diferentes tipos de conteúdo social.
Como funcionam os componentes ampliados de AMP
No núcleo da filosofia da AMP estão os melhores práticas de desempenho. Para melhorar os tempos de carregamento da página, os padrões de AMP restringem como você pode usar tecnologias front-end. Por exemplo, você não pode usar JavaScript personalizado, folhas de estilo externas e qualquer elemento HTML que carregue recursos externos, como o
Em troca, você recebe um monte de Componentes AMP você pode usar para exibir recursos externos, tais como imagens, vídeos, áudios, anúncios, etc. no seu site.
Componentes AMP são tags HTML específicas que pode ser usado de forma semelhante a tags HTML comuns. Alguns deles são construídas em para o tempo de execução AMP, enquanto a maioria funciona como extensões. Componentes que possibilitam a integração de mídia social em páginas AMP são todos componentes estendidos.
Componentes AMP estendidos exigem que você importe o script pertencente no seção do seu documento HTML da AMP. Como o AMP é um projeto de código aberto, o número de componentes estendidos pode crescer no futuro.
Neste post, coletamos um punhado de componentes AMP que podem ajudá-lo com integração de mídia social. Tenha em mente que as versões dos scripts pode mudar com o tempo, Por isso, confira sempre a documentação antes de incluí-la em seu site.
1. amp-facebook
Você sempre precisa especificar as dimensões da postagem incorporada, o que significa que você precisa adicionar um largura e um altura atributo com valores em pixels inteiros. Você pode encontrar as dimensões adequadas clicando no menu "Incorporar" na parte superior da postagem do Facebook.
Você também é obrigado a adicione o URL da postagem fornecida no data-href atributo. Você pode encontrar o URL clicando no timestamp da postagem no Facebook, e o navegador irá inserir o URL exclusivo na barra de endereços..
Se você quiser incorporar um vídeo sem a postagem do Facebook pertencente, adicione o opcional data-embed-as = "video" atributo
Se você quiser faça sua incorporação responsiva use o layout atributo com o "responsivo" valor. Você também pode usar o opcional layout Atributo em qualquer outro componente AMP para controlar seu layout.
Exemplo de código:
Visualização de código:
Script para incluir:
2. amp-twitter
Você pode incorporar tweets em páginas AMP usando o
Para fazer isso, você precisa especifique o ID do tweet no tweetid de dados atributo. Você pode modificar como o tweet é exibido adicionando qualquer uma das opções de exibição do Twitter APi como dados-* Atributo HTML5.
Por exemplo, no exemplo abaixo, usei as APIs do Twitter cor do link opção de exibição como cor de link de dados (Está dados-* formato) para alterar a cor do link padrão para a cor que o Hongkiat.com usa em sua conta do Twitter.
Exemplo de código:
Visualização de código:
o O Twitter atualmente não fornece uma API que produz taxas de proporção fixas.
.
Isso significa que você precisa definir manualmente o largura e altura atributos, como o tempo de execução do AMP às vezes não exibe uma parte (geralmente a parte inferior) do tweet.
É sempre uma boa ideia verificar a aparência dos seus tweets incorporados antes de publicar a página AMP.
Adicionar um marcador de espaço
Embora não seja necessário, a documentação recomenda adicionando um espaço reservado caso o tweet não seja carregado de uma só vez.
o placeholder atributo pode ser usado em cada componente AMP. O espaço reservado é mostrado imediatamente se os recursos finais não estiverem disponíveis. Quando o elemento AMP é carregado, esconde seu espaço reservado.
Veja como é o código de exemplo acima com um espaço reservado. No Twitter, eu simplesmente cliquei no botão Incorporar Tweet, copiei e colei o blockquote (sem o script no final) e adicionei o placeholder atributo para o tag.
Exemplo de código com espaço reservado:
Como validar as páginas móveis aceleradas (#AMP) #Google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@ hongkiat) 15 de agosto de 2016
Script para incluir:
3. amp-instagram
Com
Você é obrigado a especificar as dimensões da incorporação com o largura e altura atributos, e você também tem que adicione o identificador da foto ou vídeo do Instagram usando o data-shortcode atributo.
Você pode encontrar o identificador no final do URL, pois o exemplo da foto abaixo do URL é https://www.instagram.com/p/-PFt7tF8Km/, então eu preciso usar -PFt7tF8Km como valor para o data-shortcode atributo.
Exemplo de código:
Visualização de código:
Para layouts responsivos, O AMP calcula automaticamente o espaço necessário que também inclui o “Instagram chrome” (nome da conta, data, número de curtidas, etc).
Isso significa que você pode usar qualquer valor para largura e altura, até o dois valores são iguais (As fotos do Instagram geralmente são quadradas), pois o tempo de execução do AMP redimensionará a imagem de acordo com o espaço disponível.
Se a foto não é um quadrado, você tem que especificar o seu real largura e altura valores.
Para layouts fixos, você precisa incluir o espaço extra (superior e inferior: +48 px, esquerda e direita: + 8px) necessário para o cromo do Instagram ao calcular as dimensões da imagem.
Script para incluir:
4. amp-pinterest
Incorporar um widget de pin
Para incorporar um widget Pin, você precisa especificar as dimensões, o URL do pin usando o URL de dados atributo, e você também precisa adicionar o data-do = "embedPin" atributo.
Exemplo de código (tamanho padrão):
Como o widget Pin padrão é muito pequeno, você também pode optar por uma versão maior usando o data-width = "medium" atributo.
Exemplo de código (tamanho médio):
Visualização de código (tamanho médio):
Exibir um botão Pin It
Você também pode adicione um botão Pin It na sua página AMP com a ajuda do largura e altura dimensões, você é necessário para especificar quatro atributos a fim de incorporar o botão Pin It:
data-do = "buttonPin"deixar o tempo de execução da AMP saber que esse será um botão "Pin It"URL de dadoscom o URL que você deseja compartilharmeios de dadoscom o URL absoluto da imagem que você deseja que os usuários fixemdescrição de dadoscom a descrição que você deseja que apareça no formulário Criar PIN
tem muitos tamanhos diferentes de botões, Para escolher, confira os documentos para todos os tamanhos disponíveis.
Exemplo de código:
Neste exemplo, criei um botão Pin It que permitiria aos usuários fixar uma imagem dessa postagem anterior do Hongkiat.com. Eu usei o pequeno tamanho do botão retangular.
Visualização de código:
Observe que você precisa usar CSS adicional para exibir o botão Pin It na parte superior da imagem.
Você também pode criar um botão Seguir do Pinterest usando o data-do = "buttonFollow" atributo e especificando o nome que você deseja exibir dentro do botão rótulo de dados & o URL da sua conta no data-href atributo.
Exemplo de código (botão Seguir):
Script para incluir:
5. amp-soundcloud
O SoundCloud é uma popular plataforma de distribuição de áudio onde os usuários podem compartilhar suas músicas. Com a ajuda do
Este componente pode só pode ser usado com altura fixa layout o que significa que você só precisa especificar o altura, e a largura será calculada pelo tempo de execução da AMP. Como resultado, o leitor de áudio SoundCloud integrado preencha todo o espaço horizontal disponível.
o dados-visuais atributo para qualquer verdade ou falso (o padrão é falso).
Nos dois modos, você tem que usar o rastreio de dados atribuir a especifique o identificador do áudio; você pode encontrar o ID de áudio clicando no botão Compartilhar abaixo do player de áudio no SoundCloud.com e procurando o URL de formato longo dentro do código de incorporação.
Modo Clássico
o Modo Clássico exibe uma pequena imagem em miniatura à esquerda e o reprodutor de áudio à direita. Você pode obter o valor adequado para o altura atributo do código Embed no SoundCloud.com.
No Modo Clássico, você pode especificar a cor do reprodutor de áudio se quiser usar o cor de dados atributo (você não pode fazer isso no modo visual).
Exemplo de código (modo clássico):
Visualização de código (modo clássico):
Modo Visual
Em Modo Visual, a imagem em destaque se estende por trás do reprodutor de áudio. Aqui, você também pode encontrar o altura pertencente ao Modo Visual no código Embed no SoundCloud.com.
Exemplo de código (modo visual):
Exemplo de código (modo visual):
Se você quiser incorporar um áudio privado, use o opcional token secreto de dados atributo.
Script para incluir:
6. ampola
O Vine é um site de compartilhamento de vídeos em formato curto no qual você pode compartilhar vídeos longos de 6 segundos com seus amigos. o
Esse componente AMP é bastante simples, você só precisa adicionar as dimensões e o ID do vídeo do Vine no data-vineid atributo. Você pode obter o ID da URL de cada Vine.
Como Vines são quadrados, se você usar o layout responsivo, a mesma regra se aplica às incorporações do Instagram; você pode adicionar qualquer valor ao largura e altura atributos, até que eles sejam iguais eles vão funcionar corretamente.
Exemplo de código:
Visualização de código:
Script para incluir:
7. amp-youtube
Você pode incorporar vídeos do YouTube nas páginas AMP com a ajuda do
Para fazer isso, você precisa adicionar as dimensões, além do ID do vídeo no data-videoid atributo. Ao especificar largura e altura, é importante preste atenção ao formato.
Você também pode use os parâmetros das incorporações do YouTube em documentos AMP, basta inserir o nome do parâmetro depois de data-param- prefixo.
Exemplo de código:
Neste exemplo, fiz uso do começar Parâmetro do YouTube no data-param-start atributo para fazer o vídeo começar aos 43s.
Visualização de código:
Script para incluir:
Outros serviços de compartilhamento de vídeos
O AMP também possui componentes relacionados a outros serviços de compartilhamento de vídeo, trabalhar de forma semelhante ao
8. amp-social-share
Além de incorporar mídias sociais, você também pode exibir botões de compartilhamento social nas suas páginas AMP usando o
O recurso de compartilhamento social é pré-configurado para alguns provedores, mas com as configurações certas, você pode usar o
Botões de compartilhamento pré-configurados
Botões de compartilhamento pré-configurados não requer muitas configurações; você tem que definir o largura (o padrão é 60px) e altura (o padrão é 44px), e o nome do provedor de mídia social no tipo atributo.
Com o Facebook, você também é obrigado a especificar o ID do aplicativo do Facebook no data-param-app_id atributo.
Exemplo de código:
Visualização de código:
A pré-configuração faz suposições que o URL que você deseja compartilhar é o URL canônico da página atual, e o texto que você deseja incluir no compartilhamento é o título da página.
Se você quiser usar outra configuração, você pode fazer isso com o seguinte três atributos opcionais:
texto de dadospara o texto que você deseja incluir no compartilhamentoURL de dadospara o URL que você deseja compartilharatribuição de dadospara o nome da pessoa ou fornecedor para o qual você deseja que sua parte seja atribuída
Botões de compartilhamento não configurados
Para exibir botões de compartilhamento social de provedores não configurados, como WhatsApp, você precisa especificar o protocolo personalizado do provedor no data-share-endpoint atributo. Confira nos documentos como você pode fazer isso.
Script para incluir:
