Dodawanie zawartości stron trzecich
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.