8 AMP-komponenter for sosial mediaintegrasjon

Den største konflikten som Googles mobilnettstandard, Akselerert mobil sider trenger å løse er gjør mobilnettsteder raskere, samtidig som holde dem funksjonelle og rik på innhold. I disse dager kan ikke rike og engasjerende innhold bli forestilt uten å være innlemmet fra populære sosiale medier - tweets, videoer, lyd, innlegg, bilder.

Utvidede AMP-komponenter - blant andre flotte funksjoner - gir en flott måte å integrere AMP dokumenter med forskjellige sosiale innholdstyper.

Hvor utvidede AMP-komponenter fungerer

Kjernen i AMPs filosofi er det Googles beste ytelsespraksis. For å forbedre sidelastningstider begrenser AMP-standardene hvordan du kan bruke front-end teknologier. Du kan for eksempel ikke bruke egendefinert JavaScript, eksterne stilark og ethvert HTML-element som laster eksterne ressurser, for eksempel stikkord.

I bytte får du en haug med AMP-komponenter du kan bruke til vise eksterne ressurser, for eksempel bilder, videoer, lyd, annonser, etc. på nettstedet ditt.

AMP-komponenter er spesifikke HTML-koder som kan brukes på samme måte som vanlige HTML-koder. Noen av dem er innebygd til AMP-kjøretiden, mens flertallet fungerer som utvidelser. Komponenter som gjør det mulig å integrere sosial media på AMP-sider er alle utvidede komponenter.

Utvidede AMP-komponenter krever at du importere tilhørende skript i del av ditt AMP HTML-dokument. Siden AMP er et open-source-prosjekt, kan antall utvidede komponenter vokse i fremtiden.

I dette innlegget har vi samlet en håndfull AMP-komponenter som kan hjelpe deg med sosial mediaintegrasjon. Husk at versjoner av skriptene kan endres over tid, så sjekk alltid dokumentasjonen før du inkludere dem på nettstedet ditt.

1. `amp-facebook`

gjør det mulig å legge inn et Facebook-innlegg eller en video inn i en AMP-side.

Du trenger alltid å spesifiser dimensjonene til det innebygde innlegget, som betyr at du må legge til en bredde og a høyde Tilordne med verdier i heltallpiksler. Du kan finne de riktige dimensjonene ved å klikke på "Embed" -menyen på toppen av Facebook-innlegget.

Du er også pålagt å Legg til nettadressen til det oppgitte innlegget i data-href Egenskap. Du kan finne nettadressen ved å klikke på tidsstempel for Facebook-innlegget, og nettleseren vil sette inn den unike nettadressen i adressefeltet.

Hvis du vil legge inn en video uten tilhørende Facebook-post, legg til valgfritt data-embed-as = "video" Egenskap

Hvis du vil Gjør ditt embed reagerer bruke oppsett attributt med "mottakelig" verdi. Du kan også bruke tilleggsutstyret oppsett Tilordne på en hvilken som helst annen AMP-komponent for å kontrollere utformingen.

Kodeeksempel:

Kode forhåndsvisning:

Skript for å inkludere:

2. `amp-twitter`

Du kan embed tweets inn i AMP-sider ved å bruke komponent.

For å gjøre det, må du angi IDen til tweetet i data-tweetid Egenskap. Du kan endre hvordan tweet vises ved å legge til noen av de fremvisende alternativene til Twitter APi som en data-* HTML5-attributt.

For eksempel, i eksemplet nedenfor brukte jeg Twitter APIs linkColor visningsalternativ som data-link-farge (det er data-* format) for å endre standard lenkefarge til fargen Hongkiat.com bruker på sin Twitter-konto.

Kodeeksempel:

Kode forhåndsvisning:

De komponent er ikke perfekt ennå, sier Github docs det Twitter gir for øyeblikket ikke en API som gir fast sidestykke Tweet embeds.

Dette betyr at du må sett inn manuelt bredde og høyde egenskaper, som AMP-kjøretiden noen ganger ikke viser en del (vanligvis bunnen) av tweetet.

Det er alltid en god ide å sjekke hvordan dine innebygde tweets ser ut før du publiserer AMP-siden.

Legg til en plassholder

Selv om det ikke er nødvendig, anbefaler dokumentasjonen legger til en plassholder i tilfelle tweetet ikke lastes på en gang.

De plassholder Attributt kan brukes på hver AMP-komponent. Stedholderen er vist umiddelbart hvis de endelige ressursene ikke er tilgjengelige. Når AMP-elementet laster, det skjuler sin plassholder.

Ta en titt på hvordan eksempelkoden ovenfor ser ut med en plassholder. På Twitter klikket jeg ganske enkelt på knappen Embed Tweet, kopi-klistret inn embeddable blockquote (uten skriptet på slutten), og la til plassholder attributt til

stikkord.

Kodeeksempel med plassholder:
   Slik validerer du akselerert mobilsider (#AMP) #Google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  15. august 2016 
  
Skript for å inkludere:
  
3. amp-instagram

Med , du kan legge inn Instagram-bilder og videoer inn i dine AMP-sider.

Du er pålagt å spesifiser dimensjonene av embedet med bredde og høyde attributter, og du må også legg til identifikatoren av Instagram-bildet eller -videoen ved hjelp av data-snarvei Egenskap.

Du finner identifikatoren på slutten av nettadressen, for eksempelet for bildet nedenfor URL-adressen er https://www.instagram.com/p/-PFt7tF8Km/, så jeg må bruke -PFt7tF8Km som verdi for data-snarvei Egenskap.

Kodeeksempel:
   
Kode forhåndsvisning:

For responsive layouter, AMP beregner automatisk nødvendig plass som også inkluderer “Instagram krom” (kontonavn, dato, antall liker osv.).

Dette betyr at du kan bruke noen verdi for bredde og høyde, til to verdier er like (Instagram-bilder er vanligvis firkantede), da AMP-kjøretiden vil endre størrelsen på bildet i henhold til ledig plass.

Hvis bildet ikke kommer til å være et torg, må du spesifisere det aktuelle bredde og høyde verdier.

Til faste oppsett, du trenger å Ta med ekstra plass (topp og bunn: +48 px, venstre og høyre: + 8px) som trengs for Instagram-krom når du beregner bildedimensjonene.

Skript for å inkludere:
  
4. amp-pinte

lar deg legg inn enten en Pin-widget eller en Pin-knappen inn i et AMP HTML-dokument.

Legge i en Pin Widget

Hvis du vil legge inn en Pin-widget, må du spesifisere dimensjonene, nettadressen til tappen ved hjelp av data-url attributt, og du må også legge til data-do = "embedPin" Egenskap.

Kodeeksempel (standardstørrelse):
   
Som standard Pin-widgeten er ganske liten, kan du også velge en større versjon ved å bruke data-width = "medium" Egenskap.

Kodeeksempel (middels størrelse):
   
Kode forhåndsvisning (middels størrelse):

Vis en pin-knapp

Du kan også legg til en Pin It-knappen til din AMP side ved hjelp av komponent. Bortsett fra bredde og høyde dimensjoner, du er Kreves å angi fire attributter for å legge inn pin-knappen:

data-do = "buttonPin" å la AMP-kjøretiden vite at dette vil være en Pin It-knapp

data-url med nettadressen du vil dele

data-media med den absolutte nettadressen til bildet du vil at brukerne skal peke på

databeskrivelse med beskrivelsen du vil se i Pin-opprettingsskjemaet

Det er mange forskjellige knappestørrelser, å velge mellom, kontroller dokumentene for alle tilgjengelige størrelser.

Kodeeksempel:

I dette eksemplet opprettet jeg en Pin It-knapp som tillater brukere å pinne et bilde fra dette tidligere Hongkiat.com-innlegget. Jeg brukte den lille rektangulære knappestørrelsen.
      
 
Kode forhåndsvisning:

Merk at du må bruke ekstra CSS for å vise Pin It-knappen øverst på bildet.

Du kan også opprette en Pinterest Follow-knapp ved å bruke data-do = "buttonFollow" attributt og angi navnet du vil vise inne i Følg-knappen i data-etikett & URL til kontoen din i data-href Egenskap.

Kodeeksempel (Følg knapp):
   
Skript for å inkludere:
  
5. amp-Soundcloud

SoundCloud er en populær lyddistribusjonsplattform hvor brukere kan dele sin musikk. Med hjelp av komponent du kan spill SoundCloud-spor rett fra din AMP HTML-side.

Denne komponenten kan bare brukes med med fast høyde oppsett som betyr at du bare trenger å spesifisere høyde, og bredden beregnes av AMP-kjøretiden. Som et resultat vil den innebygde SoundCloud lydspilleren fyll ut alt tilgjengelig horisontalrom.

De komponent kan vises i enten klassisk eller visuell modus. Du kan velge mellom de to modusene ved å sette verdien av data og video tilskrive heller ekte eller falsk (standard er falsk).

I begge modi må du bruke data-TrackID tilskrive spesifiser identifikatoren av lyden; Du kan finne lyd-IDen ved å klikke på Del-knappen under lydspilleren på SoundCloud.com, og ser opp den lange formularadressen inne i Embed-koden.

Klassisk modus

De Klassisk modus viser et lite miniatyrbilde til venstre, og lydspilleren til høyre. Du kan få riktig verdi for høyde attributt fra Embed-koden på SoundCloud.com.

I klassisk modus kan du angi fargen på lydspilleren hvis du vil bruke data-farge attributt (du kan ikke gjøre dette i visuell modus).

Kodeeksempel (klassisk modus):
   
Kode forhåndsvisning (klassisk modus):

Visuell modus

I Visuell modus, det kjennetegnet bildet spenner bak lydspilleren. Her kan du også finne riktig høyde som tilhører Visual Mode i Embed-koden på SoundCloud.com.

Kodeeksempel (visuell modus):
   
Kodeeksempel (visuell modus):

Hvis du vil legge inn en privat lyd, bruk tilleggsutstyret data-hemmelige-token Egenskap.

Skript for å inkludere:
  
6. amp-vine

Vine er et kortformat videodelingsnettsted hvor du kan dele 6 sekunders lange videoer med vennene dine. De komponent gjør det mulig å enkelt legge inn Vine videoer inn i dine AMP HTML-sider.

Denne AMP-komponenten er ganske enkel, du trenger bare å legge til dimensjonene og IDen til Vine-videoen i data-vineid Egenskap. Du kan få ID fra nettadressen til hver Vine.

Som Vines er kvadrater, hvis du bruker det responsive layoutet, gjelder samme regel som med Instagram-embeds; Du kan legge til noen verdi for bredde og høyde egenskaper, til de er like de skal fungere ordentlig.

Kodeeksempel:
   
Kode forhåndsvisning:

Skript for å inkludere:
  
7. amp-youtube

Du kan legge inn YouTube-videoer på AMP sider ved hjelp av komponent.

For å gjøre dette må du legge til dimensjonene, pluss IDen til videoen i data-videoid Egenskap. Når du spesifiserer bredde og høyde, det er viktig å Vær oppmerksom på aspektforholdet.

Du kan også bruk parametrene for YouTube-tjenestene i AMP-dokumenter, bare skriv inn navnet på parameteren etter data-param- prefiks.

Kodeeksempel:

I dette eksemplet benyttet jeg av start YouTube-parameter i data-param-start attributt for å få videoen til å begynne på 43-tallet.
   
Kode forhåndsvisning:

Skript for å inkludere:
  
Andre videodelingstjenester

AMP har også komponenter knyttet til andre videodelingstjenester, det fungerer på samme måte som . Du kan bruke følgende utvidede AMP-komponenter for videoinnstillinger fra andre leverandører enn YouTube:

for Vimeo embeds

for Dailymotion embeds

for Brightcove embeds

8. amp-sosial-aksje

Bortsett fra sosiale medier, kan du også vis sosiale deler knapper på AMP-sidene dine ved å bruke komponent.

Den sosiale delen funksjonen er forhåndskonfigurert for noen leverandører, men med de riktige innstillingene kan du bruke komponent for alle andre sosiale deleknapper.

Pre-Configured Share-knapper

Forhåndsdefinerte delingsknapper krever ikke for mange innstillinger du må definere bredde (standard er 60px) og høyde (standard er 44px) attributter, og navnet på den sosiale media leverandøren i type Egenskap.

Med Facebook må du også angi Facebook app id i data-param-APP_ID Egenskap.

Kodeeksempel:
                    
 
Kode forhåndsvisning:

Forkonfigurasjonen gjør forutsetninger at nettadressen du vil dele, er den kanoniske nettadressen til gjeldende side, og teksten du vil inkludere i din del, er sidetittelen.

Hvis du vil bruke en annen config, kan du gjøre det med følgende tre valgfrie attributter:

data-tekst for teksten du vil inkludere i delingen

data-url for nettadressen du vil dele

data-henvisning for navnet på personen eller leverandøren du vil at din andel skal tilskrives

Ikke konfigurerte deleknapper

For å vise sosiale deleknapper for ukonfigurerte leverandører, for eksempel WhatsApp, må du spesifiser leverandørens tilpassede protokoll i data-aksje-endepunkt Egenskap. Sjekk ut i dokumentene hvordan du kan gjøre dette.

Skript for å inkludere:
  