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
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
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ä
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:
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 tag.
Koodin esimerkki paikkamerkillä:
Nopeutettujen mobiilisivujen vahvistaminen (#AMP) #Google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15. elokuuta 2016
Käsikirjoitus sisältää:
3. amp-Instagram
Kanssa
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
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 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 -painikedata-urlhaluamasi URL-osoitteen kanssadata-mediasen kuvan absoluuttisen URL-osoitteen, jonka haluat käyttäjien liittävändata-kuvauskuvauksen 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
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.
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.
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
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
8. amp-sosiaalinen-osake
Sosiaalisen median lisäksi voit myös näyttää sosiaalisen osuuden painikkeet AMP-sivuillasi käyttämällä
Sosiaalinen osuus on määritetty joillekin palveluntarjoajille, mutta oikeat asetukset voit käyttää
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-tekstitekstin, jonka haluat sisällyttää osioondata-urlURL-osoitteen, jonka haluat jakaadata-ansioksisen 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.
Käsikirjoitus sisältää:
