8 AMP komponentai socialinės žiniasklaidos integracijai

Didžiausias „Google“ mobiliojo interneto standarto konfliktas, Pagreitinti mobilieji puslapiai reikia išspręsti greičiau kurti mobilias svetaines, kol išlaikyti jų funkcionalumą ir turinį. Šiomis dienomis turtingas ir patrauklus turinys vargu ar gali būti įsivaizduojamas be populiarių socialinių medijų svetainių - „tweets“, vaizdo įrašų, garso, pranešimų, nuotraukų.

Išplėstinė AMP komponentai - be kitų puikių funkcijų - tai puikus būdas integruotis AMP dokumentus, turinčius skirtingų socialinių turinio tipų.

Kaip veikia AMP komponentai

AMP filosofijos esme yra „Google“ geriausios veiklos praktikos. Norėdami pagerinti puslapio įkėlimo laiką, AMP standartai riboja kaip galite naudoti „front-end“ technologijas. Pavyzdžiui, negalite naudoti pasirinktinio „JavaScript“, išorinių stilių lapų ir bet kokio HTML elemento, įkeliančio išorinius išteklius, pvz., žyma.

Mainais, jūs gaunate krūva AMP komponentai galite naudoti rodyti išorinius išteklius, pvz., vaizdus, vaizdo įrašus, garso įrašus, skelbimus ir pan.

AMP komponentai yra konkrečių HTML žymių kuri gali būti naudojama panašiai kaip įprasti HTML žymenys. Keletas iš jų yra pastatytas AMP vykdymo laiką, o dauguma veikia kaip plėtiniai. Komponentai, kurie įgalina socialinės žiniasklaidos integraciją AMP puslapiuose visi išplėstiniai komponentai.

Išplėstinis AMP komponentai reikalauja importuoti priklausantį scenarijų viduje konors AMP HTML dokumento skyrių. Kadangi AMP yra atviro kodo projektas, ateityje išplėstų komponentų skaičius gali augti.

Šiame įraše surinko keletą AMP komponentų, kurie gali jums padėti su socialinės žiniasklaidos integracija. Atminkite, kad scenarijų versijos laikui bėgant gali pasikeisti, todėl visada patikrinkite dokumentaciją prieš įtraukdami juos į savo svetainę.

1. `„Facebook“`

leidžia įdėti „Facebook“ įrašą arba vaizdo įrašą į AMP puslapį.

Jums visada reikia nurodykite įterptųjų pranešimų matmenis, tai reiškia, kad reikia pridėti a plotis ir a aukštis atributas su reikšmėmis sveikojo skaičiaus pikseliais. Tinkamus matmenis galite rasti paspaudę „Įterpti“ meniu „Facebook“ įrašo viršuje.

Jūs taip pat privalote pridėti nurodyto įrašo URL viduje konors data-href atributas. URL galite rasti paspaudę „Facebook“ įrašo laiko žymą ir naršyklė į adreso juostą įterpia unikalų URL.

Jeigu nori įdėkite vaizdo įrašą be „Facebook“ įrašo, pridėkite neprivalomą data-embed-as = "video" atributas

Jeigu nori Padidinkite savo įterpimą naudoti išdėstymas atributas su „reaguoja“ vertė. Taip pat galite naudoti pasirinktinį išdėstymas bet kokio kito AMP komponento atributas, skirtas valdyti jo išdėstymą.

Kodo pavyzdys:

Kodo peržiūra:

Scenarijus turi apimti:

2. `amp-Twitter`

Tu gali įterpti tweets į AMP puslapius naudodami komponentas.

Norėdami tai padaryti, jums reikia nurodykite „tweet“ ID viduje konors duomenų tweetid atributas. Galite keisti, kaip rodoma „tweet“, pridėdami bet kokias „Twitter“ APi parinktis kaip a duomenų * HTML5 atributas.

Pavyzdžiui, toliau pateiktame pavyzdyje naudoju „Twitter“ API linkColor rodyti parinktį kaip duomenų nuorodos spalva (jos duomenų * formatas), kad pakeistumėte numatytąjį nuorodos spalvą į „Hongkiat.com“ spalvą, naudojamą jos „Twitter“ paskyroje.

Kodo pavyzdys:

Kodo peržiūra:

The komponentas dar nėra tobulas, sako Githubas „Twitter“ šiuo metu nesuteikia API, leidžiančio nustatyti fiksuoto vaizdo santykio Tweet įterpimą.

Tai reiškia, kad jums reikia rankiniu būdu nustatyti plotis ir aukštis atributai, AMP vykdymo laikas kartais nerodo dalies (paprastai apačios) „tweet“.

Visada yra gera idėja patikrinti, kaip atrodo, kaip įterpti tweets, prieš paskelbdami AMP puslapį.

Pridėti vietos žymeklį

Nors tai nereikalinga, dokumentacija rekomenduojama pridedant vietos žymeklį tuo atveju, jei „tweet“ nekraunama iš karto.

The vietos žymeklis atributas gali būti naudojamas kiekvienam AMP komponentui. Vietovė yra rodomas nedelsiant jei galutiniai ištekliai nėra. Kai AMP elementas įkeliamas, tai slepia savo vietos žymeklį.

Pažvelkite, kaip atrodo aukščiau pateiktas pavyzdys su vietos žymekliu. „Twitter“ paprasčiausiai spustelėjau mygtuką „Įterpti Tweet“, nukopijuokite įklijuotą bloknotą (be scenarijaus gale) ir pridėjote vietos žymeklis atributas

žyma.

Kodo pavyzdys su vietos žymekliu:
   Kaip patvirtinti pagreitintus mobiliuosius puslapius (#AMP) #google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  2016 m. Rugpjūčio 15 d 
  
Scenarijus turi apimti:
  
3. amp-instagram

Su , tu gali įterpti Instagram nuotraukas ir vaizdo įrašus į savo AMP puslapius.

Jūs privalote nurodykite matmenis įdėta su plotis ir aukštis atributai, ir jūs taip pat turite pridėti identifikatorių „Instagram“ nuotraukos ar vaizdo įrašo naudojimas duomenų trumpasis kodas atributas.

Identifikatorių galite rasti URL pabaigoje, kad būtų pateiktas pavyzdys, esantis po URL https://www.instagram.com/p/-PFt7tF8Km/, todėl turiu naudoti -PFt7tF8Km kaip duomenų trumpasis kodas atributas.

Kodo pavyzdys:
   
Kodo peržiūra:

Reaguojantis išdėstymas, AMP automatiškai apskaičiuoja reikiamą erdvę, kuri taip pat apima “Instagram chromas” (paskyros pavadinimas, data, mėgstamiausiųjų skaičius ir kt.).

Tai reiškia, kad galite naudoti bet kokią vertę plotis ir aukštis, iki dvi vertės yra lygios (Instagram nuotraukos paprastai yra kvadratinės), nes AMP vykdymo laikas pakeis vaizdo dydį pagal turimą erdvę.

Jei nuotrauka nėra kvadratas, turite nurodyti tikrąją nuotrauką plotis ir aukštis vertės.

Dėl fiksuoti maketai, tau reikia įtraukti papildomą erdvę (viršutinė ir apačia: +48 px, kairė ir dešinė: + 8px), reikalingi Instagram chromui, kai apskaičiuojate vaizdo matmenis.

Scenarijus turi apimti:
  
4. amp-pinterest

leidžia jums įdėkite „Pin“ valdiklį arba „Pin It“ mygtuką į AMP HTML dokumentą.

Įdėkite PIN valdiklį

Norėdami įdėti „Pin“ valdiklį, turite nurodyti matmenis, kaiščio URL, naudodami data-url atributas, ir jūs taip pat turite pridėti data-do = "embedPin" atributas.

Kodo pavyzdys (numatytasis dydis):
   
Kadangi numatytasis Pin valdiklis yra gana mažas, galite pasirinkti didesnę versiją naudodami data-width = "medium" atributas.

Kodo pavyzdys (vidutinio dydžio):
   
Kodo peržiūra (vidutinio dydžio):

Rodyti „Pin It“ mygtuką

Tu taip pat gali pridėkite „Pin It“ mygtuką į savo AMP puslapį komponentas. Be plotis ir aukštis matmenys, jūs reikalaujama nurodyti keturis atributus norint įdėti mygtuką Pin It:

data-do = "buttonPin" leisti AMP vykdymo laikotarpiui žinoti, kad tai bus „Pin It“ mygtukas

data-url su norimu bendrinti URL

duomenų laikmenos su absoliučiu URL, kurį norite pridėti naudotojui, URL

duomenų aprašymas su aprašymu, kurį norite matyti PIN formoje

Yra daug skirtingų mygtukų dydžių, pasirinkti iš visų dydžių, patikrinkite dokumentus.

Kodo pavyzdys:

Šiame pavyzdyje sukūriau „Pin It“ mygtuką, kuris leistų naudotojams prisegti vaizdą iš šio buvusio „Hongkiat.com“ įrašo. Naudojau mažą stačiakampio formos mygtuko dydį.
      
 
Kodo peržiūra:

Atkreipkite dėmesį, kad norėdami rodyti „Pin It“ mygtuką ant viršaus, reikia naudoti papildomą CSS.

Taip pat galite sukurti Pinterest sekimo mygtuką naudodami data-do = "buttonFollow" atributas ir nurodomas vardas, kurį norite rodyti viduje „Follow“ (stebėti) mygtuką duomenų ženklas ir paskyros paskyra data-href atributas.

Kodo pavyzdys (stebėjimo mygtukas):
   
Scenarijus turi apimti:
  
5. amp-soundcloud

„SoundCloud“ yra populiari garso platinimo platforma, kurioje vartotojai gali dalintis savo muzika. Su. \ T komponentas groja „SoundCloud“ takelius tiesiai iš savo AMP HTML puslapio.

Šis komponentas gali naudoti tik su fiksuotas aukštis išdėstymas tai reiškia, kad reikia nurodyti tik aukštis, ir plotis bus apskaičiuojamas pagal AMP vykdymo laiką. Kaip rezultatas, įterptųjų SoundCloud garso grotuvas bus užpildykite visą turimą horizontalią erdvę.

The komponentas gali būti rodomas klasikinis arba vizualinis režimas. Galite pasirinkti iš dviejų režimų, nustatydami reikšmę duomenų vizualinis atributas tiesa arba klaidinga (numatytasis yra klaidinga).

Abiem režimais turite naudoti duomenų stebėjimo sistema priskirti nurodykite identifikatorių garso; garso ID galite rasti paspaudę mygtuką „Share“, esantį po garso grotuvu „SoundCloud.com“, ir ieškodami ilgo formos URL įterpimo kodo viduje.

Klasikinis režimas

The Klasikinis režimas kairėje pusėje rodomas mažas miniatiūros vaizdas, o dešinėje - garso grotuvas. Galite gauti tinkamą vertę aukštis atributas iš „Embed“ kodo „SoundCloud.com“.

Klasikiniu režimu galite nustatyti garso grotuvo spalvą, jei norite naudoti duomenų spalva atributas (tai negalite padaryti vaizdiniu režimu).

Kodo pavyzdys (klasikinis režimas):
   
Kodo peržiūra (klasikinis režimas):

Vaizdinis režimas

Į Vaizdinis režimas, vaizduojamas vaizdas yra už garso grotuvo. Čia taip pat galite rasti tinkamą aukštis „SoundCloud.com“ įterpimo kode priklauso „Visual Mode“.

Kodo pavyzdys (vaizdo režimas):
   
Kodo pavyzdys (vaizdo režimas):

Jeigu nori įdėti privatų garsą, naudoti neprivalomą duomenų slaptas ženklas atributas.

Scenarijus turi apimti:
  
6. amp-vynuogių

„Vine“ yra trumpos formos vaizdo įrašų bendrinimo svetainė, kurioje galite pasidalinti 6 sekundžių trukmės vaizdo įrašais su draugais. The komponentas leidžia lengvai įterpti „Vine“ vaizdo įrašus į savo AMP HTML puslapius.

Šis AMP komponentas yra gana paprastas, jums reikia tik pridėti vino vaizdo matmenis ir ID duomenų vynuogynas atributas. ID galite gauti iš kiekvieno vynmedžio URL.

Kadangi vynai yra kvadratai, jei naudojate atsakingą išdėstymą, ta pati taisyklė taikoma kaip ir Instagram embeds; galite pridėti bet kokią vertę plotis ir aukštis atributai, kol jie lygūs jie tinkamai dirba.

Kodo pavyzdys:
   
Kodo peržiūra:

Scenarijus turi apimti:
  
7. amp-youtube

Tu gali įdėti „YouTube“ vaizdo įrašus AMP puslapiuose komponentas.

Norėdami tai padaryti, turite pridėti matmenis ir vaizdo įrašo ID duomenų vaizdo atributas. Nurodant plotis ir aukštis, tai svarbu atkreipkite dėmesį į kraštinių santykį.

Tu taip pat gali naudokite „YouTube“ įterptųjų parametrus AMP dokumentuose tiesiog įveskite parametro pavadinimą po to, kai data-param- priešdėlis.

Kodo pavyzdys:

Šiame pavyzdyje naudoju pradėti „YouTube“ parametras data-param-start atributas, kad vaizdo įrašai prasidėtų nuo 43s.
   
Kodo peržiūra:

Scenarijus turi apimti:
  
Kitos vaizdo įrašų bendrinimo paslaugos

AMP taip pat turi komponentų, susijusių su kitomis vaizdo įrašų bendrinimo paslaugomis dirbti panašiai . Galite naudoti šiuos išplėstinius AMP komponentus vaizdo įrašų įterpimui iš kitų paslaugų teikėjų, išskyrus „YouTube“:

už Vimeo įterpti

Dailymotion įterpia

„Brightcove“ įterpti

8. socialinė dalis

Be socialinės žiniasklaidos įterpimo, taip pat galite rodyti socialinio bendrinimo mygtukus AMP puslapiuose naudodami komponentas.

Socialinės dalies funkcija tam tikriems paslaugų teikėjams, bet su tinkamais nustatymais galite naudoti bet kurio kito socialinio akcijų mygtuko komponentas.

Išankstinio konfigūravimo mygtukai

Iš anksto sukonfigūruoti bendrinimo mygtukai nereikalauja per daug nustatymų; turite apibrėžti plotis (numatytasis yra 60px) ir aukštis (numatytasis yra 44px) atributai ir socialinės žiniasklaidos teikėjo pavadinimas tipas atributas.

Naudodami „Facebook“, taip pat privalote nurodyti „Facebook“ programos ID data-param-app_id atributas.

Kodo pavyzdys:
                    
 
Kodo peržiūra:

Išankstinė konfigūracija daro prielaidas URL, kurį norite bendrinti, yra kanoninis dabartinio puslapio URL, o tekstas, kurį norite įtraukti į savo akciją, yra puslapio pavadinimas.

Jei norite naudoti kitą konfigūraciją, galite tai padaryti naudodami toliau nurodytus veiksmus trys neprivalomi požymiai:

duomenų tekstas teksto, kurį norite įtraukti į akciją

data-url URL, kurį norite bendrinti

duomenų priskyrimas asmens ar teikėjo, kuriam norite priskirti jūsų akciją, pavadinimą

Nenustatyti pasidalijimo mygtukai

Jei norite rodyti socialinio akcijų mygtukus nekonfigūruoti teikėjai, pvz., WhatsApp, jums reikia nurodykite pasirinktinį paslaugų teikėjo protokolą viduje konors duomenų pasidalijimo rezultatas atributas. Patikrinkite, kaip galite tai padaryti.

Scenarijus turi apimti:
  