8 Komponen AMP untuk Integrasi Media Sosial

Konflik terbesar yang menjadi standar web seluler Google, Laman Seluler yang Dipercepat perlu dipecahkan adalah membuat situs seluler lebih cepat, sementara menjaganya tetap fungsional & kaya konten. Saat ini konten yang kaya dan menarik tidak dapat dibayangkan tanpa embed dari situs media sosial populer - tweet, video, audio, posting, foto.

Komponen AMP yang Diperpanjang - di antara fitur-fitur hebat lainnya - menyediakan cara terbaik untuk berintegrasi AMP dokumen dengan berbagai jenis konten sosial.

Bagaimana Komponen AMP yang Diperpanjang Bekerja

Inti dari filosofi AMP adalah Google praktik kinerja terbaik. Untuk meningkatkan waktu pemuatan halaman, standar AMP membatasi bagaimana Anda dapat menggunakan teknologi front-end. Misalnya, Anda tidak dapat menggunakan JavaScript khusus, stylesheet eksternal, dan elemen HTML apa pun yang memuat sumber daya eksternal, seperti menandai.

Sebagai gantinya, Anda mendapatkan banyak Komponen AMP Anda bisa menggunakannya untuk menampilkan sumber daya eksternal, seperti gambar, video, audio, iklan, dll. di situs Anda.

Komponen AMP adalah tag HTML tertentu yang dapat digunakan mirip dengan tag HTML biasa. Beberapa dari mereka built in ke runtime AMP, sedangkan mayoritas berfungsi sebagai ekstensi. Komponen yang memungkinkan integrasi media sosial di halaman AMP semua komponen yang diperluas.

Komponen AMP yang diperluas mengharuskan Anda untuk melakukannya impor skrip milik dalam bagian dari dokumen HTML AMP Anda. Karena AMP adalah proyek sumber terbuka, jumlah komponen yang diperluas dapat tumbuh di masa depan.

Dalam posting ini kami telah mengumpulkan beberapa Komponen AMP yang dapat membantu Anda dengan integrasi media sosial. Perlu diingat bahwa versi skrip dapat berubah seiring waktu, jadi selalu periksa dokumentasi sebelum Anda memasukkannya ke situs Anda.

1. `amp-facebook`

memungkinkan untuk sematkan pos atau video Facebook menjadi halaman AMP.

Anda selalu harus melakukannya tentukan dimensi posting yang disematkan, yang berarti Anda harus menambahkan lebar dan a tinggi atribut dengan nilai dalam piksel integer. Anda dapat menemukan dimensi yang tepat dengan mengklik menu "Sematkan" di bagian atas pos Facebook.

Anda juga diharuskan tambahkan URL dari posting yang diberikan dalam data-href atribut. Anda dapat menemukan URL dengan mengklik stempel waktu pos Facebook, dan browser akan menyisipkan URL unik ke bilah alamat.

Jika Anda menghendaki sematkan video tanpa pos milik Facebook, tambahkan opsional data-embed-as = "video" atribut

Jika Anda menghendaki buat embed Anda responsif menggunakan tata letak atribut dengan "responsif" nilai. Anda juga dapat menggunakan opsional tata letak atribut pada komponen AMP lainnya untuk mengontrol tata letaknya.

Contoh kode:

Pratinjau kode:

Script untuk menyertakan:

2. `amp-twitter`

Kamu bisa tweet embed ke dalam halaman AMP dengan menggunakan komponen.

Untuk melakukannya, Anda harus melakukannya tentukan ID dari tweet tersebut dalam tweetid data atribut. Anda dapat mengubah cara tweet ditampilkan dengan menambahkan opsi tampilan APi Twitter sebagai data-* Atribut HTML5.

Misalnya, dalam contoh di bawah ini saya menggunakan API Twitter linkColor opsi tampilan sebagai data-link-color (nya data-* format) untuk mengubah warna tautan default ke warna yang digunakan Hongkiat.com di akun Twitter-nya.

Contoh kode:

Pratinjau kode:

Itu komponen belum sempurna, Github docs mengatakan itu Twitter saat ini tidak menyediakan API yang menghasilkan rasio aspek tetap yang disematkan Tweet.

Ini berarti Anda harus melakukannya secara manual mengatur lebar dan tinggi atribut, karena runtime AMP terkadang tidak menampilkan bagian (biasanya bagian bawah) dari tweet.

Itu selalu ide yang baik untuk memeriksa bagaimana tweet Anda terlihat seperti sebelum mempublikasikan halaman AMP.

Tambahkan Placeholder

Meskipun tidak diperlukan, dokumentasi merekomendasikan menambahkan placeholder seandainya tweet tidak dimuat sekaligus.

Itu placeholder atribut dapat digunakan pada setiap komponen AMP. Pengganti adalah ditampilkan segera jika sumber daya final tidak tersedia. Ketika elemen AMP dimuat, itu menyembunyikan placeholder-nya.

Lihatlah bagaimana contoh kode di atas terlihat dengan placeholder. Di Twitter, saya cukup mengklik tombol Tweet Embed, salin-tempel blokquote yang disematkan (tanpa skrip di bagian akhir), dan menambahkan placeholder atribut ke

menandai.

Contoh kode dengan placeholder:
   Cara Memvalidasi Laman Seluler yang Dipercepat (#AMP) #google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  15 Agustus 2016 
  
Script untuk menyertakan:
  
3. amp-instagram

Dengan , kamu bisa sematkan foto dan video Instagram ke halaman AMP Anda.

Anda diharuskan untuk tentukan dimensinya dari embed dengan lebar dan tinggi atribut, dan Anda juga harus tambahkan pengidentifikasi foto atau video Instagram menggunakan kode data pendek atribut.

Anda dapat menemukan pengenal di akhir URL, misalnya untuk foto di bawah URL https://www.instagram.com/p/-PFt7tF8Km/, jadi saya harus menggunakan -PFt7tF8Km sebagai nilai untuk kode data pendek atribut.

Contoh kode:
   
Pratinjau kode:

Untuk tata letak yang responsif, AMP secara otomatis menghitung ruang yang diperlukan juga termasuk “Instagram chrome” (nama akun, tanggal, jumlah suka, dll).

Ini berarti Anda dapat menggunakan nilai apa pun untuk lebar dan tinggi, sampai dua nilai sama (Foto Instagram biasanya berbentuk persegi), karena runtime AMP akan mengubah ukuran gambar sesuai dengan ruang yang tersedia.

Jika foto tersebut tidak berbentuk bujur sangkar, Anda harus menentukan yang sebenarnya lebar dan tinggi nilai-nilai.

Untuk tata letak tetap, kamu butuh termasuk ruang ekstra (atas dan bawah: +48 px, kiri dan kanan: + 8px) diperlukan untuk krom Instagram ketika Anda menghitung dimensi gambar.

Script untuk menyertakan:
  
4. amp-pinterest

memungkinkan Anda untuk sematkan widget Pin atau tombol Pin It menjadi dokumen HTML AMP.

Sematkan Widget Pin

Untuk menyematkan widget Pin, Anda harus menentukan dimensi, URL pin menggunakan url data atribut, dan Anda juga perlu menambahkan data-do = "embedPin" atribut.

Contoh kode (ukuran default):
   
Karena widget Pin default cukup kecil, Anda juga dapat memilih versi yang lebih besar dengan menggunakan data-width = "medium" atribut.

Contoh kode (ukuran sedang):
   
Pratinjau kode (ukuran sedang):

Tampilkan Tombol Pin It

Anda juga bisa tambahkan tombol Pin It ke halaman AMP Anda dengan bantuan komponen. Bagian dari lebar dan tinggi dimensi, kamu diperlukan untuk menentukan empat atribut untuk menyematkan tombol Pin It:

data-do = "buttonPin" untuk memberi tahu runtime AMP bahwa ini akan menjadi tombol Pin It

url data dengan URL yang ingin Anda bagikan

media data dengan URL absolut dari gambar yang ingin Anda pinkan oleh pengguna

deskripsi data dengan deskripsi yang ingin Anda tampilkan di formulir buat Pin

Ada banyak ukuran tombol yang berbeda, untuk memilih, periksa dokumen untuk semua ukuran yang tersedia.

Contoh kode:

Dalam contoh ini, saya membuat tombol Pin It yang memungkinkan pengguna untuk menyematkan gambar dari bekas posting Hongkiat.com ini. Saya menggunakan ukuran tombol persegi panjang kecil.
      
 
Pratinjau kode:

Perhatikan bahwa Anda perlu menggunakan CSS tambahan untuk menampilkan tombol Pin It di atas gambar.

Anda juga dapat membuat tombol Follow Pinterest dengan menggunakan data-do = "buttonFollow" atribut, dan menentukan nama yang ingin Anda tampilkan di dalam tombol Follow di menu label data & URL akun Anda di data-href atribut.

Contoh kode (tombol Ikuti):
   
Script untuk menyertakan:
  
5. amp-soundcloud

SoundCloud adalah platform distribusi audio populer di mana pengguna dapat berbagi musik mereka. Dengan bantuan komponen yang Anda bisa memainkan trek SoundCloud langsung dari halaman HTML AMP Anda.

Komponen ini bisa hanya digunakan dengan tinggi tetap tata letak yang berarti Anda hanya perlu menentukan tinggi, dan lebar akan dihitung oleh runtime AMP. Akibatnya pemutar audio SoundCloud yang tertanam akan isi semua ruang horisontal yang tersedia.

Itu komponen dapat ditampilkan di baik mode klasik atau visual. Anda dapat memilih dari dua mode dengan mengatur nilai data-visual atribut untuk keduanya benar atau Salah (standarnya adalah Salah).

Dalam kedua mode, Anda harus menggunakan data-trackid atribut untuk tentukan pengenal dari audio; Anda dapat menemukan ID audio dengan mengklik tombol Bagikan di bawah pemutar audio di SoundCloud.com, dan mencari URL bentuk panjang di dalam kode Sematan.

Mode Klasik

Itu Mode Klasik menampilkan gambar mini kecil di sebelah kiri, dan pemutar audio di sebelah kanan. Anda bisa mendapatkan nilai yang tepat untuk tinggi atribut dari kode Sematkan di SoundCloud.com.

Dalam Mode Klasik, Anda dapat menentukan warna pemutar audio jika Anda ingin menggunakan warna-data atribut (Anda tidak dapat melakukan ini dalam Mode Visual).

Contoh kode (mode klasik):
   
Pratinjau kode (mode klasik):

Mode Visual

Di Mode Visual, gambar unggulan mencakup di belakang pemutar audio. Di sini, Anda juga dapat menemukan yang tepat tinggi milik Mode Visual dalam kode Embed pada SoundCloud.com.

Contoh kode (mode visual):
   
Contoh kode (mode visual):

Jika Anda menghendaki sematkan audio pribadi, gunakan opsional data-rahasia-token atribut.

Script untuk menyertakan:
  
6. amp-pokok anggur

Vine adalah situs berbagi video bentuk pendek tempat Anda dapat berbagi video berdurasi 6 detik dengan teman-teman Anda. Itu komponen memungkinkan untuk dengan mudah sematkan video Vine ke halaman HTML AMP Anda.

Komponen AMP ini cukup sederhana, Anda hanya perlu menambahkan dimensi, dan ID dari video Vine di data-vineid atribut. Anda bisa mendapatkan ID dari URL setiap Vine.

Karena Vines adalah bujur sangkar, jika Anda menggunakan tata letak responsif, aturan yang sama berlaku seperti dengan embed Instagram; Anda dapat menambahkan nilai apa pun ke lebar dan tinggi atribut, sampai mereka sama mereka akan bekerja dengan baik.

Contoh kode:
   
Pratinjau kode:

Script untuk menyertakan:
  
7. amp-youtube

Kamu bisa sematkan video YouTube pada halaman AMP dengan bantuan komponen.

Untuk melakukannya, Anda perlu menambahkan dimensi, ditambah ID video di data-videoid atribut. Saat menentukan lebar dan tinggi, ini penting untuk memperhatikan rasio aspek.

Anda juga bisa gunakan parameter embed YouTube dalam dokumen AMP, cukup masukkan nama parameter setelah data-param- awalan.

Contoh kode:

Dalam contoh ini, saya memanfaatkan mulai Parameter YouTube di data-param-start atribut untuk membuat video dimulai pada 43-an.
   
Pratinjau kode:

Script untuk menyertakan:
  
Layanan Berbagi Video Lainnya

AMP juga memiliki komponen yang terkait dengan layanan berbagi video lainnya, yaitu bekerja mirip dengan . Anda dapat menggunakan komponen AMP tambahan berikut untuk embed video dari penyedia selain YouTube:

untuk embed Vimeo

untuk embed Dailymotion

untuk menanamkan Brightcove

8. amp-social-share

Selain menanamkan media sosial, Anda juga bisa menampilkan tombol berbagi sosial pada halaman AMP Anda dengan menggunakan komponen.

Fitur berbagi sosial adalah pra-konfigurasi untuk beberapa penyedia, tetapi dengan pengaturan yang tepat Anda dapat menggunakan komponen untuk tombol berbagi sosial lainnya.

Tombol Berbagi Pra-Konfigurasi

Tombol berbagi pra-konfigurasi tidak memerlukan terlalu banyak pengaturan; Anda harus mendefinisikan lebar (standarnya adalah 60px) dan tinggi (default adalah 44px) atribut, dan nama penyedia media sosial di Internet mengetik atribut.

Dengan Facebook, Anda juga harus menentukan id aplikasi Facebook di data-param-app_id atribut.

Contoh kode:
                    
 
Pratinjau kode:

Pra-konfigurasi membuat asumsi bahwa URL yang ingin Anda bagikan adalah URL kanonik dari halaman saat ini, dan teks yang ingin Anda sertakan dalam share Anda adalah judul halaman.

Jika Anda ingin menggunakan konfigurasi lain, Anda bisa melakukannya dengan yang berikut ini tiga atribut opsional:

data-teks untuk teks yang ingin Anda sertakan dalam share

url data untuk URL yang ingin Anda bagikan

atribusi data untuk nama orang atau penyedia yang Anda inginkan untuk dikaitkan dengan saham Anda

Tombol Berbagi Tidak Dikonfigurasi

Untuk menampilkan tombol berbagi sosial penyedia yang belum dikonfigurasi, seperti WhatsApp, Anda harus melakukannya tentukan protokol kustom penyedia dalam data-share-endpoint atribut. Lihat di dokumen bagaimana Anda bisa melakukan ini.

Script untuk menyertakan:
  