Kotisivu » mobile » 8 AMP-komponentit sosiaalisen median integrointiin
8 AMP-komponentit sosiaalisen median integrointiin
Suurin ristiriita, joka Googlen mobiilisovellusstandardissa on, Nopeutetut mobiilisivut on ratkaistava tehdä mobiilisivustoja nopeammin, sillä aikaa pitää ne toiminnallisina ja runsaasti sisältöä. Nykyään rikkaita ja kiinnostavia sisältöjä tuskin voi kuvitella ilman upotuksia suosituista sosiaalisen median sivustoista - tweeteistä, videoista, äänistä, viesteistä, valokuvista.
Laajennettu AMP-komponentit - muiden hienojen ominaisuuksien joukossa - tarjoaa erinomaisen tavan integroida AMP asiakirjat, joilla on erilaiset sosiaalisen sisällön tyypit.
Kuinka laajennettu AMP-komponentit toimivat
AMP: n filosofian ytimessä on Google parhaita toimintatapoja. Paranna sivun latausaikoja AMP-standardit rajoittavat miten voit käyttää front-end-tekniikoita. Et voi esimerkiksi käyttää mukautettuja JavaScript-ohjelmia, ulkoisia tyylitaulukoita ja kaikkia HTML-elementtejä, jotka lataavat ulkoisia resursseja, kuten tag.
Vastineeksi saat joukon AMP-komponentit voit käyttää näyttää ulkoisia resursseja, kuten kuvat, videot, äänet, mainokset jne. sivustossasi.
AMP-komponentit ovat tiettyjä HTML-tunnisteita jota voidaan käyttää samalla tavoin kuin tavallisia HTML-tunnisteita. Muutama niistä on sisäänrakennettu AMP: n ajoaikaan, kun taas enemmistö toimii laajennuksina. Komponentit, jotka mahdollistavat sosiaalisen median integroinnin AMP-sivuilla ovat kaikki laajennettuja komponentteja.
Laajennettu AMP-komponentti vaatii sinua Tuo kyseinen komentosarja vuonna AMP-HTML-asiakirjan osio. Koska AMP on avoimen lähdekoodin projekti, laajennettujen komponenttien määrä voi kasvaa tulevaisuudessa.
Tässä viestissä olemme keränneet kourallisen AMP-komponentteja, jotka voivat auttaa sinua sosiaalisen median integrointi. Muista, että komentosarjojen versiot voi muuttua ajan myötä, joten tarkista aina dokumentaatio ennen kuin lisäät ne sivustoosi.
1. amp-facebook
mahdollistaa upota Facebook-viesti tai video AMP-sivulle.
Sinun täytyy aina määritä sulautetun postin mitat, mikä tarkoittaa, että sinun täytyy lisätä a leveys ja a korkeus määrite, jonka arvot ovat kokonaisluku pikseleinä. Oikeat mitat löytyvät napsauttamalla Facebook-postin yläosassa olevaa "Upota" -valikkoa.
Sinun on myös vaadittava lisää kyseisen viestin URL-osoite vuonna data-href ominaisuus. Löydät URL-osoitteen napsauttamalla Facebook-postin aikaleimaa ja selain asettaa URL-osoitteen osoiteriville.
Jos haluat upota video ilman Facebook-postia, lisää valinnainen data-upottaa-as = "video" ominaisuus
Jos haluat tee upotuksesta reagoiva Käytä layout ominaisuus "Reagoiva" arvo. Voit myös käyttää valinnaista layout määritä mihin tahansa muuhun AMP-komponenttiin, jotta se voi ohjata sen asettelua.
Koodin esimerkki:
Koodin esikatselu:
Käsikirjoitus sisältää:
2. amp-twitter
Sinä pystyt upottaa tweetit AMP-sivuille käyttämällä komponentti.
Voit tehdä niin määritä tweetin tunnus vuonna data-tweetid ominaisuus. Voit muokata tweetin näyttämistä lisäämällä Twitter-APi-näytön vaihtoehtoja a data- * HTML5-määrite.
Esimerkiksi alla olevassa esimerkissä käytin Twitter-sovellusliittymiä LINKCOLOR näyttää vaihtoehdon data-link-väri (sen data- * muodossa), jos haluat muuttaa oletusyhteysvärin Hongkiat.com-väriin sen Twitter-tilissä.
Koodin esimerkki:
Koodin esikatselu:
Komponentti ei ole vielä täydellinen, Github sanoo Twitter ei tällä hetkellä tarjoa sovellusliittymää, joka tuottaa kiinteän kuvasuhteen Tweet upottaa.
Tämä tarkoittaa sitä, että sinun täytyy asetetaan manuaalisesti leveys ja korkeus määritteet, koska AMP-käyntiaika ei joskus näytä tweetin osaa (yleensä pohjaa).
On aina hyvä tarkistaa, miten upotetut tweetit näyttävät ennen AMP-sivun julkaisemista.
Lisää paikkamerkki
Vaikka sitä ei tarvita, dokumentaatio suosittelee paikanvaraajan lisääminen jos tweet ei lataudu kerralla.
paikanpitäjä ominaisuutta voidaan käyttää jokaisessa AMP-komponentissa. Paikkamerkki on näytetään välittömästi jos lopulliset resurssit eivät ole käytettävissä. Kun AMP-elementti lataa, se piilottaa paikanvaraajan.
Katso, miten yllä oleva esimerkkikoodi näyttää paikanvaraajan kanssa. Twitterissä napsautin yksinkertaisesti Embed Tweet -painiketta, kopioidun upotetun lohkokoodin (ilman komentosarjaa lopussa) ja lisäsin paikanpitäjä omistaa
Kanssa , sinä pystyt upottaa Instagram-valokuvia ja videoita AMP-sivuillesi.
Sinun täytyy määritä mitat upotettuna leveys ja korkeus määritteitä, ja sinun täytyy myös lisää tunniste Instagram-valokuvasta tai videosta data-shortcode ominaisuus.
Löydät tunnisteen URL-osoitteen lopussa, kun esimerkki URL-osoitteen alla olevasta valokuvasta on https://www.instagram.com/p/-PFt7tF8Km/, joten minun täytyy käyttää -PFt7tF8Km arvo data-shortcode ominaisuus.
Koodin esimerkki:
Koodin esikatselu:
Herkkä ulkoasu, AMP laskee automaattisesti tarvittavan tilan, joka myös sisältää “Instagram-kromi” (tilin nimi, päivämäärä, tykkääminen jne.).
Tämä tarkoittaa, että voit käyttää mitä tahansa arvoa leveys ja korkeus, kunnes kaksi arvoa ovat yhtä suuret (Instagram-valokuvat ovat yleensä neliöjä), koska AMP-runtime muuttaa kuvan kokoa käytettävissä olevan tilan mukaan.
Jos kuva ei ole neliö, sinun on määritettävä sen todellinen leveys ja korkeus arvot.
varten kiinteät asettelut, sinun täytyy sisältää ylimääräisen tilan (ylä- ja alareuna: +48 px, vasen ja oikea: + 8px), joita tarvitaan Instagram-kromille laskettaessa kuvan mitat.
Käsikirjoitus sisältää:
4. amp-pinterest
sallii sinun upota joko Pin-widget tai Pin It -painike AMP HTML -asiakirjaan.
Upota pin-widget
Jos haluat liittää Pin-widgetin, sinun on määritettävä mitat, nastan URL-osoite data-url määrite, ja sinun on myös lisättävä data-do = "embedPin" ominaisuus.
Koodin esimerkki (oletuskoko):
Koska oletuksena Pin-widget on melko pieni, voit myös valita suuremman version käyttämällä data-width = "väliaine" ominaisuus.
Koodin esimerkki (keskikoko):
Koodin esikatselu (keskikokoinen):
Näytä Pin It -painike
Voit myös lisää Pin It -painike AMP-sivulle komponentti. Lukuun ottamatta leveys ja korkeus mitat, olet tarvitaan määrittelemään neljä ominaisuutta jos haluat liittää Pin It -painikkeen:
data-do = "buttonPin" antaa AMP: n ajonaikaa tietää, että tämä on Pin It -painike
data-url haluamasi URL-osoitteen kanssa
data-media sen kuvan absoluuttisen URL-osoitteen, jonka haluat käyttäjien liittävän
data-kuvaus kuvauksen kanssa, jonka haluat näkyä Pin-lomakkeen muodossa
On monia eri painikekokoja, valita, tarkista kaikki saatavilla olevat koot.
Koodin esimerkki:
Tässä esimerkissä luotin Pin It -painikkeen, jonka avulla käyttäjät voivat liittää kuvan tästä entisestä Hongkiat.com-postista. Käytin pientä suorakulmaista painiketta.
Koodin esikatselu:
Huomaa, että sinun on käytettävä ylimääräistä CSS: tä näyttämään Pin It -painike kuvan yläosassa.
Voit myös luoda Pinterestin seuranta-painikkeen käyttämällä data-do = "buttonFollow" määrite ja määritä nimi, jonka haluat näkyviin Seuranta-painikkeen sisällä data-etiketti & tilisi URL-osoite data-href ominaisuus.
Koodin esimerkki (Seuraa-painiketta):
Käsikirjoitus sisältää:
5. amp-SoundCloud
SoundCloud on suosittu äänijakelualusta, jossa käyttäjät voivat jakaa musiikkiaan. Sen avulla komponentti pelaa SoundCloud-kappaleita suoraan AMP: n HTML-sivulta.
Tämä komponentti voi käyttää vain kiinteä korkeus layout mikä tarkoittaa, että sinun tarvitsee vain määrittää korkeus, ja leveys lasketaan AMP-käyntiajan mukaan. Tämän seurauksena upotettu SoundCloud-soitin tulee täytä kaikki käytettävissä olevat vaaka-alueet.
komponentti voidaan näyttää joko klassinen tai visuaalinen tila. Voit valita kahdesta tilasta asettamalla arvon data-visuaalinen joko attribuutti totta tai väärä (oletuksena on väärä).
Molemmissa tiloissa on käytettävä data-trackid määrite määritä tunniste ääni; voit etsiä äänitunnuksen klikkaamalla Jaa-painiketta SoundCloud.comin audiosoittimen alapuolella ja etsimällä pitkästä URL-osoitteesta upotuskoodin sisällä.
Classic-tila
Classic-tila näyttää pienen pienoiskuvan vasemmalla puolella ja audiosoitin oikealla. Saat oikean arvon korkeus Määritä Embed-koodista SoundCloud.comissa.
Classic-tilassa voit määrittää soittimen värin, jos haluat käyttää data-väri määrite (et voi tehdä tätä visuaalisesti).
Koodiesimerkki (klassinen tila):
Koodin esikatselu (klassinen tila):
Visuaalinen tila
Sisään Visuaalinen tila, esillä oleva kuva ulottuu audiosoittimen taakse. Täällä voit myös löytää oikean korkeus kuuluvat Visual Mode -sovellukseen Embed-koodissa SoundCloud.comissa.
Koodiesimerkki (visuaalinen tila):
Koodiesimerkki (visuaalinen tila):
Jos haluat upota yksityinen ääni, käytä valinnaista data-salainen-token ominaisuus.
Käsikirjoitus sisältää:
6. amp-viiniköynnöksen
Vine on lyhytmuotoinen videonjako-sivusto, jossa voit jakaa 6 sekunnin pitkiä videoita ystävien kanssa. komponentti mahdollistaa helposti upottaa Vine-videoita AMP-HTML-sivuillesi.
Tämä AMP-komponentti on melko yksinkertainen, sinun tarvitsee vain lisätä Vine-videon mitat ja ID data-vineid ominaisuus. Tunnuksen voi saada kunkin viinin URL-osoitteesta.
Koska viinit ovat neliöitä, jos käytät reagoivaa ulkoasua, sama sääntö koskee kuin Instagram-upotuksia; voit lisätä mitään arvoa leveys ja korkeus määritteet, kunnes ne ovat yhtä suuret he toimivat oikein.
Koodin esimerkki:
Koodin esikatselu:
Käsikirjoitus sisältää:
7. amp-youtube
Sinä pystyt upota YouTube-videot AMP: n sivuilla komponentti.
Voit tehdä tämän lisäämällä videon mitat ja ID: n data-videoid ominaisuus. Kun määrität leveys ja korkeus, se on tärkeää kiinnitä huomiota kuvasuhteeseen.
Voit myös käytä YouTube-upotusten parametreja AMP-asiakirjoissa vain lisää parametrin nimi jälkeen data-param- etuliite.
Koodin esimerkki:
Tässä esimerkissä käytin alkaa YouTube-parametri data-param-start ominaisuus, jotta video alkaa 43s.
Koodin esikatselu:
Käsikirjoitus sisältää:
Muut videonjakopalvelut
AMP: ssä on myös komponentteja, jotka liittyvät muihin videonjakopalveluihin toimivat samalla tavalla . Voit käyttää seuraavia laajennettuja AMP-komponentteja videoiden upotuksiin muilta palveluntarjoajilta kuin YouTubelta:
Vimeo upottaa
varten Dailymotion upottaa
Brightcove upottaa
8. amp-sosiaalinen-osake
Sosiaalisen median lisäksi voit myös näyttää sosiaalisen osuuden painikkeet AMP-sivuillasi käyttämällä komponentti.
Sosiaalinen osuus on määritetty joillekin palveluntarjoajille, mutta oikeat asetukset voit käyttää muiden sosiaalisten osuuksien painikkeita.
Pre-Configed Share -painikkeet
Ennalta määritetyt jakopainikkeet älä vaadi liian monta asetusta; sinun täytyy määritellä leveys (oletus on 60px) ja korkeus (oletusarvo on 44px) ja sosiaalisen median tarjoajan nimi tyyppi ominaisuus.
Facebookin avulla sinun on myös määritettävä Facebook-sovelluksen tunnus data-param-APP_ID ominaisuus.
Koodin esimerkki:
Koodin esikatselu:
Esiasetukset tekee oletuksia että URL-osoite, jonka haluat jakaa, on nykyisen sivun kanoninen URL-osoite, ja teksti, jonka haluat jakaa osuuksiisi, on sivun otsikko.
Jos haluat käyttää toista asetusta, voit tehdä sen seuraavalla tavalla kolme valinnaista ominaisuutta:
data-teksti tekstin, jonka haluat sisällyttää osioon
data-url URL-osoitteen, jonka haluat jakaa
data-ansioksi sen henkilön tai palveluntarjoajan nimi, jolle haluat jakaa osuutesi
Määrittämättömät jakopainikkeet
Voit näyttää sosiaalisen osuuden painikkeita määrittelemättömät palveluntarjoajat, kuten WhatsApp, sinun täytyy määritä palveluntarjoajan mukautettu protokolla vuonna data-osake-päätepiste ominaisuus. Tutustu asiakirjoihin, miten voit tehdä tämän.
