Dodawanie zawartości stron trzecich
Important: this documentation is not applicable to your currently selected format email!
Dowiedz się, jak dodać składniki stron trzecich do swoich stron internetowych.
Osadzanie tweeta
Aby osadzić tweet z Twittera w swojej stronie, użyj elementu amp-twitter.
Aby osadzić tweet w swojej stronie, należy najpierw umieścić następujący skrypt w sekcji <head>:
<script async="" custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Obecnie tweety są automatycznie skalowane proporcjonalnie, aby dopasować je do podanego rozmiaru, ale może to skutkować wyglądem mniej niż idealnym. Ręcznie dostosuj dostarczoną szerokość i wysokość lub użyj atrybutu media, aby wybrać proporcje zależne od szerokości ekranu.
<amp-twitter width="500" height="583" layout="responsive" data-tweetid="638793490521001985"> </amp-twitter>
amp-twitter znajdziesz w sekcji AMP By Example. Osadzanie Instagrama
Aby osadzić Instagram w swojej stronie, użyj elementu amp-instagram.
Aby osadzić Instagram, należy najpierw umieścić następujący skrypt w sekcji <head>:
<script async="" custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
Dodaj szortkod danych Instagrama, znajdujący się w adresie URL zdjęcia z Instagrama. Na przykład w adresie https://instagram.com/p/fBwFP, szortkodem danych jest fBwFP. Ponadto Instagram stosuje stały współczynnik proporcji dla układów responsywnych, więc wartość szerokości i wysokości powinna być uniwersalna.
<amp-instagram data-shortcode="fBwFP" width="320" height="392" layout="responsive"> </amp-instagram>
amp-instagram znajdziesz w sekcji AMP By Example. Wyświetlanie wpisu lub filmu z Facebooka
Aby wyświetlić na swojej stronie wpis lub film z Facebooka, użyj elementu amp-facebook.
Najpierw musisz umieścić następujący skrypt w sekcji <head>:
<script async="" custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Przykład: osadzanie wpisu
Źródło:
<amp-facebook width="486" height="657" layout="responsive" data-href="https://www.facebook.com/zuck/posts/10102593740125791"> </amp-facebook>
Podgląd: {amp-facebook0} {/amp-facebook0}
Przykład: osadzanie filmu
Źródło:
<amp-facebook width="476" height="316" layout="responsive" data-embed-as="video" data-href="https://www.facebook.com/nasaearth/videos/10155187938052139"> </amp-facebook>
Podgląd: {amp-facebook0} {/amp-facebook0}
amp-facebook znajdziesz w sekcji AMP By Example. Osadzanie filmu z YouTube
Aby osadzić film z YouTube w swojej stronie, użyj elementu amp-youtube.
Najpierw musisz umieścić następujący skrypt w sekcji <head>:
<script async="" custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Identyfikator data-videoid YouTube jest zawarty w każdym adresie URL filmu na YouTube. Na przykład w adresie https://www.youtube.com/watch?v=Z1q71gFeRqM identyfikatorem filmu jest ciąg Z1q71gFeRqM.
Użyj atrybutu layout="responsive" aby uzyskać poprawne układy dla filmów o współczynniku proporcji 16:9:
<amp-youtube data-videoid="lBTCB7yLs8Y" layout="responsive" width="560" height="315"> </amp-youtube>
amp-youtube znajdziesz w sekcji AMP By Example. Wyświetlanie reklamy
Aby wyświetlać na stronie reklamę, użyj elementu amp-ad. Obsługiwane są tylko reklamy serwowane za pomocą protokołu HTTPS.
Uruchamianie wewnątrz dokumentu AMP kodu JavaScript dostarczonego przez sieć reklamową jest niedozwolone. Zamiast tego, środowisko uruchomieniowe AMP ładuje ramkę iframe z innego źródła (poprzez piaskownicę iframe) i wykonuje JS sieci reklamowej w tej piaskownicy iframe.
Musisz określić szerokość i wysokość reklamy oraz typ sieci reklamowej. Element type identyfikuje szablon sieci reklamowej. Różne typy reklam wymagają różnych atrybutów data-*.
<amp-ad width="300" height="250" type="a9" data-amzn_assoc_ad_mode="auto" data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5" data-recomtype="async" data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"> </amp-ad>
Jeśli jest to obsługiwane przez sieć, należy dodać placeholder, aby wyświetlać element zastępczy, jeśli reklama jest niedostępna:
<amp-ad width="300" height="250" type="a9" data-amzn_assoc_ad_mode="auto" data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5" data-recomtype="async" data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"> <div placeholder>Have a great day!</div> </amp-ad>
AMP obsługuje szeroką gamę sieci reklamowych. Pełna lista — patrz składnik amp-ad.
