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-knap

data-url med den webadresse, du vil dele

data-medier med den absolutte webadresse for det billede, du vil have brugerne til at stifte

data-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 aktien

data-url for den webadresse, du vil dele

data-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:
  