no.hideout-lastation.com
Paradis For Designere Og Utviklere


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

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:

  1. data-do="buttonPin" å la AMP-kjøretiden vite at dette vil være en Pin It-knapp
  2. data-url med nettadressen du vil dele
  3. data-media med den absolutte nettadressen til bildet du vil at brukerne skal pinne
  4. 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 :

  1. data-text for teksten du vil inkludere i delingen
  2. data-url for nettadressen du vil dele
  3. 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.

Skript for å inkludere:

Del store filer og prosjekter med Pibox Messaging App

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

(Tekniske og design tips)

Slik bruker du ES6 Template Literals i JavaScript

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 .

(Tekniske og design tips)