8 AMP Komponenter til Social Media Integration
Den største konflikt, som Googles mobilwebstandard, Accelererede mobile sider har brug for at løse er gør mobilwebsites hurtigere, mens holde dem funktionelle og rig på indhold. Disse dage kan rigeligt og engagerende indhold næppe forestilles uden embeds fra populære sociale medier - tweets, videoer, lyd, indlæg, fotos.
Extended AMP Components - blandt andre fantastiske funktioner - giver en god måde at integrere AMP dokumenter med forskellige sociale indholdstyper.
Hvor Extended AMP Components Work
Kernen i AMPs filosofi er Googles bedste præstationspraksis. For at forbedre sideindlæsningstider begrænser AMP-standarderne hvordan du kan bruge front-end teknologier. Du kan f.eks. Ikke bruge brugerdefinerede JavaScript, eksterne stylesheets og ethvert HTML-element, der indlæser eksterne ressourcer, f.eks tag.
I bytte får du en flok AMP komponenter du kan bruge til Vis eksterne ressourcer, såsom billeder, videoer, lyd, reklamer osv. på dit websted.
AMP komponenter er specifikke HTML-tags der kan bruges på samme måde som almindelige HTML-tags. Et par af dem er indbygget til AMP-runtime, mens størstedelen fungerer som udvidelser. Komponenter, der muliggør integration af sociale medier på AMP-sider er alle udvidede komponenter.
Udvidede AMP-komponenter kræver dig importere tilhørende script i afsnit af dit AMP HTML-dokument. Da AMP er et open source-projekt, kan antallet af udvidede komponenter vokse i fremtiden.
I dette indlæg har vi samlet en håndfuld AMP komponenter, der kan hjælpe dig med social media integration. Husk på, at versionerne af scriptene kan ændre sig over tid, så altid tjek dokumentationen, før du inkludere dem på dit websted.
1. amp-facebook
gør det muligt at indlejre et Facebook-indlæg eller en video ind i en AMP side.
Du skal altid Angiv dimensionerne for det indlejrede indlæg, hvilket betyder at du skal tilføje en bredde
og a højde
attribut med værdier i heltal pixels. Du kan finde de rette dimensioner ved at klikke på menuen "Embed" øverst på Facebook-indlægget.
Du skal også Tilføj webadressen for det givne indlæg i data-href
attribut. Du kan finde URL'en ved at klikke på tidsstempel for Facebook-posten, og browseren vil indsætte den unikke webadresse i adresselinjen.
Hvis du vil integrere en video uden tilhørende Facebook-indlæg, Tilføj det valgfrie data-indlejre-as = "video"
attribut
Hvis du vil gøre din indlejring lydhør brug layout
attribut med "lydhør"
værdi. Du kan også bruge valgfri layout
attribut på enhver anden AMP-komponent til at kontrollere dens layout.
Kodeeksempel:
Kode forhåndsvisning:
Script til at omfatte:
2. amp-twitter
Du kan indlejre tweets ind i AMP sider ved at bruge
komponent.
For at gøre det skal du Angiv IDet for tweetet i data-tweetid
attribut. Du kan ændre, hvordan tweeten vises ved at tilføje et hvilket som helst af thedisplay mulighederne for Twitter APi som en data-*
HTML5-attributten.
I eksemplet nedenfor brugte jeg f.eks. Twitter API'erne linkColor
visningsindstilling som data-link-farve
(dens data-*
format) for at ændre standard linkfarven til farven Hongkiat.com bruger på sin Twitter-konto.
Kodeeksempel:
Kode forhåndsvisning:
Det
komponent er ikke perfekt endnu, siger Github docs det Twitter giver i øjeblikket ikke en API, der giver fast billedformat Tweet embeds
.
Det betyder at du skal Indstil manuelt manuelt bredde
og højde
egenskaber, som AMP-runtime viser nogle gange ikke en del (normalt bunden) af tweetet.
Det er altid en god idé at kontrollere, hvordan dine indlejrede tweets ligner, før du publicerer AMP-siden.
Tilføj en pladsholder
Selvom det ikke er nødvendigt, anbefaler dokumentationen tilføjer en pladsholder hvis tweetet ikke indlæses på en gang.
Det pladsholder
attribut kan bruges på hver AMP komponent. Stedholderen er vises straks hvis de endelige ressourcer ikke er tilgængelige. Når AMP elementet laster, det skjuler sin pladsholder.
Tag et kig på, hvordan ovenstående eksempelkode ser ud med en pladsholder. På Twitter klickede jeg simpelthen på knappen Embed Tweet, kopierede det embeddable blockquote (uden scriptet i slutningen) og tilføjede pladsholder
attribut til tag.
Kodeeksempel med pladsholder:
Sådan valideres accelererede mobile sider (#AMP) #google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15. august 2016
Script til at omfatte:
3. amp-instagram
Med
, du kan integrere Instagram-fotos og videoer ind i dine AMP sider.
Du skal angiv dimensionerne af embedet med bredde
og højde
attributter, og du skal også Tilføj identifikatoren af Instagram-fotoet eller -videoen ved hjælp af data-kortkode
attribut.
Du kan finde identifikatoren i slutningen af webadressen, for eksemplet for billedet nedenfor er URL'en https://www.instagram.com/p/-PFt7tF8Km/
, så jeg skal bruge -PFt7tF8Km
som værdi for data-kortkode
attribut.
Kodeeksempel:
Kode forhåndsvisning:
Til responsive layouts, AMP beregner automatisk det nødvendige rum, som også omfatter “Instagram krom” (kontonavn, dato, antal lignende osv.).
Det betyder, at du kan bruge en hvilken som helst værdi til bredde
og højde
, indtil to værdier er ens (Instagram-fotos er normalt firkantede), da AMP-runtime vil ændre størrelsen på billedet i henhold til det ledige rum.
Hvis billedet ikke er et firkant, skal du angive dets faktiske bredde
og højde
værdier.
Til faste layouter, du skal inkludere ekstra plads (øverste og nederste: +48 px, venstre og højre: + 8 px), der kræves til Instagram-krom, når du beregner billeddimensionerne.
Script til at omfatte:
4. amp-pinterest
giver dig mulighed for Indlejre enten en Pin-widget eller en Pin It-knap ind i et AMP HTML-dokument.
Embed en Pin Widget
For at indlejre en Pin-widget, skal du angive dimensionerne, URL'en til stiften ved hjælp af data-url
attribut, og du skal også tilføje data-do = "embedPin"
attribut.
Kodeeksempel (standardstørrelse):
Da standard Pin-widgeten er ret lille, kan du også vælge en større version ved at bruge data-width = "medium"
attribut.
Kodeeksempel (mellemstørrelse):
Kode forhåndsvisning (mellemstørrelse):
Vis en pin-knap
Du kan også Tilføj en Pin It-knap til din AMP side ved hjælp af
komponent. Bortset fra bredde
og højde
dimensioner, du er kræves for at angive fire attributter for at indlejre Pin It-knappen:
data-do = "buttonPin"
at lade AMP-spilletiden vide, at dette vil være en Pin It-knapdata-url
med den webadresse, du vil deledata-medier
med den absolutte webadresse for det billede, du vil have brugerne til at stiftedata-beskrivelse
med beskrivelsen, du ønsker at blive vist i formularen Opret formular
Der er mange forskellige knapstørrelser, at vælge imellem, tjek docs for alle tilgængelige størrelser.
Kodeeksempel:
I dette eksempel oprettede jeg en Pin It-knap, der gør det muligt for brugerne at pege på et billede fra dette tidligere Hongkiat.com-indlæg. Jeg brugte den lille rektangulære knapstørrelse.
Kode forhåndsvisning:
Bemærk, at du skal bruge yderligere CSS til at vise Pin It-knappen oven på billedet.
Du kan også oprette en Pinterest Follow-knap ved at bruge data-do = "buttonFollow"
attribut og angiv det navn, du vil vise inde i knappen Følg i data-label
& URL til din konto i data-href
attribut.
Kodeeksempel (Følg-knap):
Script til at omfatte:
5. amp-SoundCloud
SoundCloud er en populær lyddistributionsplatform, hvor brugere kan dele deres musik. Med hjælp fra
komponent du kan afspil SoundCloud-spor lige fra din AMP HTML-side.
Denne komponent kan må kun bruges sammen med fast højde
layout hvilket betyder at du kun skal angive højde
, og bredden beregnes ved AMP-driftstiden. Som følge heraf vil den indbyggede SoundCloud lydafspiller Udfyld alt ledigt vandret rum.
Det
komponent kan vises i enten klassisk eller visuel tilstand. Du kan vælge mellem de to tilstande ved at indstille værdien af data-visuelle
attribut til enten rigtigt
eller falsk
(standard er falsk
).
I begge tilstande skal du bruge data-TrackID
attribut til Angiv identifikatoren af lyden; Du kan finde lyd-id'et ved at klikke på knappen Share under lydafspilleren på SoundCloud.com og kigge på langformular-URL'en i embed code.
Klassisk tilstand
Det Klassisk tilstand
viser et lille miniaturebillede til venstre og lydafspilleren til højre. Du kan få den rette værdi for højde
attribut fra Embed-koden på SoundCloud.com.
I klassisk tilstand kan du angive farven på lydafspilleren, hvis du vil bruge data-farve
attribut (du kan ikke gøre dette i visuel tilstand).
Kodeeksempel (klassisk tilstand):
Kode forhåndsvisning (klassisk tilstand):
Visuel tilstand
I Visuel tilstand
, det fremhævede billede spænder bag lydafspilleren. Her kan du også finde den rigtige højde
der tilhører visuel tilstand i embed code på soundcloud.com.
Kodeeksempel (visuel tilstand):
Kodeeksempel (visuel tilstand):
Hvis du vil integrere en privat lyd, brug det valgfrie data-hemmelige-token
attribut.
Script til at omfatte:
6. amp-vin
Vine er et kortformet videodelingssite, hvor du kan dele 6 sekunders lange videoer med dine venner. Det
komponent gør det muligt nemt Embed Vine videoer ind i dine AMP HTML sider.
Denne AMP-komponent er ret simpel, du behøver kun at tilføje dimensionerne og Vine-videoens ID i data-vineid
attribut. Du kan få id'et fra URL til hver Vine.
Da vinstokke er firkanter, gælder den samme regel som i Instagram-embedsmænd, hvis du bruger det responsive layout. Du kan tilføje enhver værdi til bredde
og højde
egenskaber, indtil de er ens de fungerer ordentligt.
Kodeeksempel:
Kode forhåndsvisning:
Script til at omfatte:
7. amp-youtube
Du kan integrere YouTube-videoer på AMP sider med hjælp fra
komponent.
For at gøre det skal du tilføje dimensionerne plus videoens ID i filen data-VideoId
attribut. Når du angiver bredde
og højde
, det er vigtigt at Vær opmærksom på aspektforholdet.
Du kan også Brug parametrene for YouTube-embedsmuligheder I AMP-dokumenter skal du blot indsætte parameterens navn efter data-param-
præfiks.
Kodeeksempel:
I dette eksempel benyttede jeg Start
YouTube-parameter i data-param-start
attribut for at gøre videoen begynder på 43'erne.
Kode forhåndsvisning:
Script til at omfatte:
Andre videodelingstjenester
AMP har også komponenter relateret til andre videodelingstjenester, det arbejde på samme måde som
. Du kan bruge følgende udvidede AMP-komponenter til videoindstillinger fra andre udbydere end YouTube:
for Vimeo embeds
til Dailymotion embeds
til Brightcove embeds
8. amp-social-aktie
Bortset fra sociale medier embeds, kan du også Vis sociale deleknapper på dine AMP sider ved at bruge
komponent.
Den sociale del funktion er forudkonfigureret for nogle udbydere, men med de rigtige indstillinger kan du bruge
komponent til andre sociale deleknapper.
Forkonfigurerede deleknapper
Forkonfigurerede deleknapper kræver ikke for mange indstillinger du er nødt til at definere bredde
(standard er 60px) og højde
(standard er 44px) attributter, og navnet på den sociale medier udbyder i type
attribut.
Med Facebook skal du også angive Facebook app id i data-param-APP_ID
attribut.
Kodeeksempel:
Kode forhåndsvisning:
Forkonfigurationen gør antagelser at den webadresse, du vil dele, er den kanoniske webadresse på den aktuelle side, og den tekst, du vil medtage i din del, er sidetitlen.
Hvis du vil bruge en anden config, kan du gøre det med følgende tre valgfrie attributter:
data-text
for den tekst, du vil medtage i aktiendata-url
for den webadresse, du vil deledata-tilskrivning
for navnet på den person eller udbyder, du vil have din andel tilskrevet
Ukonfigurerede deleknapper
For at vise sociale deleknapper for ukonfigurerede udbydere, som WhatsApp, skal du Angiv brugerens brugerdefinerede protokol i data-aktie-endepunkt
attribut. Se i dokumenterne, hvordan du kan gøre dette.
Script til at omfatte: