Den største konflikten som Googles mobilnettstandard, Accelerated Mobile Pages trenger å løse, gjør mobilnettsteder raskere, samtidig som de er funksjonelle og innholdsrike . 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 annet flotte funksjoner - gir en flott måte å integrere AMP- dokumenter med forskjellige sosiale innholdstyper.
Hvor utvidede AMP-komponenter fungerer
Kjernen i AMPs filosofi er Googles beste ytelsespraksis . For å forbedre sidetilpasningstider 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 masse AMP-komponenter du kan bruke til å vise eksterne ressurser, for eksempel bilder, videoer, lyd, reklame 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 bygget inn i 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 importerer tilhørende skript i
delen av ditt AMP HTML-dokument. Siden AMP er et åpen kildekodeprosjekt, kan antall utvidede komponenter vokse i fremtiden.
I dette innlegget har vi samlet en håndfull AMP-komponenter som kan hjelpe deg med sosiale medier integrering . 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 i en AMP-side.
Du må alltid angi dimensjonene til det innebygde innlegget, noe som betyr at du må legge til en width og et høydeattributt med verdier i heltallspiksler. Du finner de riktige dimensjonene ved å klikke på "Embed" -menyen øverst på Facebook-posten.
Du må også legge til nettadressen til det oppgitte innlegget i data-href attributtet. Du kan finne nettadressen ved å klikke på tidsstempelet til 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 det valgfrie data-embed-as="video" -attributtet
Hvis du vil gjøre embedet responsivt, bruk layoutattributtet med den "responsive" verdien. Du kan også bruke det valgfrie layout på en annen AMP-komponent for å kontrollere utformingen.
Kodeeksempel:
Kode forhåndsvisning:
Skript for å inkludere:
2. amp-twitter
Du kan legge inn tweets i AMP-sider ved å bruke komponent.
For å gjøre dette må du spesifisere ID-en til tweetet i data-tweetid attributtet. Du kan endre hvordan tweet vises ved å legge til noen av de visningsalternativene til Twitter APi som et data-* HTML5-attributt.
For eksempel, i eksemplet nedenfor brukte jeg Twitter APIs linkColor visningsalternativ som data-link-color (dets data-* format) for å endre standard lenkefarge til fargen Hongkiat.com bruker på sin Twitter-konto.
Kodeeksempel:
Kode forhåndsvisning:
De komponenten er ikke perfekt ennå, sier Github docs at Twitter for øyeblikket ikke gir en API som gir fast sidestykke Tweet embeds .
Dette betyr at du må angi width og height manuelt, da 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 at du legger til en plassholder hvis tweetet ikke lastes samtidig.
placeholder kan brukes på hver AMP-komponent. Stedholderen vises umiddelbart hvis de endelige ressursene ikke er tilgjengelige. Når AMP-elementet laster, skjuler det plassholderen .
Ta en titt på hvordan eksempelkoden ovenfor ser ut som en plassholder . På Twitter klikket jeg ganske enkelt på knappen Embed Tweet, kopierte og limte inn embeddable blockquote (uten skriptet på slutten), og la til placeholder til
stikkord.
Kodeeksempel med plassholder:
Slik validerer du akselererte ( )
- Hongkiat (@hongkiat)
Skript for å inkludere:
3. amp-instagram
Med , kan du legge inn Instagram-bilder og videoer i dine AMP-sider.
Du må spesifisere dimensjonene for embedden med width og høydeattributtene, og du må også legge til identifikatoren for Instagram-bildet eller -videoen ved hjelp av data-shortcode attributt.
Du finner identifikatoren på slutten av nettadressen, for eksempelet til bildet nedenfor er nettadressen https://www.instagram.com/p/-PFt7tF8Km/, så jeg må bruke -PFt7tF8Km som verdi for data-shortcode .
Kodeeksempel:
Kode forhåndsvisning:
For responsive oppsett beregner AMP automatisk nødvendig plass som også inkluderer "Instagram Chrome" (kontonavn, dato, antall liker osv.).
Dette betyr at du kan bruke en hvilken som helst verdi for width og height, til de to verdiene 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 er et kvadrat, må du angi dens faktiske width og height .
For faste layouter må du inkludere ekstra plass (øverst og nederst: +48 px, venstre og høyre: + 8 px) som trengs for Instagram-krom når du beregner bildedimensjonene.
Skript for å inkludere:
4. amp-pinterest
lar deg legge inn enten en Pin-widget eller en Pin It-knapp i et AMP HTML-dokument.
Legge inn en Pin Widget
For å legge inn en Pin-widget må du spesifisere dimensjonene, nettadressen til pinet ved hjelp av data-url, og du må også legge til data-do="embedPin" -attributtet.
Kodeeksempel (standardstørrelse):
Som standard Pin-widget er ganske liten, kan du også velge en større versjon ved å bruke data-width="medium" -attributtet.
Kodeeksempel (middels størrelse):
Kode forhåndsvisning (middels størrelse):
Vis en pin-knapp
Du kan også legge til en Pin It-knappen til din AMP-side ved hjelp av komponent. Bortsett fra width og height dimensjoner, er du pålagt å spesifisere 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 pinne
data-description med beskrivelsen du vil se i Pin-opprettingsskjemaet
Det finnes mange forskjellige knappestørrelser, for å 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 hjelp av data-do="buttonFollow" -attributtet, og angi navnet du vil vise i Følg-knappen i data-do="buttonFollow" og URL-adressen til kontoen din i data-href attributtet.
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 spille SoundCloud-spor rett fra din AMP HTML-side.
Denne komponenten kan kun brukes med fixed-height noe som betyr at du bare trenger å spesifisere height, og bredden beregnes av AMP-kjøretiden. Som et resultat vil den innebygde SoundCloud-lydspilleren fylle 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-visual attributt til enten true eller false (standard er false ).
I begge modi må du bruke data-trackid attributtet til å angi identifikatoren for lyden; Du kan finne lyd-IDen ved å klikke på Del-knappen under lydspilleren på SoundCloud.com, og ser opp den lange form-URL-adressen inne i Embed-koden.
Klassisk modus
Classic Mode viser et lite miniatyrbilde til venstre, og lydspilleren til høyre. Du kan få riktig verdi for høydeattributtet fra Embed-koden på SoundCloud.com.
I klassisk modus kan du angi fargen på lydspilleren hvis du vil bruke datafargetattributtet (du kan ikke gjøre dette i visningsmodus).
Kodeeksempel (klassisk modus):
Kode forhåndsvisning (klassisk modus):
Visuell modus
I Visual Mode spenner det kjennetegnet bildet bak lydspilleren. Her kan du også finne riktig height tilhører Visual Mode i Embed-koden på SoundCloud.com.
Kodeeksempel (visuell modus):
Kodeeksempel (visuell modus):
Hvis du vil legge inn en privat lyd, bruker du den valgfrie data-secret-token attributtet.
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 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 attributtet. 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 verdi for width og høydeattributter, til de er like de fungerer riktig.
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 attributten data-videoid . Når du spesifiserer width og height, er det viktig å være oppmerksom på aspektforholdet .
Du kan også bruke parametrene for YouTube-tjenestene i AMP-dokumenter, bare sett inn navnet på parameteren etter data-param- prefikset .
Kodeeksempel:
I dette eksemplet benyttet jeg startparameteren i data-param-start attributtet for å få videoen til å begynne på 43-tallet.
Kode forhåndsvisning:
Skript for å inkludere:
Andre videodelingstjenester
AMP har også komponenter knyttet til andre videodelingstjenester, som 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-social-share
Bortsett fra sosiale medier, kan du også vise sosiale deleknapper på AMP-sidene dine ved å bruke komponent.
Den sosiale delingsfunksjonen 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
Forvalgte delingsknapper krever ikke for mange innstillinger; du må definere width (standard er 60px) og height (standard er 44px) attributter, og navnet på den sosiale media-leverandøren i type attributtet.
Med Facebook, er du også pålagt å angi Facebook app id i data-param-app_id attributtet.
Kodeeksempel:
Kode forhåndsvisning:
Forkonfigurasjonen gjør forutsetninger om 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-text for teksten du vil inkludere i delingen
data-url for nettadressen du vil dele
data-attribution for navnet på personen eller leverandøren du vil at din andel skal tilskrives
Ikke konfigurerte deleknapper
Hvis du vil vise sosiale deleknapper for ukonfigurerte leverandører, for eksempel WhatsApp, må du angi leverandørens tilpassede protokoll i data-share-endpoint attributtet. Sjekk ut i dokumentene hvordan du kan gjøre dette.
Designere elsker å klage på "overfladiske" designtrender som de ikke føler har noen makt eller bidrar til noe som betyr noe for bransjen. Men er de rett?I dag skal vi snakke om designtrender og nye fenomener som får mange designere pumpet opp, men det kan også trekke ire av andre som tror designindustrien går ned i rørene.Er des
En av de mest populære nettleserne som brukerne elsker, er Google Chrome, men til tross for alle funksjonaliseringsoppdateringene og feilrettingene kan Chrome være treg til tider på grunn av noen av funksjonene, utvidelsene eller programmene.Den gode nyheten er at det er ulike tips og triks og hack som bidrar til å forbedre den totale hastigheten og følsomheten til denne nettleseren, som senere kan forbedre sidens last og webleserhastigheter. I d
no.hideout-lastation.com
Skript for å inkludere:
De For responsive oppsett beregner AMP automatisk nødvendig plass som også inkluderer "Instagram Chrome" (kontonavn, dato, antall liker osv.).
Vis en pin-knapp
Du kan også opprette en Pinterest Follow-knapp ved hjelp av
Visuell modus
Hvis du vil legge inn en privat lyd, bruker du den valgfrie
Skript for å inkludere:
Skript for å inkludere:
Forkonfigurasjonen gjør forutsetninger om at nettadressen du vil dele, er den kanoniske nettadressen til gjeldende side, og teksten du vil inkludere i din del, er sidetittelen.
For responsive oppsett beregner AMP automatisk nødvendig plass som også inkluderer "Instagram Chrome" (kontonavn, dato, antall liker osv.).
Vis en pin-knapp 
Du kan også opprette en Pinterest Follow-knapp ved hjelp av 
Visuell modus 
Hvis du vil legge inn en privat lyd, bruker du den valgfrie 
Skript for å inkludere:
Skript for å inkludere:
Forkonfigurasjonen gjør forutsetninger om at nettadressen du vil dele, er den kanoniske nettadressen til gjeldende side, og teksten du vil inkludere i din del, er sidetittelen.
