8 Komponenty AMP pre integráciu sociálnych médií
Najväčší konflikt, ktorý predstavuje mobilný webový štandard spoločnosti Google, Zrýchlené mobilné stránky je potrebné vyriešiť čím sa mobilné stránky rýchlejšie, zatiaľ čo udržať ich funkčné a bohaté na obsah. V týchto dňoch sa dá ťažko predstaviť bohatý a pútavý obsah bez vloženia z populárnych stránok sociálnych médií - tweety, videá, audia, príspevky, fotky.
Rozšírené komponenty AMP - okrem iných skvelých funkcií - poskytuje skvelý spôsob integrácie AMP dokumenty s rôznym typom sociálneho obsahu.
Ako fungujú rozšírené komponenty AMP
V jadre filozofie AMP sú Google najlepšie postupy v oblasti výkonu. Na zlepšenie času načítania stránok obmedzujú normy AMP ako môžete použiť predné technológie. Napríklad, nemôžete používať vlastný JavaScript, externé štýly a ľubovoľný prvok HTML, ktorý načíta externé zdroje, ako napríklad
Na oplátku dostanete veľa Komponenty AMP môžete použiť na zobraziť externé zdroje, ako sú obrázky, videá, audia, reklamy, atď. na vašich stránkach.
Komponenty AMP sú konkrétne značky HTML ktoré môžu byť použité podobne ako obyčajné značky HTML. Niektoré z nich sú zabudovaný k AMP runtime, zatiaľ čo väčšina funguje ako rozšírenie. Komponenty, ktoré umožňujú integráciu sociálnych médií na stránky AMP sú všetky rozšírené komponenty.
Rozšírené komponenty AMP vyžadujú importovať príslušný skript v časť dokumentu AMP HTML. Keďže AMP je projekt s otvoreným zdrojovým kódom, počet rozšírených komponentov môže v budúcnosti rásť.
V tomto príspevku sme zhromaždili niekoľko komponentov AMP, ktoré vám môžu pomôcť s integráciou sociálnych médií. Majte na pamäti, že verzie skriptov sa môže v priebehu času meniť, takže skôr, ako ich zahrniete na svoje stránky, skontrolujte dokumentáciu.
1. amp-facebook
Vždy musíte zadajte rozmery vloženého príspevku, čo znamená, že potrebujete pridať a šírka a a výška atribút s hodnotami v celých pixeloch. Správne rozmery nájdete kliknutím na ponuku "Vložiť" v hornej časti príspevku na Facebook.
Ste tiež povinní pridajte adresu URL daného príspevku v Data-href atribútov. Webovú adresu nájdete kliknutím na časovú pečiatku príspevku na Facebook a prehliadač vloží jedinečnú adresu URL do panela s adresou.
Ak chceš vložte video bez príslušného príspevku na Facebook, pridajte voliteľné Data-vložiť-as = "video" atribút
Ak chceš urobte vstavanú odpoveď Použi dispozície atribút s "Citlivé" hodnota. Môžete tiež použiť voliteľné príslušenstvo dispozície atribút na akúkoľvek inú zložku AMP na ovládanie jej usporiadania.
Príklad kódu:
Náhľad kódu:
Skript, ktorý obsahuje:
2. amp-twitter
Môžeš vložiť tweety do stránok AMP pomocou
Ak to chcete urobiť, musíte to urobiť zadajte ID správy v Data-tweetid atribútov. Môžete zmeniť spôsob, akým sa zobrazuje tweet pridaním akýchkoľvek možností zobrazovania API služby Twitter ako data- * Atribút HTML5.
Napríklad v nižšie uvedenom príklade som použil API služby Twitter linkColor možnosť zobrazenia ako Data-link-color (IDS data- * formát) zmeniť predvolenú farbu odkazu na farbu, ktorú Hongkiat.com používa na svojom účte Twitter.
Príklad kódu:
Náhľad kódu:
Twitter v súčasnosti neposkytuje rozhranie API, ktoré poskytuje pevný pomer strán
.
To znamená, že potrebujete ručne nastaviť šírka a výška atribúty, pretože AMP runtime niekedy nezobrazuje časť (zvyčajne spodnú časť) tweetu.
Vždy je dobré skontrolovať, ako vaše embedded tweety vyzerajú ako pred publikovaním stránky AMP.
Pridajte zástupný symbol
Hoci to nie je potrebné, dokumentácia odporúča pridanie zástupného symbolu v prípade, že sa tweet nevrátí naraz.
zástupný atribút môže byť použitý pre každú zložku AMP. Je to zástupný symbol zobrazené okamžite ak nie sú k dispozícii konečné zdroje. Keď prvok AMP načíta, je skryje jeho zástupný symbol.
Pozrite sa, ako vyzerá uvedený príklad kódu s zástupným symbolom. Na Twitteru som jednoducho klikol na tlačidlo Vložiť Tweet, skopíroval vložený vložený blockquote (bez skriptu na konci) a pridal zástupný atribút na štítok.
Príklad kódu s zástupným symbolom:
Ako potvrdiť zrýchlené mobilné stránky (#AMP) #google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@ hongkiat) 15. augusta 2016
Skript, ktorý obsahuje:
3. amp-Instagram
s
Vyžaduje sa to zadajte rozmery vložiť s šírka a výška atribúty a tiež musíte pridajte identifikátor Instagram fotografie alebo video pomocou Data-skrátený atribút.
Identifikátor môžete nájsť na konci adresy URL, napríklad pre fotografiu pod adresou URL https://www.instagram.com/p/-PFt7tF8Km/, tak musím použiť -PFt7tF8Km ako hodnota pre Data-skrátený atribút.
Príklad kódu:
Náhľad kódu:
Pre uspokojivé usporiadanie, AMP automaticky vypočíta požadovaný priestor, ktorý tiež obsahuje “Instagram chróm” (názov účtu, dátum, počet likes atď.).
To znamená, že môžete použiť ľubovoľnú hodnotu šírka a výška, až pokým dve hodnoty sú rovnaké (Fotografie Instagram sú väčšinou štvorcové), pretože čas spracovania AMP zmení veľkosť obrázka podľa dostupného priestoru.
Ak sa fotografia nestane štvorcom, musíte zadať jej aktuálnu šírka a výška hodnoty.
pre pevné usporiadanie, musíte to urobiť zahrňte extra priestor (hore a dole: +48 px, vľavo a vpravo: + 8 px), ktoré sú potrebné pre chrome Instagram pri výpočte rozmerov obrázka.
Skript, ktorý obsahuje:
4. amp-Pinterest
Vložiť Pin Widget
Ak chcete vložiť miniaplikáciu Pin, musíte špecifikovať rozmery a adresu URL kolíka pomocou Data-url atribút a musíte tiež pridať Data-do = "embedPin" atribút.
Príklad kódu (predvolená veľkosť):
Keďže predvolená miniaplikácia Pin je pomerne malá, môžete sa rozhodnúť pre väčšiu verziu pomocou Data-width = "stredná" atribút.
Príklad kódu (stredná veľkosť):
Náhľad kódu (stredná veľkosť):
Zobrazte tlačidlo Pin it
Môžete tiež pridajte tlačidlo Pripnúť na vašu stránku AMP pomocou šírka a výška rozmery, vy ste vyžaduje špecifikáciu štyroch atribútov na vloženie tlačidla Pin To:
Data-do = "buttonPin"nechať AMP runtime vedieť, že to bude tlačidlo Pin toData-urls webovou adresou, ktorú chcete zdieľaťdata-medias absolútnou adresou URL obrázka, ktorú chcete používateľom pripájaťData-descriptions popisom, ktorý sa má zobraziť vo formulári Vytváranie PIN
Existujú veľa rôznych veľkostí tlačidiel, zvoľte si dokumenty pre všetky dostupné veľkosti.
Príklad kódu:
V tomto príklade som vytvoril tlačidlo Pin It, ktoré by umožnilo používateľom pripájať obrázok z tohto bývalého príspevku Hongkiat.com. Použil som malú veľkosť obdĺžnikového tlačidla.
Náhľad kódu:
Upozorňujeme, že na zobrazenie tlačidla Pin It na hornej strane obrázka potrebujete použiť ďalšie CSS.
Môžete tiež vytvoriť tlačidlo Pinterest Follow pomocou tlačidla Data-do = "buttonFollow" atribút a špecifikovať meno, ktoré chcete zobraziť vo vnútri tlačidla Sledovať v Data-label & adresa vášho účtu v priečinku Data-href atribút.
Príklad kódu (tlačidlo Sledovať):
Skript, ktorý obsahuje:
5. amp-SoundCloud
SoundCloud je populárna audio distribučná platforma, kde môžu používatelia zdieľať svoju hudbu. S pomocou
Táto súčasť môže používať len s fixné výške dispozície čo znamená, že stačí špecifikovať výška, a šírka sa vypočíta podľa doby behu AMP. Vďaka tomu bude vstavaný zvukový prehrávač SoundCloud vyplňte všetok dostupný horizontálny priestor.
Data-vizuálne atribút buď pravdivý alebo nepravdivý (predvolené je nepravdivý).
V oboch režimoch musíte použiť Data-TrackID atribút pre zadajte identifikátor zvuku; identifikáciu zvuku nájdete kliknutím na tlačidlo Zdieľať pod zvukovým prehrávačom na SoundCloud.com a vyhľadaním adresy URL s dlhým tvarom vo vnútri kódu Embed.
Klasický režim
Klasický režim zobrazí malý miniatúrny obrázok vľavo a prehrávač zvuku vpravo. Môžete získať správnu hodnotu pre výška atribút z kódu vloženia na SoundCloud.com.
V režime Classic môžete určiť farbu zvukového prehrávača, ak chcete použiť Data-color atribút (nemôžete to urobiť v režime Visual).
Príklad kódu (klasický režim):
Náhľad kódu (klasický režim):
Vizuálny režim
v Vizuálny režim, zobrazený obrázok sa nachádza za zvukovým prehrávačom. Tu nájdete aj správne výška ktoré patria do režimu Visual v kóde vkladania na SoundCloud.com.
Príklad kódu (vizuálny režim):
Príklad kódu (vizuálny režim):
Ak chceš vložiť súkromný zvuk, použite voliteľné príslušenstvo Údaje tajný-tokenu atribút.
Skript, ktorý obsahuje:
6. amp viniča
Vine je krátky formulár na zdieľanie videa, na ktorom môžete so svojimi priateľmi zdieľať 6 sekúnd dlhé videá.
Táto zložka AMP je pomerne jednoduchá, stačí pridať rozmery a ID videí VIN v Data-vineid atribútov. Identifikátor môžete získať z adresy URL jednotlivých vín.
Keďže viničky sú štvorce, ak používate odpovedajúce usporiadanie, platí to isté pravidlo ako pri vkladoch Instagram; môžete pridať ľubovoľnú hodnotu šírka a výška atribúty, kým nie sú rovnaké budú správne fungovať.
Príklad kódu:
Náhľad kódu:
Skript, ktorý obsahuje:
7. amp-youtube
Môžeš vložte videá YouTube na stránkach AMP pomocou
Ak to chcete urobiť, musíte pridať dimenzie a ID videa v priečinku Data-videoID atribútov. Pri určovaní šírka a výška, je to dôležité venujte pozornosť pomeru strán.
Môžete tiež použite parametre vkladov služby YouTube v dokumentoch AMP stačí vložiť názov parametra po Data-param- prefix.
Príklad kódu:
V tomto príklade som využil štart Parameter YouTube v Data-param-start atribút, aby sa video začalo na 43s.
Náhľad kódu:
Skript, ktorý obsahuje:
Ďalšie služby zdieľania videa
AMP má tiež komponenty súvisiace s inými službami zdieľania videa, ktoré pracovať podobne ako
8. amp-sociálno-share
Okrem vložených sociálnych médií môžete tiež zobraziť tlačidlá sociálneho zdieľania na vašich stránkach AMP pomocou
Spoločenská funkcia je pre niektorých poskytovateľov, ale s správnymi nastaveniami môžete použiť
Predkonfigurované tlačidlá zdieľania
Predkonfigurované tlačidlá zdieľania nevyžadujú príliš veľa nastavení; musíte definovať šírka (predvolené je 60px) a výška (predvolené je 44px) atribúty a meno poskytovateľa sociálnych médií v typ atribút.
Vďaka službe Facebook sa tiež vyžaduje, aby ste uviedli ID aplikácie Facebook Data-param-APP_ID atribút.
Príklad kódu:
Náhľad kódu:
Predkonfigurácia robí predpoklady že adresa URL, ktorú chcete zdieľať, je kanonická adresa URL aktuálnej stránky a text, ktorý chcete zahrnúť do vašej zdieľanej zložky, je názov stránky.
Ak chcete použiť inú konfiguráciu, môžete to urobiť nasledovne tri voliteľné atribúty:
Data-textovépre text, ktorý chcete zahrnúť do zdieľaniaData-urlpre adresu URL, ktorú chcete zdieľaťData-prisudzovaniepre meno osoby alebo poskytovateľa, ktorému chcete prideliť svoj podiel
Nekonfigurované tlačidlá zdieľania
Ak chcete zobraziť tlačidlá sociálneho zdieľania nekonfigurovaní poskytovatelia, ako je WhatsApp, musíte zadajte vlastný protokol poskytovateľa v Data-share-endpoint atribútov. Pozrite sa do dokumentov, ako to môžete urobiť.
Skript, ktorý obsahuje:
