8 AMP komponensek a szociális média integrálásához

A legnagyobb ütközés, amit a Google mobil webes szabványa jelent, Gyorsított mobil oldalak megoldani kell a mobil webhelyek gyorsabbá tétele, míg funkcionálisan és tartalmilag gazdag. Napjainkban a gazdag és érdekes tartalmat aligha lehet elképzelni a népszerű közösségi médiaoldalak - tweetek, videók, hangok, hozzászólások, fotók - beágyazása nélkül.

Kiterjesztett AMP komponensek - többek között nagyszerű funkciókkal - nagyszerű módja az integrációnak AMP különböző társadalmi tartalmú dokumentumok.

Hogyan bővül az AMP komponensek?

Az AMP filozófiájának központi eleme a Google legjobb teljesítmény-gyakorlatok. Az oldal betöltési idejének javítása érdekében az AMP szabványok korlátozzák hogyan használhatja a front-end technológiákat. Például nem használhat egyéni JavaScript, külső stíluslapokat és olyan HTML elemeket, amelyek külső erőforrásokat töltenek be, mint például a címke.

Cserébe kapsz egy csomó AMP komponensek használhatod külső erőforrások megjelenítése, például a képek, videók, hangok, hirdetések stb.

Az AMP komponensek speciális HTML-címkék a szokásos HTML-címkékhez hasonlóan használható. Néhány közülük beépített az AMP futási idejére, míg a többség kiterjesztésekként működik. Az összetevők, amelyek lehetővé teszik a szociális média integrációját az AMP oldalakon minden kiterjesztett komponens.

A bővített AMP komponensek megkövetelik, hogy importálja a hozzátartozó parancsfájlt ban,-ben az AMP HTML-dokumentumának része. Mivel az AMP nyílt forráskódú projekt, a kiterjesztett komponensek száma a jövőben növekedhet.

Ebben a hozzászólásban összegyűjtöttünk egy pár AMP-komponenst, amely segíthet a szociális média integrációjával. Ne feledje, hogy a szkriptek verziói idővel változhat, ezért mindig olvassa el a dokumentációt, mielőtt felvenné őket a webhelyére.

1. amp-facebook

lehetővé teszi beágyaz egy Facebook-bejegyzést vagy videót egy AMP oldalra.

Mindig kell adja meg a beágyazott üzenet méreteit, ami azt jelenti, hogy hozzá kell adnod a szélesség és a magasság attribútum értékek egész pixelben. A megfelelő méreteket a Facebook bejegyzés tetején található "Beágyazás" menüpontra kattintva találja meg.

Szüksége van rá adja hozzá az adott bejegyzés URL-címét ban,-ben data-href tulajdonság. Az URL-t a Facebook-bejegyzés időbélyegére kattintva találja meg, és a böngésző beilleszti az egyedi URL-címet a címsorba.

Ha akarod beágyazza a videót a hozzá tartozó Facebook bejegyzés nélkül, adja hozzá az opcionális data-beágyazni-as = "video" tulajdonság

Ha akarod hajtsa végre a beágyazást használja a elrendezés attribútum a "fogékony" érték. Használhatja az opcionális elrendezés attribútum bármely más AMP összetevőre annak elrendezésének vezérlésére.

Kódpélda:

Kód előnézet:

A parancsfájl a következőket tartalmazza:

2. amp-twitter

tudsz beágyazott tweetek az AMP oldalakra a összetevő.

Ehhez meg kell adja meg a tweet azonosítóját ban,-ben data-tweetid tulajdonság. Módosíthatja a tweet megjelenítésének módját a Twitter APi megjelenítési lehetőségeinek hozzáadásával adat-* HTML5 attribútum.

Például az alábbi példában a Twitter API-t használtam linkColor megjelenítési opció data-link-szín (annak adat-* formátumban), hogy megváltoztassa az alapértelmezett linkszínt a Hongkiat.com színére a Twitter fiókjában.

Kódpélda:

Kód előnézet:

A A komponens még nem tökéletes, Github azt mondja A Twitter jelenleg nem nyújt olyan API-t, amely rögzített képarányú Tweet beágyazást eredményez.

Ez azt jelenti, hogy meg kell kézzel állítsa be szélesség és magasság attribútumok, mivel az AMP futási ideje néha nem jeleníti meg a tweet részét (általában az alját).

Mindig jó ötlet, hogy ellenőrizze, hogyan néz ki a beágyazott tweetek az AMP oldal közzététele előtt.

Adjon hozzá egy helyőrzőt

Bár nem szükséges, a dokumentáció javasolja helyőrző hozzáadása abban az esetben, ha a tweet nem tölt fel egyszerre.

A helykitöltő az attribútum használható minden egyes AMP komponensen. A helyőrző azonnal megjelenik ha a végleges források nem állnak rendelkezésre. Az AMP elem betöltésekor elrejti helyőrzőjét.

Nézd meg, hogyan néz ki a fenti példakód helyőrzővel. A Twitteren egyszerűen bepillantottam a Beágyazás gombra, beillesztettem a beágyazható blokkjelzést (a végén a szkript nélkül), és hozzáadta a helykitöltő attribútum a

címke.

Kódpélda helyőrzővel:

  
 
A gyorsított mobil oldalak érvényesítése (#AMP) #Google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  2016. augusztus 15. 
  

A parancsfájl a következőket tartalmazza:

3. amp-Instagram

Val vel , tudsz beágyazni Instagram-képeket és videókat AMP oldalakba.

Szükséged van adja meg a méreteket a beágyazás a szélesség és magasság attribútumok, és neked is meg kell adja hozzá az azonosítót az Instagram-fotó vagy videó használata a data-shortcode tulajdonság.

Az URL-cím alatti példát az URL-cím végén találja meg https://www.instagram.com/p/-PFt7tF8Km/, így kell használni -PFt7tF8Km értékként data-shortcode tulajdonság.

Kódpélda:

Kód előnézet:

Az érzékeny elrendezésekhez, Az AMP automatikusan kiszámítja a szükséges helyet is tartalmazza a “Instagram króm” (fiók neve, dátuma, tetszéseinek száma, stb.).

Ez azt jelenti, hogy bármilyen értéket használhat szélesség és magasság, amíg a két érték egyenlő (Az Instagram-fotók általában négyzet alakúak), mivel az AMP futási ideje a kép méretét a rendelkezésre álló hely szerint módosítja.

Ha a fénykép nem négyzet, akkor meg kell adnia a tényleges értéket szélesség és magasság értékeket.

mert rögzített elrendezések, neked kell tartalmazza a többletterületet (felső és alsó: +48 px, bal és jobb: + 8px) szükséges a Instagram-krómhoz a képméretek kiszámításakor.

A parancsfájl a következőket tartalmazza:

4. amp-pinterest

lehetővé teszi beágyazni egy Pin widgetet vagy egy Pin It gombot AMP HTML dokumentumba.

Beilleszt egy Pin Widgetet

A Pin widget beágyazásához meg kell adnia a méreteket, a PIN-kódot a data-url attribútum, és hozzá kell adnod a data-do = "embedPin" tulajdonság.

Kódpélda (alapértelmezett méret):

Mivel az alapértelmezett Pin-widget elég kicsi, akkor a adatok-szélesség = „közepes” tulajdonság.

Kódpélda (közepes méretű):

Kód előnézet (közepes méretű):

Mutasson egy Pin It gombot

Te is hozzáad egy Pin It gombot az AMP oldalára a összetevő. Eltekintve a szélesség és magasság méretek, te vagy négy attribútum megadásához szükséges a Pin It gomb beágyazásához:

1. data-do = "buttonPin" hogy az AMP futási ideje tudja, hogy ez egy Pin It gomb lesz
2. data-url a kívánt URL-címmel
3. data-media annak a képnek az abszolút URL-jével, amelyre a felhasználókat szeretnénk használni
4. data-leírás azokkal a leírásokkal, amelyeket a Pin létrehozási űrlapon szeretne megjeleníteni

Vannak sok különböző méretű gomb, válasszon a dokumentumok közül, ha rendelkezésre áll.

Kódpélda:

Ebben a példában egy Pin It gombot hoztam létre, amely lehetővé tenné a felhasználók számára, hogy a korábbi Hongkiat.com-hozzászólásból egy képet hozzanak létre. A kis téglalap alakú gombméretet használtam.

Kód előnézet:

Ne feledje, hogy további CSS-t kell használni a Pin It gomb megjelenítéséhez a kép tetején.

A. \ Tgombot is létrehozhatja a data-do = "buttonFollow" attribútum, és adja meg azt a nevet, amelyet a Kövesse gombon belül kíván megjeleníteni data-címke & a fiók URL-je a data-href tulajdonság.

Kódpélda (követési gomb):

A parancsfájl a következőket tartalmazza:

5. amp-soundcloud

A SoundCloud egy népszerű hangelosztási platform, ahol a felhasználók megoszthatják a zenét. A összetevője játszani a SoundCloud zeneszámokat közvetlenül az AMP HTML oldaláról.

Ez az összetevő csak együtt használható fix magasságú elrendezés ami azt jelenti, hogy csak a magasság, és a szélességet az AMP futási idővel számítjuk ki. Ennek eredményeként a beágyazott SoundCloud audio lejátszó lesz töltse ki az összes rendelkezésre álló vízszintes helyet.

A összetevő megjeleníthető klasszikus vagy vizuális módban. A két érték közül választhat a beállítás értékének beállításával data-vizuális attribútum igaz vagy hamis (az alapértelmezés az hamis).

Mindkét üzemmódban a data-TrackID tulajdonít neki adja meg az azonosítót az audio; az audió azonosítót a SoundCloud.com audiolejátszó alatt található Megosztás gombra kattintva találhatja meg, és a beágyazási kódon belül felkeresi a hosszú formátumú URL-címet.

Klasszikus mód

A Klasszikus mód megjelenít egy kis bélyegképet a bal oldalon, és az audio lejátszót a jobb oldalon. A megfelelő értéket kaphatja a magasság attribútum a SoundCloud.com Embed kódjából.

Klasszikus módban megadhatja az audiolejátszó színét, ha a data-szín attribútum (ezt nem teheted vizuális módban).

Kódpélda (klasszikus mód):

Kód előnézet (klasszikus mód):

Vizuális mód

Ban ben Vizuális mód, a kiemelt kép az audiolejátszó mögött helyezkedik el. Itt megtalálhatja a megfelelőt is magasság a Visual Mode-hoz tartozik a SoundCloud.com Embed kódjában.

Kódpélda (vizuális mód):

Kódpélda (vizuális mód):

Ha akarod beágyaz egy privát hangot, használja az opcionális adatok titkos token tulajdonság.

A parancsfájl a következőket tartalmazza:

6. amp-szőlő

A Vine egy rövid formátumú videomegosztó oldal, amelyen 6 másodperces hosszú videókat oszthat meg barátaival. A az összetevő lehetővé teszi, hogy könnyen beágyazza a Vine videókat az AMP HTML oldalain.

Ez az AMP komponens meglehetősen egyszerű, csak hozzá kell adnia a Vine videó méretét és azonosítóját data-vineid tulajdonság. Az azonosítót az egyes szőlők URL-jéről kaphatja meg.

Mivel a szőlő négyzetek, ha az érzékeny elrendezést használja, ugyanaz a szabály érvényes, mint az Instagram-beágyazásoknál; bármilyen értéket adhat hozzá a szélesség és magasság attribútumok, amíg nem egyenlőek megfelelően működnek.

Kódpélda:

Kód előnézet:

A parancsfájl a következőket tartalmazza:

7. amp-youtube

tudsz beágyazza a YouTube-videókat az AMP oldalakon a összetevő.

Ehhez hozzá kell adnia a videó méreteit, valamint a videó azonosítóját data-videoazonosításról tulajdonság. Ha megadja szélesség és magasság, fontos figyeljen a képarányra.

Te is használja a YouTube embeds paramétereit az AMP dokumentumokban csak írja be a paraméter nevét azután data-param- előtag.

Kódpélda:

Ebben a példában a Rajt YouTube paraméter a data-param-start A videó 43-as kezdetét teszi lehetővé.

Kód előnézet:

A parancsfájl a következőket tartalmazza:

Egyéb videómegosztási szolgáltatások

Az AMP-nek más videomegosztási szolgáltatásokkal kapcsolatos összetevői is vannak hasonlóan dolgozni . A YouTube-on kívüli szolgáltatóktól származó videó beágyazáshoz a következő kiterjesztett AMP-összetevőket használhatja:

• a Vimeo beágyazása
• a Dailymotion beágyazása
• a Brightcove beágyazására

8. amp-társadalmi-share

A szociális média beágyazása mellett Ön is a társadalmi részesedés gombok megjelenítése az AMP oldalain a összetevő.

A társadalmi részesedés jellemzője bizonyos szolgáltatók számára előre beállított, de a megfelelő beállításokkal a más társadalmi részvény gombokhoz.

Előre konfigurált megosztási gombok

Előre konfigurált megosztási gombok nem igényel túl sok beállítást; meg kell határoznia a szélesség (az alapértelmezett érték 60px) és magasság (alapértelmezett 44px) attribútumok, és a szociális médiaszolgáltató neve a típus tulajdonság.

A Facebook használatával meg kell adnia a Facebook alkalmazás azonosítóját a data-param-APP_ID tulajdonság.

Kódpélda:

Kód előnézet:

Az előkonfiguráció feltételezéseket tesz hogy a megosztani kívánt URL az aktuális oldal kanonikus URL-je, és a megosztani kívánt szöveget az oldal címe.

Ha másik konfigurációt szeretne használni, ezt a következőképpen teheti meg három választható attribútum:

1. data-text annak a szövegnek a megadásához, amelyet a részvénybe
2. data-url a megosztani kívánt URL-címhez
3. data-hozzárendelés annak a személynek vagy szolgáltatónak a nevére, akinek a részvényét meg kívánja tulajdonítani

Nem konfigurált megosztási gombok

A (z) nem konfigurált szolgáltatók, mint például a WhatsApp, meg kell adja meg a szolgáltató egyéni protokollját ban,-ben data-share-végpont tulajdonság. Nézze meg a dokumentumokat, hogyan lehet ezt megtenni.

A parancsfájl a következőket tartalmazza: