8 Componente AMP pentru integrarea social media
Cel mai mare conflict pe care îl are standardul web Google pentru mobil, Pagini Mobile accelerată trebuie să rezolve este făcând site-urile mobile mai rapide, in timp ce menținându-le funcționale și bogate în conținut. Aceste zile conținutul bogat și interesant nu poate fi imaginat fără încorporări de pe site-urile populare de social media - tweet-uri, clipuri video, înregistrări audio, postări, fotografii.
Componente AMP extinse - printre alte caracteristici extraordinare - oferă o modalitate excelentă de integrare AMP documente cu diferite tipuri de conținut social.
Cum funcționează componentele AMP extinse
În centrul filozofiei AMP există Google cele mai bune practici de performanță. Pentru a îmbunătăți timpul de încărcare a paginilor, standardele AMP restricționează cum puteți utiliza tehnologii front-end. De exemplu, nu puteți utiliza JavaScript personalizat, foile de stil externe și orice element HTML care încarcă resurse externe, cum ar fi
În schimb, primești o grămadă de bani Componente AMP puteți utiliza pentru afișați resursele externe, cum ar fi imagini, videoclipuri, audio, reclame etc. pe site-ul dvs..
Componentele AMP sunt anumite etichete HTML care poate fi folosit în mod similar tagurilor HTML obișnuite. Câțiva dintre ei sunt construit în la timpul de execuție AMP, în timp ce majoritatea funcționează ca extensii. Componente care permit integrarea social media în paginile AMP sunt toate componentele extinse.
Componentele AMP extinse vă solicită importați scriptul de apartenență în secțiune a documentului HTML AMP. Deoarece AMP este un proiect cu sursă deschisă, numărul componentelor extinse poate crește în viitor.
În acest post am colectat o mână de componente AMP care vă pot ajuta cu integrarea social media. Rețineți că versiunile de script-uri se poate schimba în timp, verificați întotdeauna documentația înainte de a le include pe site-ul dvs..
1. amp-facebook
Trebuie mereu specificați dimensiunile postului încorporat, ceea ce înseamnă că trebuie să adăugați o lăţime și a înălţime atribut cu valori în pixeli întregi. Puteți găsi dimensiunile corespunzătoare făcând clic pe meniul "Embed" din partea de sus a postării de pe Facebook.
De asemenea, vi se cere adăugați adresa URL a postării respective în Date-href atribut. Puteți găsi adresa URL făcând clic pe marcajul de timp al postării de pe Facebook și browserul va introduce adresa URL unică în bara de adrese.
Dacă dorești încorporați un clip video fără postarea de pe Facebook, adăugați opțional -Date Încorporați ca = "video" atribut
Dacă dorești faceți încorporarea dvs. receptivă folosește schemă atribut cu „Receptiv“ valoare. De asemenea, puteți utiliza opțiunea schemă atribuiți oricărei alte componente AMP pentru a controla aspectul acestuia.
Exemplu de cod:
Previzualizarea codului:
Script pentru a include:
2. amp-twitter
Poti încorporați tweets în paginile AMP utilizând
Pentru a face acest lucru, trebuie să faceți asta specificați ID-ul tweet-ului în Date-tweetid atribut. Puteți modifica modul în care se afișează tweet-ul prin adăugarea oricăreia dintre opțiunile de afișare ale API-ului Twitter ca a date-* Atributul HTML5.
De exemplu, în exemplul de mai jos am folosit API-urile Twitter linkcolor opțiunea de afișare ca date-link-culoare (este date-* format) pentru a schimba culoarea implicită a link-ului cu culoarea utilizată de Hongkiat.com pe contul său Twitter.
Exemplu de cod:
Previzualizarea codului:
Twitter nu furnizează în prezent un API care să producă un raport fix al raportului
.
Asta înseamnă că trebuie setați manual lăţime și înălţime atribute, deoarece timpul de rulare al AMP uneori nu afișează o parte (de obicei partea de jos) a tweet-ului.
Este întotdeauna o idee bună să verificați cum arată mesajele dvs. tweets încorporate înainte de a publica pagina AMP.
Adăugați un înlocuitor
Deși nu este necesar, se recomandă documentația adăugând un substituent în cazul în care tweet-ul nu se încarcă imediat.
înlocuitor atributul poate fi folosit pe fiecare componentă AMP. Substituentul este afișate imediat dacă resursele finale nu sunt disponibile. Atunci când elementul AMP se încarcă, acesta ascunde substituentul său.
Aruncati o privire la cum arata exemplul de mai sus cu un substituent. Pe Twitter, pur și simplu am făcut clic pe butonul Embed Tweet, copiat-lipit blocquote-ul încorporabil (fără script-ul de la sfârșit) și adăugat înlocuitor atribut la etichetă.
Exemplu de cod cu substituent:
Cum să confirmați paginile mobile accelerate (#AMP) #Google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15 august 2016
Script pentru a include:
3. amp-instagram
Cu
Vi se cere specificați dimensiunile de încorporare cu lăţime și înălţime atribute și, de asemenea, trebuie să adăugați identificatorul din fotografia sau videoclipul Instagram folosind Date-SHORTCODE atribut.
Puteți găsi identificatorul la sfârșitul adresei URL, pentru exemplul pentru fotografia de mai jos adresa URL https://www.instagram.com/p/-PFt7tF8Km/, așa că trebuie să folosesc -PFt7tF8Km ca valoare pentru Date-SHORTCODE atribut.
Exemplu de cod:
Previzualizarea codului:
Pentru planuri receptive, AMP calculează automat spațiul necesar, de asemenea include “Instagram crom” (numele contului, data, numărul de plăceri etc.).
Aceasta înseamnă că puteți utiliza orice valoare pentru lăţime și înălţime, pană la două valori sunt egale (Fotografiile din Instagram sunt de obicei pătrate), deoarece durata de execuție a AMP va redimensiona imaginea în funcție de spațiul disponibil.
Dacă fotografia nu este un pătrat, trebuie să specificați reale lăţime și înălţime valorile.
Pentru dispozitive fixe, trebuie să includeți spațiul suplimentar (partea de sus și de jos: +48 px, stânga și dreapta: + 8 pixeli) necesare pentru cromul Instagram atunci când calculați dimensiunile imaginii.
Script pentru a include:
4. amp-pinterest
Încorporați un widget Pin
Pentru a încorpora un widget Pin, trebuie să specificați dimensiunile, adresa URL a pinului folosind date-url și, de asemenea, trebuie să adăugați date-do = "embedPin" atribut.
Exemplu de cod (dimensiunea implicită):
Deoarece widgetul Pin implicit este destul de mic, puteți opta și pentru o versiune mai mare folosind date lățime = „mediu“ atribut.
Exemplu de cod (dimensiune medie):
Previzualizarea codului (dimensiune medie):
Afișați un buton Pin it
Poti de asemenea adăugați un buton Pin it pe pagina dvs. AMP cu ajutorul lăţime și înălţime dimensiuni, esti trebuie să specificați patru atribute pentru a încorpora butonul Pin It:
date-do = "buttonPin"pentru a permite runtime-ului AMP să știe că acesta va fi un buton Pin Itdate-urlcu adresa URL pe care doriți să o distribuițidate-mediacu adresa URL absolută a imaginii pe care doriți să o fixați utilizatoriidate descrierecu descrierea pe care doriți să o afișați în formularul de creare a Pinului
Sunt multe dimensiuni ale butoanelor, pentru a alege de la, verificați documentele pentru toate dimensiunile disponibile.
Exemplu de cod:
În acest exemplu, am creat un buton Pin It care ar permite utilizatorilor să fixeze o imagine din acest post postat de Hongkiat.com. Am folosit mica dimensiune a butonului dreptunghiular.
Previzualizarea codului:
Rețineți că trebuie să utilizați CSS suplimentar pentru a afișa butonul Îndepărtare în partea de sus a imaginii.
De asemenea, puteți crea un buton Pinterest Follow cu ajutorul butonului date-do = "buttonFollow" și specificați numele pe care doriți să îl afișați în interiorul butonului Urmați din date eticheta și adresa URL a contului dvs. în Date-href atribut.
Exemplu de cod (butonul Urmați):
Script pentru a include:
5. amp-SoundCloud
SoundCloud este o platformă populară de distribuție audio unde utilizatorii pot să-și împărtășească muzica. Cu ajutorul
Această componentă poate utilizați numai cu fix-înălțime schemă ceea ce înseamnă că trebuie doar să specificați înălţime, iar lățimea va fi calculată în timpul runtimei AMP. Ca urmare, playerul audio SoundCloud încorporat va completați întregul spațiu orizontal disponibil.
date-vizuale atribui fie Adevărat sau fals (implicit este fals).
În ambele moduri, trebuie să utilizați Date-TrackID atribuit lui specificați identificatorul audio; puteți găsi ID-ul audio făcând clic pe butonul Distribuiți sub playerul audio de pe SoundCloud.com și căutând adresa URL cu formular lung din interiorul codului Embed.
Modul clasic
Modul clasic afișează o imagine miniatură în partea stângă și playerul audio pe partea dreaptă. Puteți obține valoarea corectă pentru înălţime atribut din codul Embed pe SoundCloud.com.
În modul Clasic, puteți specifica culoarea playerului audio dacă doriți să utilizați date de culoare atribut (nu puteți face acest lucru în modul Visual).
Exemplu de cod (modul clasic):
Previzualizarea codului (modul clasic):
Modul vizual
În Modul vizual, imaginea recomandată se întinde în spatele playerului audio. Aici, puteți găsi și cele potrivite înălţime aparținând modului Visual în codul încorporat pe SoundCloud.com.
Exemplu de cod (mod vizual):
Exemplu de cod (mod vizual):
Dacă dorești încorporați un sunet privat, utilizați opțional date secrete-jeton atribut.
Script pentru a include:
6. amp-de-vie
Vine este un site de partajare video de scurtă durată, pe care puteți să vă împărtășiți prietenilor dvs. videoclipuri de 6 secunde lungi.
Această componentă AMP este destul de simplă, trebuie doar să adăugați dimensiunile și ID-ul videoclipului Vine în Date-vineid atribut. Puteți obține codul de identificare de la adresa URL a fiecărei Viei.
Întrucât Vines sunt pătrate, dacă folosiți aspectul receptiv, aceeași regulă se aplică și în cazul embedurilor Instagram; puteți adăuga orice valoare la lăţime și înălţime atribute, până când sunt egali ei vor lucra în mod corespunzător.
Exemplu de cod:
Previzualizarea codului:
Script pentru a include:
7. amp-youtube
Poti încorporați videoclipuri YouTube pe paginile AMP cu ajutorul
Pentru a face acest lucru, trebuie să adăugați dimensiunile, plus ID-ul videoclipului în Date-VideoId atribut. Când specificați lăţime și înălţime, este important să acordați atenție raportului de aspect.
Poti de asemenea utilizați parametrii încorporărilor YouTube în documentele AMP, trebuie doar să introduceți numele parametrului după Date-param- prefix.
Exemplu de cod:
În acest exemplu, am folosit start Parametrul YouTube din Date-param start- atributul pentru ca videoclipul să înceapă la 43 de ani.
Previzualizarea codului:
Script pentru a include:
Alte servicii de partajare video
AMP are, de asemenea, componente legate de alte servicii de partajare video, care să lucreze în mod similar cu
8. amp-social-parts
În afară de embedurile sociale, puteți, de asemenea afișați butoanele sociale pentru partajare pe paginile dvs. AMP utilizând
Caracteristica socială este preconfigurat pentru unii furnizori, dar cu setările potrivite puteți folosi
Butoane de distribuire preconfigurate
Butoane de partajare preconfigurate nu necesită prea multe setări; trebuie să definiți lăţime (implicit este 60 de pixeli) și înălţime (implicit este 44 de pixeli), precum și numele furnizorului de media sociale în tip atribut.
Cu Facebook, de asemenea, trebuie să specificați ID-ul aplicației Facebook în Date-param-APP_ID atribut.
Exemplu de cod:
Previzualizarea codului:
Preconfigurarea face ipoteze că adresa URL pe care doriți să o distribuiți este URL-ul canonic al paginii curente și textul pe care doriți să-l includeți în cota dvs. este titlul paginii.
Dacă doriți să utilizați un alt config, puteți face acest lucru cu următoarele trei atribute opționale:
date textpentru textul pe care doriți să îl includeți în cotadate-urlpentru adresa URL pe care doriți să o distribuițidate de atribuirepentru numele persoanei sau furnizorului în care doriți să fie atribuită acțiunea dvs.
Butoane de distribuție neconfigurate
Pentru a afișa butoanele de partajare socială din furnizori neconfigurați, cum ar fi WhatsApp, trebuie specificați protocolul personalizat al furnizorului în Date-parts-punct final atribut. Check out în docs cum poți face asta.
Script pentru a include:
