8 AMP-komponenter for sosial mediaintegrasjon
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
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
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:
DeTwitter 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 avdata-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 fordata-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
ogheight
, 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
ogheight
.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 tildata-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-knappDu kan også legge til en Pin It-knappen til din AMP-side ved hjelp av
komponent. Bortsett fra width
ogheight
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-knappdata-url
med nettadressen du vil deledata-media
med den absolutte nettadressen til bildet du vil at brukerne skal pinnedata-description
med beskrivelsen du vil se i Pin-opprettingsskjemaetDet 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 avdata-do="buttonFollow"
-attributtet, og angi navnet du vil vise i Følg-knappen idata-do="buttonFollow"
og URL-adressen til kontoen din idata-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 å spesifisereheight
, 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 ententrue
ellerfalse
(standard erfalse
).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 modusI
Visual Mode
spenner det kjennetegnet bildet bak lydspilleren. Her kan du også finne riktigheight
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 valgfriedata-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 spesifisererwidth
ogheight
, 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) ogheight
(standard er 44px) attributter, og navnet på den sosiale media-leverandøren itype
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 delingendata-url
for nettadressen du vil deledata-attribution
for navnet på personen eller leverandøren du vil at din andel skal tilskrivesIkke 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.Skript for å inkludere:
Del store filer og prosjekter med Pibox Messaging App
Vi velger våre favorittmeldingsapper for en rekke grunner, preferanser og behov . Men blant alle tilgjengelige messaging app valg der ute, når det gjelder å dele store filer, kan ikke alle levere.Vanligvis meldingsprogrammer begrenser størrelsen på bildet; Dette betyr at utfallet ikke er like bra som originalen . Hvi
Slik bruker du ES6 Template Literals i JavaScript
I programmeringen refererer begrepet "bokstavelig" til notasjonen av verdier i kode. For eksempel merker vi en strengverdi med en streng bokstavelig, som er tegn som er omsluttet i dobbelte eller enkle anførselstegn ( "foo", 'bar', "This is a string!" ).Malte bokstaver ble introdusert i ECMAScript 6 .