8 Komponenty AMP pro integraci sociálních médií

Největší konflikt, který Google mobilní web standard, Zrychlené mobilní stránky je třeba řešit rychlejší vytváření mobilních stránek, zatímco udržet jejich funkčnost a bohatý obsah. V dnešní době si lze sotva představit bohatý a poutavý obsah bez vložení z populárních sociálních médií - tweety, videa, audia, příspěvky, fotografie.

Rozšířené komponenty AMP - mezi další skvělé funkce - poskytují skvělý způsob, jak integrovat AMP dokumenty s různými typy sociálního obsahu.

Jak fungují rozšířené komponenty AMP

Jádrem filozofie společnosti AMP jsou společnosti Google nejlepších postupů. Chcete-li zkrátit dobu načítání stránek, normy AMP se omezují jak používat technologie front-end. Nelze například použít vlastní JavaScript, externí styly ani žádný prvek HTML, který načítá externí zdroje, například štítek.

Na oplátku dostanete spoustu Komponenty AMP můžete použít zobrazit externí zdroje, jako jsou obrázky, videa, audia, reklamy atd. na vašem webu.

Komponenty AMP jsou specifických HTML tagů které lze použít podobně jako běžné HTML tagy. Několik z nich je vestavěný k runtime AMP, zatímco většina funguje jako rozšíření. Komponenty, které umožňují integraci sociálních médií na stránkách AMP jsou všechny rozšířené komponenty.

Rozšířené komponenty AMP vyžadují importovat příslušný skript v sekce dokumentu AMP HTML. Vzhledem k tomu, že AMP je open-source projekt, počet rozšířených komponent může v budoucnu růst.

V tomto příspěvku jsme shromáždili několik komponent AMP, které vám mohou pomoci s integrací sociálních médií. Mějte na paměti, že verze skriptů se může časem měnit, Předtím, než je vložíte na své stránky, proto vždy prostudujte dokumentaci.

1. `amp-facebook`

umožňuje vložení příspěvku na Facebooku nebo videa na stránku AMP.

Vždycky potřebujete určete rozměry vloženého příspěvku, což znamená, že potřebujete přidat šířka a výška atribut s hodnotami v celočíselných pixelech. Správné rozměry naleznete kliknutím na nabídku „Vložit“ v horní části příspěvku na Facebooku.

Jste také povinni přidejte adresu URL daného příspěvku v data-href atribut. Adresu URL můžete najít kliknutím na časové razítko příspěvku na Facebooku a prohlížeč vloží jedinečnou adresu URL do adresního řádku.

Pokud chceš Vložit video bez příslušného příspěvku na Facebooku, přidejte volitelné data-embed-as = "video" atribut

Pokud chceš Udělej si svůj embed citlivý používat rozložení atribut "citlivý" hodnota. Můžete také použít volitelné rozložení atributu na jakékoli jiné komponentě AMP pro řízení jejího rozložení.

Příklad kódu:

Náhled kódu:

Skript obsahuje:

2. `amp-twitter`

Můžeš vložit tweety do stránek AMP pomocí součástka.

K tomu musíte zadejte ID tweetu v data-tweetid atribut. Můžete změnit způsob zobrazení tweetu přidáním některého z možností zobrazení služby Twitter APi jako a data-* Atribut HTML5.

Například v příkladu níže jsem použil rozhraní API služby Twitter linkColor možnost zobrazení jako barva datového propojení (to je data-* změnit barvu odkazu na barvu, kterou používá Hongkiat.com na svém účtu Twitter.

Příklad kódu:

Náhled kódu:

komponenta není ještě dokonalá, říká Github docs Twitter v současné době neposkytuje rozhraní API, které poskytuje pevné vložení písma s poměrem stran.

To znamená, že potřebujete ručně nastavit šířka a výška atributy, protože runtime AMP někdy nezobrazuje část (obvykle dolní) tweetu.

Před publikováním stránky AMP je vhodné zkontrolovat, jak vypadají vložené tweety.

Přidat zástupný symbol

I když to není nutné, dokumentace doporučuje přidání zástupného symbolu v případě, že se tweet nenačte najednou.

zástupný symbol atribut lze použít na každé komponentě AMP. Zástupný symbol je ihned zobrazí pokud nejsou k dispozici konečné zdroje. Při načtení prvku AMP skryje jeho zástupný symbol.

Podívejte se, jak vypadá výše uvedený příklad kódu s zástupným symbolem. Na Twitteru jsem jednoduše kliknul na tlačítko Vložit Tweet, zkopírovat vloženou blokovou poznámku (bez skriptu na konci) a přidal zástupný symbol atribut

štítek.

Příklad kódu s zástupným symbolem:
   Jak ověřit zrychlené mobilní stránky (#AMP) #Google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@ hongkiat)  15. srpna 2016 
  
Skript obsahuje:
  
3. amp-instagram

S , můžeš vložit fotografie a videa Instagramu do stránek AMP.

Jste povinni specifikujte rozměry s vloženým šířka a výška a také musíte přidejte identifikátor fotografie nebo videa Instagramu pomocí datový krátký kód atribut.

Identifikátor můžete najít na konci adresy URL, například pro fotografii pod adresou URL https://www.instagram.com/p/-PFt7tF8Km/, tak musím použít -PFt7tF8Km jako hodnotu pro datový krátký kód atribut.

Příklad kódu:
   
Náhled kódu:

Pro citlivé rozvržení, AMP automaticky vypočítá požadovaný prostor, který také zahrnuje “Instagram chrom” (název účtu, datum, počet oblíbených atd.).

To znamená, že můžete použít libovolnou hodnotu šířka a výška, až do dvě hodnoty jsou stejné (Instagram fotografie jsou obvykle čtvercové), protože běh programu AMP změní velikost obrazu podle dostupného prostoru.

Pokud se nejedná o čtverec, musíte zadat jeho aktuální hodnotu šířka a výška hodnoty.

Pro pevné rozvržení, musíš zahrnout další prostor (horní a dolní část: +48 px, vlevo a vpravo: + 8px) potřebné pro chrom Instagram při výpočtu rozměrů obrázku.

Skript obsahuje:
  
4. amp-pinterest

umožňuje Vložit buď Pin widget nebo tlačítko Pin It do dokumentu HTML programu AMP.

Vložit Pin Widget

Chcete-li vložit widget widget, musíte zadat rozměry, adresu URL pin data-url atribut, a také je třeba přidat data-do = "embedPin" atribut.

Příklad kódu (výchozí velikost):
   
Jako výchozí Pin widget je poměrně malý, můžete se také rozhodnout pro větší verzi pomocí data-width = "medium" atribut.

Příklad kódu (střední velikost):
   
Náhled kódu (střední velikost):

Zobrazí tlačítko Pin It

Můžete také přidejte tlačítko Pin It na stránku AMP pomocí součástka. Kromě šířka a výška dimenze, ty specifikovat čtyři atributy pro vložení tlačítka Pin It:

data-do = "buttonPin" nechat runtime AMP vědět, že to bude tlačítko Pin It

data-url s adresou URL, kterou chcete sdílet

datových médií s absolutní adresou URL obrázku, který chcete uživatelům připnout

popis dat s popisem, který chcete zobrazit ve formuláři Vytvořit PIN

Existují různých velikostí tlačítek, vybrat si, zkontrolujte dokumenty pro všechny dostupné velikosti.

Příklad kódu:

V tomto příkladu jsem vytvořil tlačítko Pin It, které by umožnilo uživatelům připnout obrázek z tohoto bývalého příspěvku Hongkiat.com. Použil jsem malou velikost obdélníkového tlačítka.
      
 
Náhled kódu:

Pro zobrazení tlačítka Pin It v horní části obrázku je nutné použít další CSS.

Tlačítko Sledování Pinterestu můžete také vytvořit pomocí tlačítka data-do = "buttonFollow" a specifikováním jména, které chcete zobrazit v tlačítku Následuj údaje & URL vašeho účtu v data-href atribut.

Příklad kódu (tlačítko Sledovat):
   
Skript obsahuje:
  
5. amp-soundcloud

SoundCloud je populární audio distribuční platforma, kde mohou uživatelé sdílet svou hudbu. S pomocí můžete přehrávání skladeb SoundCloud přímo ze stránky HTML programu AMP.

Tato komponenta může používat pouze s pevná výška rozložení to znamená, že stačí zadat výška, a šířka bude vypočtena pomocí runtime AMP. Výsledkem je, že vložený zvukový přehrávač SoundCloud bude vyplňte všechny dostupné vodorovné prostory.

komponentu lze zobrazit v klasický nebo vizuální režim. Můžete si vybrat ze dvou režimů nastavením hodnoty data-visual atributu skutečný nebo Nepravdivé (výchozí hodnota je Nepravdivé).

V obou režimech musíte použít data-trackid přisuzovat specifikujte identifikátor zvuku; ID zvuku můžete najít klepnutím na tlačítko Sdílet pod zvukovým přehrávačem v aplikaci SoundCloud.com a vyhledáním adresy URL s dlouhým formulářem uvnitř kódu Vložení.

Klasický režim

Klasický režim zobrazí malý miniaturní obrázek vlevo a audio přehrávač vpravo. Můžete získat správnou hodnotu pro výška atribut z kódu Vložit na SoundCloud.com.

V klasickém režimu můžete specifikovat barvu audio přehrávače, pokud chcete použít data-color atribut (nelze to provést v režimu Visual).

Příklad kódu (klasický režim):
   
Náhled kódu (klasický režim):

Vizuální režim

v Vizuální režim, představovaný obraz pokrývá zvukový přehrávač. Zde můžete také najít správné výška patřící do Vizuálního režimu v kódu Vložit na SoundCloud.com.

Příklad kódu (vizuální režim):
   
Příklad kódu (vizuální režim):

Pokud chceš vložení soukromého zvuku, použijte volitelný data-secret-token atribut.

Skript obsahuje:
  
6. amp-vine

Vine je stránka pro sdílení videa s krátkým formulářem, na které můžete sdílet 6sekundová videa se svými přáteli. umožňuje snadno Vložit videa Vine do stránek HTML ve formátu AMP.

Tato komponenta AMP je poměrně jednoduchá, stačí přidat rozměry a ID videa Vine data-vinné révy atribut. ID můžete získat z adresy URL každého révy.

Jelikož Vines jsou čtverce, použijete-li citlivé rozvržení, platí stejné pravidlo jako u vložek Instagram; můžete přidat libovolnou hodnotu šířka a výška atributy, dokud nebudou rovni budou správně pracovat.

Příklad kódu:
   
Náhled kódu:

Skript obsahuje:
  
7. amp-youtube

Můžeš Vložit videa YouTube na stránkách AMP s pomocí součástka.

Chcete-li tak učinit, musíte přidat rozměry a ID videa do data-videoid atribut. Při specifikaci šířka a výška, je to důležité věnujte pozornost poměru stran.

Můžete také použít parametry vložení YouTube v dokumentech AMP stačí zadat název parametru po data-param- předpona.

Příklad kódu:

V tomto příkladu jsem použil Start Parametr YouTube v data-param-start atribut, aby video začalo ve 43s.
   
Náhled kódu:

Skript obsahuje:
  
Ostatní služby sdílení videa

AMP má také komponenty související s jinými službami pro sdílení videa, to je pracovat podobně . Pro vložení videa z jiných poskytovatelů než YouTube můžete použít následující rozšířené komponenty AMP:

pro Vimeo vložky

pro vložky Dailymotion

pro Brightcove vložky

8. amp-social-share

Kromě sociálních médií můžete také zobrazit tlačítka sociálních sdílení na stránkách AMP pomocí součástka.

Funkce sociálního sdílení je přednastaveno pro některé poskytovatele, ale se správným nastavením můžete použít komponent pro všechna ostatní tlačítka pro sdílení.

Předkonfigurovaná tlačítka sdílení

Přednastavená tlačítka sdílení nevyžadují příliš mnoho nastavení; musíte definovat šířka (výchozí hodnota je 60px) a výška (výchozí je 44px) atributy a název poskytovatele sociálních médií v typ atribut.

V případě služby Facebook musíte také zadat ID aplikace Facebook na stránce data-param-app_id atribut.

Příklad kódu:
                    
 
Náhled kódu:

Předkonfigurace předpoklady adresa URL, kterou chcete sdílet, je kanonická adresa URL aktuální stránky a text, který chcete zahrnout do sdílené položky, je název stránky.

Pokud chcete použít jinou konfiguraci, můžete tak učinit následujícím způsobem tři volitelné atributy:

datový text pro text, který chcete zahrnout do sdílené položky

data-url pro adresu URL, kterou chcete sdílet

přiřazení dat pro jméno osoby nebo poskytovatele, ke kterému chcete, aby byl váš podíl připsán

Nekonfigurovaná tlačítka sdílení

Chcete-li zobrazit tlačítka sociálních sdílení nenakonfigurovaných poskytovatelů, například WhatsApp, musíte specifikujte vlastní protokol poskytovatele v koncový bod sdílení dat atribut. Podívejte se do dokumentace, jak to můžete udělat.

Skript obsahuje:
  