Bao gồm nội dung của bên thứ ba
Tìm hiểu cách để bao gồm các thành phần của bên thứ ba trong trang của bạn.
Nhúng một Tweet
Nhúng một Tweet từ Twitter trong trang của bạn sử dụng yếu tố amp-twitter.
Để nhúng một tweet vào trang của bạn, trước hết hãy bao gồm kịch bản sau trong phần <head>:
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Hiện tại, các tweet sẽ tự động được thu phóng để vừa với kích cỡ được cung cấp, nhưng điều này có thể cho chúng một ngoại hình không lý tưởng. Hãy tinh chỉnh thủ công chiều rộng và chiều cao được cung cấp hay sử dụng thuộc tính đa phương tiện để chọn tỷ lệ khung hình dựa trên chiều rộng màn hình.
<amp-twitter
width="500"
height="583"
layout="responsive"
data-tweetid="638793490521001985"
>
</amp-twitter>
amp-twitter tại AMP By Example. Nhúng một Instagram
Nhúng một Instagram vào trang của bạn sử dụng yếu tố amp-instagram.
Để nhúng một Instagram, trước hết hãy bao gồm kịch bản sau trong phần <head>:
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
Bao gồm mã ngắn dữ liệu Instagram có trong URL ảnh Instagram. Ví dụ, trong https://instagram.com/p/fBwFP, fBwFP là mã ngắn dữ liệu. Đồng thời, Instagram sử dụng một tỷ lệ khung hình cố định cho bố cục tương thích, vậy nên giá trị cho chiều rộng và chiều cao sẽ là giá trị chung.
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive"
>
</amp-instagram>
amp-instagram tại AMP By Example. Hiển thị một bài đăng hoặc video Facebook
Hiển thị một bài đăng hoặc video Facebook trong trang của bạn sử dụng yếu tố amp-facebook.
Bạn cần bao gồm kịch bản sau trong phần <head>:
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Ví dụ: Nhúng một bài đăng
Nguồn:
<amp-facebook
width="486"
height="657"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791"
>
</amp-facebook>
Xem trước: {amp-facebook0} {/amp-facebook0}
Ví dụ: Nhúng một video
Nguồn:
<amp-facebook
width="476"
height="316"
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/nasaearth/videos/10155187938052139"
>
</amp-facebook>
Xem trước: {amp-facebook0} {/amp-facebook0}
amp-facebook tại AMP By Example. Nhúng một video YouTube
Nhúng một video YouTube vào trang của bạn sử dụng yếu tố amp-youtube.
Bạn cần bao gồm kịch bản sau trong phần <head>:
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
data-videoid YouTube có thể được tìm thấy trong URL của trang video YouTube. Ví dụ, trong https://www.youtube.com/watch?v=Z1q71gFeRqM, Z1q71gFeRqM là video id.
Sử dụng layout="responsive" để cho bố cục phù hợp cho các video có tỷ lệ khung hình 16:9:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="560"
height="315"
>
</amp-youtube>
amp-youtube tại AMP By Example. Hiển thị một quảng cáo
Hiển thị một quảng cáo trong trang của bạn sử dụng yếu tố amp-ad. Chỉ hỗ trợ các quảng cáo được phục vụ qua HTTPS.
JavaScript của mạng lưới quảng cáo không được chạy trong tài liệu AMP. Thay vào đó, thời gian chạy AMP sẽ tải một iframe từ một nguồn khác (thông qua iframe sandbox) và thực thi JS của mạng lưới quảng cáo trong iframe sandbox đó.
Bạn phải quy định chiều rộng và chiều cao của quảng cáo, và loại mạng lưới quảng cáo. Type (loại) xác định khuôn mẫu của mạng lưới quảng cáo. Các loại quảng cáo khác nhau yêu cầu các thuộc tính data-* khác nhau.
<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>
Nếu mạng lưới quảng cáo có hỗ trợ, bao gồm một placeholder (mã giữ chỗ) trong trường hợp không có quảng cáo nào khả dụng:
<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 hỗ trợ nhiều loại mạng lưới quảng cáo. Xem amp-ad để biết danh sách đầy đủ.