8 AMP komponente za integraciju društvenih medija
Najveći sukob Googleovog mobilnog web standarda, Ubrzane mobilne stranice treba riješiti je brže stvaranje mobilnih web-lokacija, dok držeći ih funkcionalnim i bogatim sadržajem. Ovih dana bogati i zanimljivi sadržaji teško se mogu zamisliti bez ugrađivanja s popularnih društvenih medija - tweetova, videozapisa, audiozapisa, postova, fotografija.
Proširene AMP komponente - među ostalim značajkama - pružaju sjajan način integracije AMP dokumenata s različitim vrstama društvenog sadržaja.
Kako funkcioniraju proširene AMP komponente
U središtu AMP-ove filozofije su Googleovi najbolje prakse. Da biste poboljšali vrijeme učitavanja stranice, AMP standardi ograničavaju kako možete koristiti front-end tehnologije. Na primjer, ne možete koristiti prilagođeni JavaScript, vanjske tablice stilova i bilo koji HTML element koji učitava vanjske resurse, kao što je
U zamjenu, dobivate hrpu AMP komponente možete koristiti prikaz vanjskih resursa, kao što su slike, videozapisi, audiozapisi, oglasi itd. na vašoj web-lokaciji.
AMP komponente su određene HTML oznake koji se mogu koristiti slično običnim HTML oznakama. Nekoliko njih je ugrađena na AMP runtime, dok je većina radi kao proširenja. Komponente koje omogućavaju integraciju društvenih medija na AMP stranicama sve su proširene komponente.
Proširene AMP komponente zahtijevaju uvozite pripadajući skript u u vašem AMP HTML dokumentu. Budući da je AMP projekt otvorenog koda, broj proširenih komponenti može rasti u budućnosti.
U ovom postu prikupili smo pregršt AMP komponenti koje vam mogu pomoći s integracijom društvenih medija. Imajte na umu da su verzije skripti s vremenom se može promijeniti, stoga uvijek provjerite dokumentaciju prije nego što ih uključite na svoju web-lokaciju.
1. amp-facebook
Uvijek trebaš odredite dimenzije ugrađenog posta, što znači da morate dodati širina i a visina atribut s vrijednostima u cjelobrojnim pikselima. Odgovarajuće dimenzije možete pronaći klikom na "Embed" izbornik na vrhu Facebook posta.
Također morate dodajte URL danog posta u Podaci-Href atribut. URL možete pronaći klikom na vremensku oznaku Facebook posta, a preglednik će umetnuti jedinstveni URL u adresnu traku.
Ako želiš ugraditi videozapis bez pripadajućeg Facebook posta, dodajte opcionalno podataka ugradili-kao = "video" atribut
Ako želiš učinite svoj embed odgovarajući koristiti raspored atribut s oznakom "uzvratni" vrijednost. Možete koristiti i opciju raspored atribut na bilo kojoj drugoj komponenti AMP-a za kontrolu njegovog izgleda.
Primjer koda:
Pregled koda:
Skripta za uključivanje:
2. amp-uzrujanost
Možeš ugraditi tweets na AMP stranice pomoću
Da biste to učinili, morate odredite ID tweet-a u Podaci-tweetid atribut. Možete izmijeniti način prikaza tweet-a dodavanjem bilo koje opcije prikaza aplikacije Twitter API kao podaci-* HTML5 atribut.
Na primjer, u donjem primjeru koristio sam Twitter API-je linkColor opcija prikaza kao podaci-link-boja (ITS podaci-* za promjenu zadane boje veze na boju koju Hongkiat.com koristi na svom Twitter računu.
Primjer koda:
Pregled koda:
Twitter trenutačno ne nudi API koji daje fiksni omjer omotnice
.
To znači da trebate ručno podesite širina i visina atributi, budući da AMP runtime ponekad ne prikazuje dio (obično dno) tweet-a.
Uvijek je dobro provjeriti kako izgledaju ugrađeni tweets prije objavljivanja AMP stranice.
Dodajte rezervirano mjesto
Iako to nije potrebno, preporučuje se dokumentacija dodavanje rezerviranog mjesta u slučaju da se tweet ne učita odjednom.
rezerviranog mjesta atribut može se koristiti na svakoj AMP komponenti. Rezervirano mjesto je odmah ako konačni resursi nisu dostupni. Kada se učita AMP element, on skriva svoje rezervirano mjesto.
Pogledajte kako izgleda gornji primjer koda s rezerviranim mjestom. Na Twitteru sam jednostavno kliknuo gumb Ugradi cvrkut, kopirao i zalijepio ugradivi blockquote (bez skripte na kraju) i dodao rezerviranog mjesta atribut označiti.
Primjer koda s rezerviranim mjestom:
Kako provjeriti ubrzane mobilne stranice (#AMP) #google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15. kolovoza 2016
Skripta za uključivanje:
3. amp-Instagrama
S
Od vas se traži da to učinite odredite dimenzije od ugraditi s širina i visina atribute, a vi također morate dodajte identifikator Instagram fotografije ili videozapisa pomoću značajke Podaci-kratki kôd atribut.
Identifikator možete pronaći na kraju URL-a, primjerice za fotografiju ispod URL-a https://www.instagram.com/p/-PFt7tF8Km/, pa moram koristiti -PFt7tF8Km kao vrijednost za Podaci-kratki kôd atribut.
Primjer koda:
Pregled koda:
Za odgovarajući izgled, AMP automatski izračunava potreban prostor koji također uključuje “Instagram krom” (naziv računa, datum, broj omiljenih itd.).
To znači da možete koristiti bilo koju vrijednost za širina i visina, do dvije su vrijednosti jednake (Instagram fotografije su obično kvadratne), budući da će AMP runtime promijeniti veličinu slike u skladu s raspoloživim prostorom.
Ako fotografija nije kvadrat, morate navesti njezinu stvarnu širina i visina vrijednosti.
Za fiksni izgled, trebaš uključuju dodatni prostor (vrh i dno: +48 px, lijevo i desno: + 8px) potrebno za Instagram krom kada izračunate dimenzije slike.
Skripta za uključivanje:
4. amp-Pinterest
Ugradite Pin Widget
Da biste ugradili widget Pin, morate navesti dimenzije, URL pinova pomoću alata podataka URL atribut, a također morate dodati i podaci-do = "embedPin" atribut.
Primjer koda (zadana veličina):
Budući da je zadani Pin widget mali, možete se odlučiti i za veću verziju pomoću alata podaci širine = „srednja” atribut.
Primjer koda (srednje veličine):
Pregled koda (srednje veličine):
Prikažite gumb Pin It
Također možete dodajte gumb Pin It na vašu AMP stranicu uz pomoć širina i visina dimenzije, ti si potrebno odrediti četiri atributa da biste ugradili gumb Pin It:
podaci-do = "buttonPin"kako bi AMP runtime znao da će to biti Pin It gumbpodataka URLs URL-om koji želite podijelitiData-medijis apsolutnim URL-om slike koju želite postaviti korisnicimapodataka opiss opisom koji se želi pojaviti u obrascu za izradu PIN-a
Tamo su mnogo različitih veličina gumba, za odabir, provjerite dokumente za sve dostupne veličine.
Primjer koda:
U ovom primjeru stvorio sam gumb Pin It koji će korisnicima omogućiti da zakače sliku s tog bivšeg posta Hongkiat.com. Koristio sam malu pravokutnu veličinu gumba.
Pregled koda:
Imajte na umu da morate koristiti dodatni CSS da biste prikazali gumb Pin It na vrhu slike.
Također možete stvoriti Pinterest slijediti gumb pomoću podaci-do = "buttonFollow" atribut, te navođenje imena koje želite prikazati unutar gumba Slijedi u Podaci oznaka & URL vašeg računa u Podaci-Href atribut.
Primjer koda (gumb Slijedi):
Skripta za uključivanje:
5. amp-SoundCloud
SoundCloud je popularna platforma za distribuciju zvuka na kojoj korisnici mogu dijeliti svoju glazbu. Uz pomoć
Ova komponenta može koristiti samo s fiksno-visina raspored što znači da samo trebate odrediti visina, i širina će biti izračunata od strane AMP runtime. Zbog toga će ugrađeni SoundCloud audio player popunite sav raspoloživi horizontalni prostor.
Podaci-vizualni atribut pravi ili lažan (zadano je lažan).
U oba načina morate koristiti Podaci-TrackID atribut odredite identifikator zvuka; audio ID možete pronaći tako da kliknete gumb Dijeli ispod audio playera na SoundCloud.com i potražite URL dugačkog oblika unutar ugrađenog koda.
Klasični način
Klasični način prikazuje malu sličicu s lijeve strane, a audio player na desnoj strani. Možete dobiti odgovarajuću vrijednost za visina atribut iz ugrađenog koda na SoundCloud.com.
U klasičnom načinu možete odrediti boju audio playera ako želite koristiti Podaci boja atribut (ne možete to učiniti u vizualnom načinu).
Primjer koda (klasični način):
Pregled koda (klasični način):
Vizualni način
U Vizualni način, istaknuta slika se proteže iza audio playera. Ovdje također možete pronaći odgovarajuće visina koji pripadaju Visual modu u Embed kodu na SoundCloud.com.
Primjer koda (vizualni način):
Primjer koda (vizualni način):
Ako želiš ugraditi privatni zvuk, koristite opcionalno podaci tajni-token atribut.
Skripta za uključivanje:
6. amp-vino
Vine je web-lokacija za dijeljenje videozapisa u kratkom obliku na kojoj možete dijeliti 6-sekundne videozapise s prijateljima.
Ova komponenta AMP-a je vrlo jednostavna, samo trebate dodati dimenzije i ID videa u Vine Podaci-vineid atribut. ID možete dobiti iz URL-a svake Vine.
Kako su Vinesovi kvadrati, ako koristite odgovarajući raspored, isto pravilo vrijedi kao i za Instagram embeds; možete dodati bilo koju vrijednost širina i visina atributi, dok se ne izjednače oni će ispravno raditi.
Primjer koda:
Pregled koda:
Skripta za uključivanje:
7. amp-youtube
Možeš ugraditi videozapise usluge YouTube na AMP stranicama uz pomoć
Da biste to učinili, morate dodati dimenzije, plus ID videozapisa u Podaci-VIDEOID atribut. Prilikom određivanja širina i visina, Važno je obratite pozornost na omjer širine i visine.
Također možete upotrijebite parametre ugrađivanja usluge YouTube u AMP dokumentima, samo umetnite naziv parametra nakon što podataka param- prefiks.
Primjer koda:
U ovom primjeru koristio sam početak Parametar usluge YouTube u podaci-param-start atribut kako bi video započeo u 43s.
Pregled koda:
Skripta za uključivanje:
Ostale usluge dijeljenja videozapisa
AMP također ima komponente povezane s drugim uslugama za dijeljenje videozapisa raditi slično
8. pojačalo-socijalno-udio
Osim društvenih medija, također možete prikazati društvene gumbe za dijeljenje na AMP stranicama pomoću
Značajka društvenog dijeljenja je unaprijed konfigurirane za neke davatelje usluga, ali s pravim postavkama možete koristiti
Gumbi za unaprijed konfigurirano dijeljenje
Prethodno konfigurirani gumbi za dijeljenje ne zahtijevaju previše postavki; morate definirati širina (zadano je 60px) i visina (zadano je 44px) atribute i naziv pružatelja društvenih medija u tip atribut.
S uslugom Facebook morate također navesti ID aplikacije za Facebook podaci-param-APP_ID atribut.
Primjer koda:
Pregled koda:
Prethodna konfiguracija čini pretpostavke da je URL koji želite dijeliti kanonski URL trenutne stranice, a tekst koji želite uključiti u svoj udio je naslov stranice.
Ako želite koristiti drugu konfiguraciju, možete to učiniti sa sljedećim tri izborna atributa:
Podaci tekstza tekst koji želite uključiti u dijeljenjepodataka URLza URL koji želite dijelitiPodaci-pripisivanjeza ime osobe ili davatelja usluga na koji želite da se pripiše vaš udio
Nekonfigurirani gumbi za dijeljenje
Za prikaz društvenih gumba za dijeljenje za ne konfigurirani davatelji, kao što je WhatsApp, morate odredite prilagođeni protokol davatelja u podataka dionica krajnja atribut. Provjerite u dokumentima kako to možete učiniti.
Skripta za uključivanje:
