8 Komponente AMP za integracijo družbenih medijev

Največji konflikt, ki ga ima Googlov mobilni spletni standard, Pospešene mobilne strani rešiti je hitrejše izdelovanje spletnih mest za mobilne naprave, medtem ohranjanje funkcionalnosti in bogate vsebine. Danes si bogate in zanimive vsebine težko predstavljamo brez vdelkov iz priljubljenih spletnih mest v družabnih medijih - tweets, videoposnetke, zvoke, objave, fotografije.

Razširjene komponente AMP - med drugimi odličnimi funkcijami - zagotavljajo odličen način za integracijo AMP dokumenti z različnimi tipi socialnih vsebin.

Kako delujejo razširjene komponente AMP

V središču filozofije AMP so Googlovi najboljše prakse. Za izboljšanje časa nalaganja strani standardi AMP omejujejo kako lahko uporabite tehnologije front-end. Na primer, ne morete uporabljati prilagojenega JavaScripta, zunanjih slogov slogov in kateregakoli elementa HTML, ki naloži zunanje vire, kot je oznaka.

V zameno dobiš kup Komponente AMP lahko uporabite za prikaz zunanjih virov, slike, videoposnetke, zvoke, oglase itd. na vašem spletnem mestu.

Komponente AMP so posebne oznake HTML ki se lahko uporabljajo podobno kot običajne oznake HTML. Nekaj jih je vgrajeno v času izvajanja AMP, medtem ko je večina deluje kot razširitve. Komponente, ki omogočajo integracijo družbenih medijev na straneh AMP so vse razširjene komponente.

Razširjene komponente AMP zahtevajo, da to storite uvozite pripadajoči skript v HTML dokumenta AMP. Ker je AMP projekt odprte kode, se lahko število razširjenih komponent v prihodnosti poveča.

V tem prispevku smo zbrali peščico komponent AMP, ki vam lahko pomagajo z vključevanjem socialnih medijev. Ne pozabite, da so različice skriptov sčasoma spremeni, zato vedno preverite dokumentacijo, preden jih vključite na svoje spletno mesto.

1. `amp-facebook`

omogoča vdelate Facebook post ali video na stran AMP.

Vedno moraš določite dimenzije vdelane pošte, kar pomeni, da morate dodati a premer in a višine atribut z vrednostmi v celih pikih. Ustrezne dimenzije najdete s klikom na meni "Vdelaj" na vrhu Facebook posta.

Prav tako morate dodajte URL določenega sporočila v data-href atribut. URL lahko najdete s klikom na časovno oznako objave na Facebooku in brskalnik bo v naslovno vrstico vstavil edinstveni URL.

Če želiš Vdelaj videoposnetek brez pripadajočega Facebook sporočila, dodajte izbirno data-embed-as = "video" atribut

Če želiš naredite svoj embed odzivni uporabi postavitev z atributom "odzivno" vrednost. Uporabite lahko tudi izbirno postavitev atribut na kateri koli drugi komponenti AMP za nadzor njegove postavitve.

Primer kode:

Predogled kode:

Skript za vključitev:

2. `amp-twitter`

Ti lahko Vdelaj tweets na straneh AMP z uporabo komponento.

Za to morate določite ID tweet-a v podatkovni tweetid atribut. Način prikaza tweet-a lahko spremenite tako, da dodate katero koli od možnosti prikaza v aplikaciji Twitter API kot podatki- * Atribut HTML5.

Na primer, v spodnjem primeru sem uporabil API za Twitter barva možnost prikaza kot barva podatkovne povezave (njegov. \ t podatki- * format), da spremenite privzeto barvo povezave v barvo, ki jo Hongkiat.com uporablja na svojem računu za Twitter.

Primer kode:

Predogled kode:

The komponenta še ni popolna, Githubovi dokumenti to pravijo Cvrkutati trenutno ne zagotavlja API-ja, ki bi omogočal fiksno razmerje stranic.

To pomeni, da morate ročno nastavite premer in višine lastnosti, ker čas izvajanja AMP včasih ne prikaže dela (ponavadi na dnu) tweet-a.

Vedno je dobro, da preverite, kako izgledajo vaše vgrajene tweets, preden objavite stran AMP.

Dodajte rezervirano mesto

Čeprav to ni potrebno, dokumentacija priporoča dodajanje ograde v primeru, da se tweet ne naloži naenkrat.

The ogrado atribut se lahko uporabi na vsaki komponenti AMP. Vsebina je takoj prikazana če končna sredstva niso na voljo. Ko se element AMP obremeni, ga skriva svoje ogrado.

Oglejte si, kako izgleda zgornja koda kode z ogrado. Na Twitterju sem preprosto kliknil gumb Vdelaj Tweet, kopiraj-prilepil vdelljiv blockquote (brez skripta na koncu) in dodal ogrado atribut

oznaka.

Primer kode z ogrado:
   Kako preveriti pospešene mobilne strani (#AMP) #google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  15. avgust 2016 
  
Skript za vključitev:
  
3. amp-instagram

S , ti lahko vdelajte Instagram in fotografije strani AMP.

To morate storiti določite dimenzije . \ t premer in višine atribute in morate tudi dodajte identifikator fotografije ali videoposnetkov Instagram z uporabo kratka koda podatkov atribut.

Identifikator najdete na koncu URL-ja, na primer za sliko pod URL-jem https://www.instagram.com/p/-PFt7tF8Km/, zato moram uporabiti -PFt7tF8Km kot vrednost za. \ t kratka koda podatkov atribut.

Primer kode:
   
Predogled kode:

Za odzivne postavitve, AMP samodejno izračuna potreben prostor, ki tudi vključuje “Instagram krom” (ime računa, datum, število priljubljenih itd.).

To pomeni, da lahko uporabite katero koli vrednost za premer in višine, do. \ t dve vrednosti sta enaki (Instagram fotografije so običajno kvadratne), saj bo čas izvajanja AMP spremenil velikost slike v skladu z razpoložljivim prostorom.

Če fotografija ni kvadrat, morate določiti njeno dejansko premer in višine vrednosti.

Za fiksne postavitve, moraš vključuje dodaten prostor (zgoraj in spodaj: +48 px, levo in desno: 8 px), potreben za Instagram krom, ko izračunate dimenzije slike.

Skript za vključitev:
  
4. amp-pinterest

vam omogoča vdelajte bodisi pripomoček Pin ali gumb Pin It v dokument HTML AMP.

Vdelaj pripomoček Pin

Če želite vdelati pripomoček Pin, morate določiti dimenzije, URL za pin z uporabo url podatkov in morate dodati tudi data-do = "embedPin" atribut.

Primer kode (privzeta velikost):
   
Ker je privzeti pripomoček Pin dokaj majhen, lahko uporabite tudi večjo različico s pomočjo data-width = "medium" atribut.

Primer kode (srednje velikosti):
   
Predogled kode (srednje velikosti):

Prikažite gumb Pin It

Lahko tudi dodajte gumb Pin It na vašo stran AMP s pomočjo komponento. Razen. \ T premer in višine dimenzije ste določiti štiri atribute Če želite vdelati gumb Pin It:

data-do = "buttonPin" da naj izvajalno okolje AMP ve, da bo to gumb Pin It

url podatkov z želenim URL-jem

podatkovnih medijev z absolutnim URL-jem slike, ki jo želite uporabnikom pripeti

opis podatkov z opisom, ki ga želite prikazati v obrazcu za ustvarjanje priponke

Obstajajo veliko različnih velikosti gumbov, na izbiro preverite dokumente za vse razpoložljive velikosti.

Primer kode:

V tem primeru sem ustvaril gumb Pin It, ki bi uporabnikom omogočil, da pripnejo sliko iz tega nekdanjega sporočila Hongkiat.com. Uporabil sem majhno velikost pravokotnega gumba.
      
 
Predogled kode:

Upoštevajte, da morate za prikaz gumba Pin It na vrhu slike uporabiti dodatne CSS.

Z uporabo gumba data-do = "buttonFollow" in določite ime, ki ga želite prikazati znotraj gumba Sledi v podatkovne oznake & URL vašega računa v data-href atribut.

Primer kode (gumb Sledi):
   
Skript za vključitev:
  
5. amp-soundcloud

SoundCloud je priljubljena avdio distribucijska platforma, kjer lahko uporabniki delijo svojo glasbo. S pomočjo. \ T komponento lahko predvajajte skladbe SoundCloud desno s strani AMP HTML.

Ta komponenta lahko uporabljajte samo s fiksna višina postavitev kar pomeni, da morate samo določiti višine, in širina se izračuna z izvajalnim časom AMP. Kot rezultat bo vgrajeni avdio predvajalnik SoundCloud zapolnite ves razpoložljivi horizontalni prostor.

The komponento lahko prikažete v klasični ali vizualni način. Izbirate lahko med dvema načinoma tako, da nastavite vrednost podatkovno-vizualno pripisujejo bodisi prav ali false (privzeto je false).

V obeh načinih morate uporabiti data-trackid atribut določite identifikator zvoka; zvočni ID lahko najdete tako, da kliknete gumb Skupna raba pod predvajalnikom zvoka na spletnem mestu SoundCloud.com in poiščete URL dolge oblike znotraj kode za vdelavo.

Klasični način

The Klasični način na levi prikaže majhno sličico, na desni pa predvajalnik zvoka. Lahko dobite ustrezno vrednost za višine atribut iz Vdelane kode na SoundCloud.com.

V klasičnem načinu lahko določite barvo avdio predvajalnika, če želite uporabiti barva podatkov atribut (v vizualnem načinu tega ne morete storiti).

Primer kode (klasičen način):
   
Predogled kode (klasičen način):

Vizualni način

V Vizualni način, prikazana slika se razteza za avdio predvajalnikom. Tu lahko najdete tudi ustrezno višine pripadajo vizualnemu načinu v vdelani kodi na SoundCloud.com.

Primer kode (vizualni način):
   
Primer kode (vizualni način):

Če želiš vdelate zasebni zvok, uporabite izbirno skrivnost podatkov-žeton atribut.

Skript za vključitev:
  
6. amp-trs

Vine je spletna stran za izmenjavo kratkih videoposnetkov, na kateri lahko s prijatelji izmenjujete 6-sekundne videoposnetke. The sestavni del omogoča enostavno Vdelaj videoposnetke Vine v vaše strani AMP HTML.

Ta komponenta AMP je precej preprosta, morate dodati samo dimenzije in ID videa v Vine data-vineid atribut. ID lahko dobite iz URL-ja vsake trte.

Ker so trte kvadratki, če uporabljate odzivno postavitev, velja isto pravilo kot za Instagram vdelave; lahko dodate poljubno vrednost premer in višine lastnosti, dokler niso enaki pravilno bodo delali.

Primer kode:
   
Predogled kode:

Skript za vključitev:
  
7. amp-youtube

Ti lahko vdelajte videoposnetke v YouTubu na straneh AMP s pomočjo komponento.

Če želite to narediti, morate dodati dimenzije in ID videoposnetka v podatkovni video atribut. Pri določanju premer in višine, pomembno je bodite pozorni na razmerje stranic.

Lahko tudi uporabite parametre vdelov YouTube v dokumentih AMP vstavite ime parametra Po data-param- predpona.

Primer kode:

V tem primeru sem uporabil začetek YouTube parameter v data-param-start atribut, da bi video začel pri 43-ih.
   
Predogled kode:

Skript za vključitev:
  
Druge storitve za skupno rabo videa

AMP ima tudi komponente, povezane z drugimi storitvami za souporabo videa podobno kot . Uporabite lahko naslednje razširjene komponente AMP za vdelavo videoposnetkov od ponudnikov, ki niso YouTube:

za Vimeo embeds

za Dailymotion

za Brightcove

8. amp-social-share

Poleg socialnih medijev lahko tudi prikazovanje gumbov za skupno rabo na straneh AMP z uporabo komponento.

Funkcija socialnega deleža je za nekatere ponudnike, vendar s pravimi nastavitvami lahko uporabite komponento za vse druge gumbe socialnega deleža.

Gumbi za prednastavljeno skupno rabo

Prednastavljeni gumbi za skupno rabo ne zahtevajo preveč nastavitev; morate definirati premer (privzeto je 60px) in višine (privzeto je 44px) atributov in ime ponudnika družabnih medijev v vrsto atribut.

S storitvijo Facebook morate vnesti tudi ID za aplikacijo Facebook data-param-app_id atribut.

Primer kode:
                    
 
Predogled kode:

Prednastavitev ustvarja predpostavke URL, ki ga želite dati v skupno rabo, je kanonski URL trenutne strani, besedilo, ki ga želite vključiti v svoj delež, pa je naslov strani.

Če želite uporabiti drugo konfiguracijo, lahko to storite z naslednjim trije neobvezni atributi:

besedilo podatkov za besedilo, ki ga želite vključiti v delnico

url podatkov za URL, ki ga želite dati v skupno rabo

pripisovanje podatkov za ime osebe ali ponudnika, ki mu želite pripisati svoj delež

Gumbi za skupno rabo niso konfigurirani

Za prikaz gumbov za skupno rabo v storitvi neprilagojene ponudnike, kot je WhatsApp, kar morate storiti določite protokol po meri ponudnika v data-share-endpoint atribut. Oglejte si, kako lahko to storite v dokumentih.

Skript za vključitev:
  