Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

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>
Open this snippet in playground

PORADA — więcej przykładów użycia składnika 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>
Open this snippet in playground

PORADA — więcej przykładów użycia składnika 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}

PORADA — więcej przykładów użycia składnika 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>
Open this snippet in playground

PORADA — więcej przykładów użycia składnika 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>
Open this snippet in playground

Jeśli jest to obsługiwane przez sieć, należy dodać placeholder, aby wyświetlać element zastępczy, jeśli reklama jest niedostępna:

Have a great day!
<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>
Open this snippet in playground

AMP obsługuje szeroką gamę sieci reklamowych. Pełna lista — patrz składnik amp-ad.

CZYTAJ DALEJ — dowiedz się więcej o reklamach z przewodnika Serwowanie reklam na stronach AMP.