AMP
PL
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Tiếng việt

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>
Otwórz ten fragment kodu w placu zabaw

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>
Otwórz ten fragment kodu w placu zabaw

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>
Otwórz ten fragment kodu w placu zabaw

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>
Otwórz ten fragment kodu w placu zabaw

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>
Otwórz ten fragment kodu w placu zabaw

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.