8 thành phần AMP để tích hợp phương tiện truyền thông xã hội

Xung đột lớn nhất mà tiêu chuẩn web di động của Google, Trang di động được tăng tốc cần giải quyết là làm cho các trang web di động nhanh hơn, trong khi giữ cho họ chức năng và giàu nội dung. Ngày nay, nội dung phong phú và hấp dẫn khó có thể tưởng tượng được nếu không được nhúng từ các trang truyền thông xã hội phổ biến - tweet, video, âm thanh, bài đăng, hình ảnh.

Các thành phần AMP mở rộng - trong số các tính năng tuyệt vời khác - cung cấp một cách tuyệt vời để tích hợp AMP tài liệu với các loại nội dung xã hội khác nhau.

Các thành phần AMP mở rộng hoạt động như thế nào

Cốt lõi của triết lý của AMP là có Google thực hành tốt nhất. Để cải thiện thời gian tải trang, các tiêu chuẩn AMP hạn chế làm thế nào bạn có thể sử dụng các công nghệ front-end. Chẳng hạn, bạn không thể sử dụng JavaScript tùy chỉnh, biểu định kiểu bên ngoài và bất kỳ phần tử HTML nào tải tài nguyên bên ngoài, chẳng hạn như nhãn.

Đổi lại, bạn nhận được một loạt Linh kiện AMP bạn có thể sử dụng để hiển thị tài nguyên bên ngoài, chẳng hạn như hình ảnh, video, âm thanh, quảng cáo, vv trên trang web của bạn.

Các thành phần AMP là thẻ HTML cụ thể có thể được sử dụng tương tự như các thẻ HTML thông thường. Một vài trong số đó là được xây dựng trong đến thời gian chạy AMP, trong khi phần lớn hoạt động như phần mở rộng. Các thành phần giúp tích hợp phương tiện truyền thông xã hội trên các trang AMP là tất cả các thành phần mở rộng.

Các thành phần AMP mở rộng yêu cầu bạn phải nhập tập lệnh thuộc bên trong phần tài liệu AMP HTML của bạn. Vì AMP là một dự án nguồn mở, số lượng các thành phần mở rộng có thể tăng lên trong tương lai.

Trong bài đăng này, chúng tôi đã thu thập được một số Thành phần AMP có thể giúp bạn tích hợp phương tiện truyền thông xã hội. Hãy nhớ rằng các phiên bản của các kịch bản có thể thay đổi theo thời gian, vì vậy hãy luôn kiểm tra tài liệu trước khi bạn đưa chúng vào trang web của bạn.

1. `amp-facebook`

làm cho nó có thể nhúng bài đăng hoặc video trên Facebook vào một trang AMP.

Bạn luôn cần phải chỉ định kích thước của bài viết nhúng, có nghĩa là bạn cần thêm một chiều rộng và một Chiều cao thuộc tính với các giá trị bằng pixel nguyên. Bạn có thể tìm thấy kích thước phù hợp bằng cách nhấp vào menu "Nhúng" trên đầu bài đăng trên Facebook.

Bạn cũng được yêu cầu thêm URL của bài đăng đã cho bên trong dữ liệu-href thuộc tính. Bạn có thể tìm thấy URL bằng cách nhấp vào dấu thời gian của bài đăng trên Facebook và trình duyệt sẽ chèn URL duy nhất vào thanh địa chỉ.

Nếu bạn muốn nhúng video mà không có bài đăng thuộc về Facebook, thêm tùy chọn data-embed-as = "video" thuộc tính

Nếu bạn muốn làm cho nhúng của bạn phản ứng nhanh sử dụng bố trí thuộc tính với "đáp ứng" giá trị. Bạn cũng có thể sử dụng tùy chọn bố trí thuộc tính trên bất kỳ thành phần AMP nào khác để kiểm soát bố cục của nó.

Mã ví dụ:

Xem trước mã:

Kịch bản bao gồm:

2. `amp-twitter`

Bạn có thể tweets nhúng vào các trang AMP bằng cách sử dụng thành phần.

Để làm như vậy, bạn cần phải chỉ định ID của tweet bên trong dữ liệu-tweetid thuộc tính. Bạn có thể sửa đổi cách hiển thị tweet bằng cách thêm bất kỳ tùy chọn phát nào của Twitter APi dưới dạng dữ liệu-* Thuộc tính HTML5.

Chẳng hạn, trong ví dụ dưới đây, tôi đã sử dụng API của Twitter màu sắc liên kết tùy chọn hiển thị như liên kết dữ liệu màu (nó là dữ liệu-* định dạng) để thay đổi màu liên kết mặc định thành màu mà Hongkiat.com sử dụng trên tài khoản Twitter của mình.

Mã ví dụ:

Xem trước mã:

Các thành phần chưa hoàn hảo, tài liệu Github nói rằng Twitter hiện không cung cấp API mang lại tỷ lệ khung hình cố định Tweet nhúng.

Điều này có nghĩa là bạn cần phải tự đặt chiều rộng và Chiều cao thuộc tính, vì thời gian chạy AMP đôi khi không hiển thị một phần (thường là dưới cùng) của tweet.

Luôn luôn là một ý tưởng tốt để kiểm tra các tweet được nhúng của bạn trông như thế nào trước khi xuất bản trang AMP.

Thêm một Trình giữ chỗ

Mặc dù không bắt buộc, tài liệu khuyến nghị thêm một giữ chỗ trong trường hợp tweet không tải cùng một lúc.

Các giữ chỗ thuộc tính có thể được sử dụng trên mỗi thành phần AMP. Giữ chỗ là hiển thị ngay lập tức nếu tài nguyên cuối cùng không có sẵn. Khi phần tử AMP tải, nó ẩn giữ chỗ của nó.

Hãy xem mã ví dụ trên trông như thế nào với một giữ chỗ. Trên Twitter, tôi chỉ cần nhấp vào nút Nhúng Tweet, dán sao chép blockquote có thể nhúng (không có đoạn script ở cuối) và thêm vào giữ chỗ thuộc tính

nhãn.

Ví dụ mã với giữ chỗ:
   Cách xác thực các trang di động được tăng tốc (#AMP) #Google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  Ngày 15 tháng 8 năm 2016 
  
Kịch bản bao gồm:
  
3. amp-instagram

Với , bạn có thể nhúng ảnh và video trên Instagram vào các trang AMP của bạn.

Bạn được yêu cầu chỉ định kích thước của nhúng với chiều rộng và Chiều cao thuộc tính, và bạn cũng phải thêm định danh của ảnh hoặc video trên Instagram bằng cách sử dụng shortcode dữ liệu thuộc tính.

Bạn có thể tìm thấy mã định danh ở cuối URL, ví dụ cho ảnh bên dưới URL là https://www.instagram.com/p/-PFt7tF8Km/, vì vậy tôi cần sử dụng -PFt7tF8Km làm giá trị cho shortcode dữ liệu thuộc tính.

Mã ví dụ:
   
Xem trước mã:

Đối với bố trí đáp ứng, AMP tự động tính toán không gian cần thiết bao gồm “Instagram chrome” (tên tài khoản, ngày, số lượt thích, v.v.).

Điều này có nghĩa là bạn có thể sử dụng bất kỳ giá trị nào cho chiều rộng và Chiều cao, cho đên khi hai giá trị bằng nhau (Ảnh trên Instagram thường là hình vuông), vì thời gian chạy AMP sẽ thay đổi kích thước hình ảnh theo không gian có sẵn.

Nếu ảnh không phải là hình vuông, bạn phải xác định thực tế của nó chiều rộng và Chiều cao giá trị.

Dành cho bố trí cố định, bạn cần phải bao gồm không gian thêm (trên và dưới: +48 px, trái và phải: + 8px) cần thiết cho chrome Chrome khi bạn tính kích thước hình ảnh.

Kịch bản bao gồm:
  
4. amp-pinterest

cho phép bạn nhúng tiện ích Ghim hoặc nút Ghim vào tài liệu HTML AMP.

Nhúng tiện ích ghim

Để nhúng tiện ích Ghim, bạn phải chỉ định kích thước, URL của ghim bằng cách sử dụng url dữ liệu và bạn cũng cần thêm thuộc tính data-do = "embedPin" thuộc tính.

Ví dụ mã (kích thước mặc định):
   
Vì tiện ích Ghim mặc định khá nhỏ, bạn cũng có thể chọn phiên bản lớn hơn bằng cách sử dụng data-width = "trung bình" thuộc tính.

Ví dụ mã (kích thước trung bình):
   
Xem trước mã (kích thước trung bình):

Hiển thị nút Pin It

Bạn cũng có thể thêm nút Pin It đến trang AMP của bạn với sự giúp đỡ của thành phần. Ngoài chiều rộng và Chiều cao kích thước, bạn cần thiết để chỉ định bốn thuộc tính để nhúng nút Pin It:

data-do = "buttonPin" để cho bộ thực thi AMP biết rằng đây sẽ là nút Pin It

url dữ liệu với URL bạn muốn chia sẻ

phương tiện truyền thông dữ liệu với URL tuyệt đối của hình ảnh bạn muốn người dùng ghim

mô tả dữ liệu với mô tả bạn muốn xuất hiện trong biểu mẫu Ghim

Có nhiều kích cỡ nút khác nhau, để chọn, kiểm tra tài liệu cho tất cả các kích cỡ có sẵn.

Mã ví dụ:

Trong ví dụ này, tôi đã tạo nút Pin It cho phép người dùng ghim hình ảnh từ bài đăng trước đây của Hongkiat.com. Tôi đã sử dụng kích thước nút hình chữ nhật nhỏ.
      
 
Xem trước mã:

Lưu ý rằng bạn cần sử dụng CSS bổ sung để hiển thị nút Ghim trên đầu hình ảnh.

Bạn cũng có thể tạo nút Theo dõi Pinterest bằng cách sử dụng data-do = "buttonFollow" và chỉ định tên bạn muốn hiển thị bên trong nút Theo dõi trong phần nhãn dữ liệu & URL của tài khoản của bạn trong dữ liệu-href thuộc tính.

Ví dụ mã (nút Theo dõi):
   
Kịch bản bao gồm:
  
5. amp-soundcloud

SoundCloud là một nền tảng phân phối âm thanh phổ biến, nơi người dùng có thể chia sẻ nhạc của họ. Với sự giúp đỡ của thành phần bạn có thể phát các bản nhạc SoundCloud ngay từ trang AMP HTML của bạn.

Thành phần này có thể chỉ được sử dụng với chiều cao cố định bố trí có nghĩa là bạn chỉ cần xác định Chiều cao, và chiều rộng sẽ được tính bằng thời gian chạy AMP. Do đó, trình phát âm thanh SoundCloud được nhúng sẽ điền vào tất cả các không gian ngang có sẵn.

Các thành phần có thể được hiển thị trong chế độ cổ điển hoặc hình ảnh. Bạn có thể chọn từ hai chế độ bằng cách đặt giá trị của dữ liệu trực quan thuộc tính thật hoặc là sai (mặc định là sai).

Trong cả hai chế độ, bạn phải sử dụng dữ liệu theo dõi gán cho chỉ định định danh của âm thanh; bạn có thể tìm ID âm thanh bằng cách nhấp vào nút Chia sẻ bên dưới trình phát âm thanh trên SoundCloud.com và tìm kiếm URL dạng dài bên trong Mã nhúng.

Chế độ cổ điển

Các Chế độ cổ điển hiển thị một hình ảnh thu nhỏ nhỏ ở bên trái và trình phát âm thanh ở bên phải. Bạn có thể nhận được giá trị phù hợp cho Chiều cao thuộc tính từ mã nhúng trên SoundCloud.com.

Trong Chế độ cổ điển, bạn có thể chỉ định màu của trình phát âm thanh nếu bạn muốn sử dụng màu dữ liệu thuộc tính (bạn không thể làm điều này trong Chế độ trực quan).

Ví dụ mã (chế độ cổ điển):
   
Xem trước mã (chế độ cổ điển):

Chế độ trực quan

Trong Chế độ trực quan, hình ảnh đặc trưng kéo dài phía sau trình phát âm thanh. Ở đây, bạn cũng có thể tìm thấy thích hợp Chiều cao thuộc về Chế độ trực quan trong mã nhúng trên SoundCloud.com.

Ví dụ mã (chế độ trực quan):
   
Ví dụ mã (chế độ trực quan):

Nếu bạn muốn nhúng một âm thanh riêng, sử dụng tùy chọn bí mật dữ liệu thuộc tính.

Kịch bản bao gồm:
  
6. amp-nho

Vine là một trang web chia sẻ video dạng ngắn mà bạn có thể chia sẻ các video dài 6 giây với bạn bè của mình. Các thành phần làm cho nó có thể dễ dàng nhúng video Vine vào các trang HTML AMP của bạn.

Thành phần AMP này khá đơn giản, bạn chỉ cần thêm kích thước và ID của video Vine trong phần dữ liệu thuộc tính. Bạn có thể lấy ID từ URL của mỗi Vine.

Vì Vines là hình vuông, nếu bạn sử dụng bố cục phản hồi, quy tắc tương tự sẽ được áp dụng như với Instagram nhúng; bạn có thể thêm bất kỳ giá trị nào vào chiều rộng và Chiều cao thuộc tính, cho đến khi chúng bằng nhau họ sẽ làm việc đúng.

Mã ví dụ:
   
Xem trước mã:

Kịch bản bao gồm:
  
7. amp-youtube

Bạn có thể nhúng video YouTube trên các trang AMP với sự giúp đỡ của thành phần.

Để làm như vậy, bạn cần thêm kích thước, cộng với ID của video trong dữ liệu-videoid thuộc tính. Khi chỉ định chiều rộng và Chiều cao, nó quan trọng đối với chú ý đến tỷ lệ khung hình.

Bạn cũng có thể sử dụng các tham số của YouTube nhúng trong tài liệu AMP, chỉ cần chèn tên của tham số sau dữ liệu-param- tiếp đầu ngữ.

Mã ví dụ:

Trong ví dụ này, tôi đã sử dụng khởi đầu Thông số YouTube trong dữ liệu-bắt đầu thuộc tính để làm cho video bắt đầu ở 43s.
   
Xem trước mã:

Kịch bản bao gồm:
  
Dịch vụ chia sẻ video khác

AMP cũng có các thành phần liên quan đến các dịch vụ chia sẻ video khác, đó là làm việc tương tự như . Bạn có thể sử dụng các thành phần AMP mở rộng sau đây để nhúng video từ các nhà cung cấp khác ngoài YouTube:

cho Vimeo nhúng

cho Dailymotion nhúng

cho nhúng nhúng

số 8. chia sẻ xã hội

Ngoài các phương tiện truyền thông xã hội nhúng, bạn cũng có thể hiển thị các nút chia sẻ xã hội trên các trang AMP của bạn bằng cách sử dụng thành phần.

Tính năng chia sẻ xã hội là cấu hình sẵn cho một số nhà cung cấp, nhưng với các cài đặt phù hợp, bạn có thể sử dụng thành phần cho bất kỳ nút chia sẻ xã hội nào khác.

Nút chia sẻ được cấu hình trước

Các nút chia sẻ được cấu hình trước không yêu cầu quá nhiều cài đặt; bạn phải xác định chiều rộng (mặc định là 60px) và Chiều cao (mặc định là 44px) thuộc tính và tên của nhà cung cấp phương tiện truyền thông xã hội trong kiểu thuộc tính.

Với Facebook, bạn cũng được yêu cầu chỉ định id ứng dụng Facebook trong data-param-app_id thuộc tính.

Mã ví dụ:
                    
 
Xem trước mã:

Cấu hình trước đưa ra các giả định rằng URL bạn muốn chia sẻ là URL chính tắc của trang hiện tại và văn bản bạn muốn đưa vào chia sẻ của mình là tiêu đề trang.

Nếu bạn muốn sử dụng một cấu hình khác, bạn có thể làm điều đó với những điều sau đây ba thuộc tính tùy chọn:

dữ liệu văn bản cho văn bản bạn muốn đưa vào chia sẻ

url dữ liệu cho URL bạn muốn chia sẻ

phân bổ dữ liệu cho tên của người hoặc nhà cung cấp mà bạn muốn chia sẻ

Nút chia sẻ chưa được định cấu hình

Để hiển thị các nút chia sẻ xã hội của nhà cung cấp chưa được cấu hình, chẳng hạn như WhatsApp, bạn cần phải chỉ định giao thức tùy chỉnh của nhà cung cấp bên trong chia sẻ dữ liệu thuộc tính. Kiểm tra trong các tài liệu làm thế nào bạn có thể làm điều này.

Kịch bản bao gồm:
  