8 AMP komponendid sotsiaalmeedia integreerimiseks
Suurim konflikt, mida Google'i mobiilne veebistandard, Kiirendatud mobiililehed on vaja lahendada mobiilsete saitide kiiremaks muutmine, samal ajal hoida neid funktsionaalsetena ja rikkalikult sisu. Nendel päevadel ei saa rikkalikku ja huvitavat sisu ette kujutada ilma populaarsete sotsiaalmeedia saitide (tweetid, videod, audioseadmed, postitused, fotod) manused..
Laiendatud AMP komponendid - teiste suurepäraste omaduste hulgas on suurepärane võimalus integreerimiseks AMP erineva sotsiaalse sisuga dokumendid.
Kuidas laiendatud AMP komponendid töötavad
AMP filosoofia keskmes on Google parimaid tavasid. Lehekülje laadimise aja parandamiseks piiravad AMP standardid kuidas kasutada esiotsa tehnoloogiaid. Näiteks ei saa te kasutada kohandatud JavaScripti, väliseid stiilitabeleid ega HTML-elemente, mis laadivad väliseid ressursse, näiteks silt.
Vastutasuks saad sa hulga AMP komponendid saate seda kasutada kuvada väliseid ressursse, näiteks pildid, videod, helid, reklaamid jne.
AMP komponendid on konkreetsed HTML-märgendid mida saab kasutada sarnaselt tavaliste HTML-siltidega. Mõned neist on sisseehitatud AMP runtime, samas kui enamus töötab laienditena. Komponendid, mis muudavad sotsiaalse meedia integreerimise võimalikuks AMP lehekülgedel on kõik laiendatud komponendid.
Laiendatud AMP komponendid nõuavad teid importige kuuluva skripti import Euroopa osa teie AMP HTML-dokumendist. Kuna AMP on avatud lähtekoodiga projekt, võib laiendatud komponentide arv tulevikus kasvada.
Selles postituses oleme kogunud käputäis AMP komponente, mis võivad teid aidata sotsiaalse meedia integratsiooniga. Pea meeles, et skriptide versioonid võib aja jooksul muutuda, kontrollige alati dokumentatsiooni enne, kui lisate need oma saidile.
1. facebook
võimaldab kinnitage Facebooki postitus või video AMP lehele.
Sa pead alati määrake sisseehitatud postituse mõõtmed, mis tähendab, et peate lisama a laius
ja a kõrgus
atribuut väärtustega täisarvu pikslites. Õige mõõtmed leiate Facebooki postituse ülaosas asuvast menüüst "Embed".
Sa pead ka lisage antud postituse URL Euroopa data-href
atribuut. URL-i leiate Facebooki postituse ajatemplist ja brauser lisab aadressiribale unikaalse URL-i.
Kui sa tahad kinnistage video ilma kuuluva Facebooki postituseta, lisage valikuline data-embed-as = "video"
atribuut
Kui sa tahad muuta oma embed reageerivaks kasuta paigutus
atribuudiga "reageeriv"
väärtus. Võite kasutada ka valikulist paigutus
mis tahes teise AMP komponendi atribuut, et kontrollida selle paigutust.
Koodi näide:
Koodi eelvaade:
Skript sisaldab:
2. amp-twitter
Sa saad manustatud tweets AMP lehekülgedele
komponent.
Selleks peate seda tegema määrake piiksuma ID Euroopa data-tweetid
atribuut. Saate muuta piiksumiste kuvamise viisi, lisades Twitter APi kuvamisvalikuid a andmete- *
HTML5 atribuut.
Näiteks allpool toodud näites kasutasin Twitteri API-sid linkColor
kuva valik andmete link-värv
(selle andmete- *
vormingus), et muuta vaikimisi linki värvi Hongkiat.comi oma Twitteri kontol.
Koodi näide:
Koodi eelvaade:
The
komponent ei ole veel täiuslik, ütleb Github Twitter ei paku praegu API-d, mis annavad fikseeritud kuvasuhte Tweet
.
See tähendab, et pead käsitsi seadistage laius
ja kõrgus
atribuudid, kuna AMP käitusaeg ei kuvata mõnikord piiksuma osa (tavaliselt põhi).
Alati on hea mõte kontrollida, kuidas teie varjatud tweetid näevad välja enne AMP lehe avaldamist.
Lisage paikkondnik
Kuigi see ei ole nõutav, soovitab dokumentatsioon kohahoidja lisamine juhul, kui piiksumine ei koorma korraga.
The kohahoidja
atribuuti saab kasutada iga AMP komponendi puhul. Kohatäide on näidatakse kohe kui lõplikud ressursid ei ole kättesaadavad. Kui AMP element laeb, siis see peidab oma kohahoidja.
Vaadake, kuidas ülaltoodud näite kood välja näeb kohatäitjaga. Twitteris klõpsasin lihtsalt nupul Embed Tweet, kopeerisin kleebitud embokoodi (ilma skripti lõpus) ja lisasin selle kohahoidja
omistada silt.
Koodi näide kohahoidjaga:
Kiirendatud mobiililehekülgede kinnitamine (#AMP) #google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15. august 2016
Skript sisaldab:
3. amp-instagram
Koos
, sa saad embed Instagrami fotod ja videod AMP lehekülgedele.
Sa pead täpsustage mõõtmed kinnisvaraga laius
ja kõrgus
atribuudid ja sa pead ka lisage identifikaator Instagrami või videot kasutades andmete lühikood
atribuut.
Selle URL-i näite jaoks leiate URL-i lõppu identifikaatori URL-i lõppu https://www.instagram.com/p/-PFt7tF8Km/
, nii et ma pean seda kasutama -PFt7tF8Km
väärtuseks andmete lühikood
atribuut.
Koodi näide:
Koodi eelvaade:
Tundlike paigutuste jaoks, AMP arvutab automaatselt vajaliku ruumi, mis ka sisaldab “Instagram kroom” (konto nimi, kuupäev, meeldetuletuste arv jne).
See tähendab, et saate kasutada mis tahes väärtust laius
ja kõrgus
, kuni kaks väärtust on võrdsed (Instagram-fotod on tavaliselt ruudukujulised), kuna AMP-käitusaeg muudab pildi suurust vastavalt olemasolevale ruumile.
Kui foto ei ole ruut, peate täpsustama selle tegeliku laius
ja kõrgus
väärtused.
Sest fikseeritud paigutusega, sa pead lisage lisaruumi (ülemine ja alumine: +48 px, vasak ja parem: + 8px), mida vajate Instagram-kroomi jaoks, kui arvutate kujutise mõõtmeid.
Skript sisaldab:
4. amp-pinterest
võimaldab teil kinnitage kas Pin vidin või Pin It nupp AMP HTML-dokumenti.
Kinnita PIN-vidin
Pin-vidina kinnistamiseks peate määrama mõõtmed, PIN-koodi PIN-koodi kasutades data-url
atribuut ja peate lisama ka data-do = "embedPin"
atribuut.
Koodi näide (vaikimisi suurus):
Kuna vaikimisi on Pin-vidin üsna väike, saate valida ka suurema versiooni data-width = "medium"
atribuut.
Koodi näide (keskmise suurusega):
Koodi eelvaade (keskmise suurusega):
Näita nupp Pin It
Sa saad ka lisage nupp Pin It oma AMP lehele
komponent. Peale laius
ja kõrgus
mõõtmed, sa oled vaja määrata neli atribuuti nupp Pin It nupu sisestamiseks:
data-do = "buttonPin"
et lasta AMP käitusajal teada, et see on nupp Pin Itdata-url
URL-iga, mida soovite jagadaandmekandjad
selle pildi absoluutse URL-iga, mida soovite kasutajatele lisadaandmete kirjeldus
koos kirjeldusega, mida soovite Pin-vormi kujul kuvada
Seal on palju erinevaid nuppude suurusi, valida, kas kõik saadaval olevad suurused on dokumentides.
Koodi näide:
Selles näites lõin ma Pin It -nupu, mis võimaldaks kasutajatel selle endise Hongkiat.com-i postituse pilti kinnitada. Ma kasutasin väikest ristkülikukujulist nuppu.
Koodi eelvaade:
Pange tähele, et pildi peal olevale Pin It nupule kuvamiseks tuleb kasutada täiendavat CSS-i.
Samuti saate luua nupu Pinterest järgimise nupu abil data-do = "buttonFollow"
atribuut ja täpsustage nimi, mida soovid kuvada nuppu Järgmine nupu Järgmine etikett
& teie konto URL aadressil data-href
atribuut.
Koodi näide (jälgimisnupp):
Skript sisaldab:
5. amp-soundcloud
SoundCloud on populaarne heli levitamise platvorm, kus kasutajad saavad oma muusikat jagada. . \ T
komponent, mida saate mängida SoundCloud lugusid otse oma AMP HTML-lehelt.
See komponent saab kasutada ainult koos fikseeritud kõrgus
paigutus mis tähendab, et peate täpsustama ainult kõrgus
, ja laius arvutatakse AMP runtime abil. Selle tulemusena kaasatakse sisseehitatud SoundCloud helipleier täitke kogu olemasolev horisontaalne ruum.
The
komponenti saab kuvada kas klassikaline või visuaalne režiim. Saate valida kahe režiimi vahel, seades väärtuse andmete visuaalne
omistada tõsi
või vale
(vaikimisi on vale
).
Mõlemas režiimis peate kasutama andmete jälgimine
atribuut määrake identifikaator heli; võite leida audio ID, klõpsates nuppu SoundCloud.com helipleieri all oleval nupul Jaga ja otsides pikkakujulist URL-i Embed-koodi sees.
Klassikaline režiim
The Klassikaline režiim
kuvab vasakul väikese pisipildi ja paremal asuva helipleieri. Saate selle jaoks õige väärtuse kõrgus
atribuut alates SoundCloud.com-i Embed-koodist.
Klassikalises režiimis saate määrata helipleieri värvi, kui soovite seda kasutada andmete värv
atribuut (seda ei saa teha visuaalses režiimis).
Koodi näide (klassikaline režiim):
Koodi eelvaade (klassikaline režiim):
Visuaalne režiim
Sisse Visuaalne režiim
, kuvatav pilt ulatub helimängija taha. Siin võite leida ka õige kõrgus
kuulub SoundCloud.com-i Embed-koodi visuaalsesse režiimi.
Koodi näide (visuaalne režiim):
Koodi näide (visuaalne režiim):
Kui sa tahad privaatset heli, kasutage valikulist andmete salajane
atribuut.
Skript sisaldab:
6. amp-viinapuu
Vine on lühikese vormi video jagamise sait, kus saate oma sõpradega jagada 6-sekundilisi videoid. The
komponent võimaldab kergesti kinnistada Vine'i videod AMP HTML-lehekülgedele.
See AMP komponent on üsna lihtne, peate lisama ainult Vine'i video mõõtmed ja ID andmete viinapuu
atribuut. ID-koodi saate iga viinapuu URL-ist.
Kuna viinamarjad on ruudud, siis kui kasutate vastuslikku paigutust, kehtib sama reegel nagu Instagrami manuste puhul; saate lisada väärtusele laius
ja kõrgus
atribuudid, kuni nad on võrdsed nad töötavad korralikult.
Koodi näide:
Koodi eelvaade:
Skript sisaldab:
7. amp-youtube
Sa saad Sisesta YouTube'i videod AMP lehekülgedel
komponent.
Selleks peate lisama video mõõtmed ja ID andmete videoid
atribuut. Määrates laius
ja kõrgus
, see on oluline pöörake tähelepanu kuvasuhtele.
Sa saad ka kasutage YouTube'i manuste parameetreid AMP dokumentides sisestage lihtsalt parameetri nimi pärast data-param-
eesliide.
Koodi näide:
Selles näites kasutasin seda alustada
YouTube'i parameeter data-param-start
atribuut, et muuta video algusest 43s.
Koodi eelvaade:
Skript sisaldab:
Muud video jagamise teenused
AMP-l on ka teiste videote jagamise teenustega seotud komponendid töötama sarnaselt
. Teistelt YouTube'i teenusepakkujatelt saate videote manuste jaoks kasutada järgmisi laiendatud AMP komponente:
jaoks Vimeo embeds
Dailymotioni embeds
Brightcove'i embeds jaoks
8. sotsiaal-ühiskondlik osa
Lisaks sotsiaalsetele meediatele on võimalik ka kuva sotsiaalse jagamise nuppe AMP-lehekülgedel
komponent.
Sotsiaalse osa funktsioon on teatud teenusepakkujate jaoks eelkonfigureeritud, kuid õigete seadistustega saate kasutada
muude sotsiaalsete osade nupud.
Eelkonfigureeritud jagamisnupud
Eelkonfigureeritud jagamisnupud ei vaja liiga palju seadeid; peate määratlema laius
(vaikimisi on 60px) ja kõrgus
(vaikimisi on 44px) atribuudid ja sotsiaalmeedia pakkuja nimi tüüp
atribuut.
Facebookiga peate ka määrama Facebooki rakenduse ID data-param-app_id
atribuut.
Koodi näide:
Koodi eelvaade:
Eelkonfiguratsioon teeb eeldusi et URL, mida soovite jagada, on praeguse lehekülje kanooniline URL ja tekst, mida soovite oma aktsiale lisada, on lehe pealkiri.
Kui soovid kasutada mõnda muud seadistust, saate seda teha järgnevalt kolm valikulist atribuuti:
andmete tekst
selle teksti kohta, mida soovite jagadadata-url
URL-i, mida soovite jagadaandmete omistamine
selle isiku või teenuseosutaja nime kohta, kellele soovite, et teie aktsia jagataks
Konfigureerimata jagamisnupud
Sotsiaalse jagamise nuppude kuvamiseks seadistamata pakkujad, nagu WhatsApp, peate seda tegema määrake teenuse pakkuja kohandatud protokoll Euroopa andmete jagamise lõpp-punkt
atribuut. Kontrollige dokumentides, kuidas seda teha.
Skript sisaldab: