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:

1. data-do = "buttonPin" et lasta AMP käitusajal teada, et see on nupp Pin It
2. data-url URL-iga, mida soovite jagada
3. andmekandjad selle pildi absoluutse URL-iga, mida soovite kasutajatele lisada
4. andmete 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:

1. andmete tekst selle teksti kohta, mida soovite jagada
2. data-url URL-i, mida soovite jagada
3. andmete 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: