8 AMP Komponen untuk Integrasi Media Sosial
Konflik terbesar yang standard web mudah alih Google, Laman Mudah Alih Dipercepat perlu diselesaikan membuat tapak mudah alih lebih cepat, sementara menjaga mereka berfungsi dan kaya dengan kandungan. Hari-hari ini kandungan kaya dan menarik tidak dapat dibayangkan tanpa benih dari laman media sosial popular - tweet, video, audio, jawatan, foto.
Komponen AMP yang dilanjutkan - antara ciri hebat lain - menyediakan cara yang hebat untuk mengintegrasikan AMP dokumen dengan jenis kandungan sosial yang berbeza.
Bagaimana Komponen AMP Lanjutan berfungsi
Di teras falsafah AMP terdapat Google amalan prestasi terbaik. Untuk meningkatkan masa beban halaman, standard AMP menyekat bagaimana anda boleh menggunakan teknologi front-end. Sebagai contoh, anda tidak boleh menggunakan JavaScript tersuai, gaya luar luaran, dan sebarang elemen HTML yang memuat sumber luaran, seperti
Sebagai pertukaran, anda mendapat sekumpulan Komponen AMP anda boleh gunakan untuk memaparkan sumber luaran, seperti imej, video, audio, iklan, dan lain-lain di tapak anda.
Komponen AMP adalah tag HTML khusus yang boleh digunakan sama dengan tag HTML biasa. Beberapa daripada mereka adalah dibina dalam untuk runtuh AMP, manakala majoriti berfungsi sebagai sambungan. Komponen yang menjadikan penyepaduan media sosial dapat dilakukan pada halaman AMP semua komponen yang dilanjutkan.
Komponen AMP yang dilanjutkan memerlukan anda import skrip kepunyaan di dalam seksyen dokumen HTML AMP anda. Oleh kerana AMP adalah projek sumber terbuka, bilangan komponen lanjutan mungkin berkembang pada masa akan datang.
Dalam catatan ini kami telah mengumpulkan beberapa Komponen AMP yang dapat membantu anda dengan integrasi media sosial. Perlu diingat bahawa versi skrip boleh berubah dari semasa ke semasa, jadi selalu periksa dokumentasi sebelum anda menyertakannya di laman web anda.
1. amp-facebook
Anda sentiasa perlu tentukan dimensi jawatan tertanam, yang bermaksud anda perlu menambah lebar dan a ketinggian atribut dengan nilai dalam piksel integer. Anda boleh mencari dimensi yang betul dengan mengklik pada menu "Benamkan" di bahagian atas catatan Facebook.
Anda juga perlu tambah URL jawatan yang diberikan di dalam data-href atribut. Anda boleh mencari URL dengan mengklik cap waktu cap pos Facebook, dan penyemak imbas akan memasukkan URL unik ke dalam bar alamat.
Jika anda mahu membenamkan video tanpa pos Facebook miliknya, tambah pilihan data-embed-as = "video" atribut
Jika anda mahu membuat respons tersembunyi anda menggunakan susun atur atribut dengan "responsif" nilai. Anda juga boleh menggunakan pilihan susun atur atribut pada komponen AMP lain untuk mengawal susun aturnya.
Contoh kod:
Pratonton kod:
Skrip untuk memasukkan:
2. amp-twitter
Awak boleh membenamkan tweet ke dalam halaman AMP dengan menggunakan
Untuk berbuat demikian, anda perlu nyatakan ID tweet di dalam data-tweetid atribut. Anda boleh mengubah cara tweet dipaparkan dengan menambah pilihan opsyen dari Twitter APi sebagai data- * Atribut HTML5.
Contohnya, dalam contoh di bawah saya menggunakan Twitter API linkColor pilihan paparan sebagai data-pautan-warna (ia data- * format) untuk menukar warna pautan lalai kepada warna yang digunakan Hongkiat.com pada akaun Twitternya.
Contoh kod:
Pratonton kod:
The Twitter saat ini tidak menyediakan API yang menghasilkan nisbah aspek yang tetap Tweet embeds
.
Ini bermakna anda perlu menetapkan secara manual lebar dan ketinggian sifat-sifatnya, sebagai runtime AMP kadang-kadang tidak memaparkan sebahagian (biasanya bahagian bawah) tweet.
Sudah tentu idea yang baik untuk menyemak bagaimana tweet terbenam anda kelihatan seperti sebelum menerbitkan halaman AMP.
Tambah Placeholder
Walaupun tidak diperlukan, dokumentasi mengesyorkan menambah ruang letak sekiranya tweet tidak dimuatkan sekali gus.
The pemegang tempat atribut boleh digunakan pada setiap komponen AMP. Tempat letak adalah ditunjukkan segera jika sumber akhir tidak tersedia. Apabila elemen AMP dimuatkan, ia menyembunyikan tempat letaknya.
Lihatlah bagaimana kod contoh di atas kelihatan seperti dengan pemegang tempat. Di Twitter, saya hanya mengklik pada butang Benamkan Tweet, menyalin-paste blockquote (tanpa skrip pada akhir), dan menambah pemegang tempat atribut kepada tag.
Contoh kod dengan pemegang tempat:
Bagaimana Mengesahkan Laman Mudah Alih Dipercepat (#AMP) #google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15 Ogos 2016
Skrip untuk memasukkan:
3. amp-instagram
Dengan
Anda dikehendaki tentukan dimensi daripada embed dengan lebar dan ketinggian atribut, dan anda juga perlu tambah pengenal daripada foto Instagram atau video menggunakan data-shortcode atribut.
Anda boleh mencari pengenal di akhir URL, contohnya untuk foto di bawah URL itu https://www.instagram.com/p/-PFt7tF8Km/, jadi saya perlu gunakan -PFt7tF8Km sebagai nilai untuk data-shortcode atribut.
Contoh kod:
Pratonton kod:
Untuk susun atur responsif, AMP secara automatik mengira ruang yang diperlukan yang juga termasuk “Krom Instagram” (nama akaun, tarikh, bilangan suka, dan lain-lain).
Ini bermakna anda boleh menggunakan sebarang nilai untuk lebar dan ketinggian, sehingga dua nilai adalah sama (Foto Instagram biasanya persegi), kerana runtime AMP akan mengubah saiz imej mengikut ruang yang tersedia.
Sekiranya foto itu tidak menjadi persegi, anda perlu menentukan sebenarnya lebar dan ketinggian nilai-nilai.
Untuk susun atur tetap, anda perlu termasuk ruang tambahan (atas dan bawah: +48 px, kiri dan kanan: + 8px) diperlukan untuk krom Instagram apabila anda mengira dimensi imej.
Skrip untuk memasukkan:
4. amp-pinterest
Benamkan Widget Pin
Untuk memasukkan widget Pin, anda perlu menentukan dimensi, URL pin yang menggunakan data-url atribut, dan anda juga perlu menambah data-do = "embedPin" atribut.
Contoh kod (saiz lalai):
Sebagai widget Pin default adalah agak kecil, anda juga boleh memilih untuk versi yang lebih besar dengan menggunakan data-lebar = "sederhana" atribut.
Contoh kod (saiz sederhana):
Pratonton kod (saiz sederhana):
Paparkan Butang Pin It
Anda juga boleh tambah butang Pin It ke halaman AMP anda dengan bantuan lebar dan ketinggian dimensi, anda diperlukan untuk menentukan empat sifat untuk memasukkan butang Pin Ia:
data-do = "buttonPin"untuk membiarkan runtime AMP tahu bahawa ini akan menjadi butang Pin Itdata-urldengan URL yang anda mahu kongsidata-mediadengan URL mutlak imej yang anda mahu pengguna pinkandeskripsi datadengan keterangan yang anda mahu muncul dalam bentuk membuat Pin
Disana ada banyak saiz butang yang berbeza, untuk dipilih, periksa dokumen untuk semua saiz yang tersedia.
Contoh kod:
Dalam contoh ini, saya mencipta butang Pin It yang akan membolehkan pengguna mencantumkan imej dari bekas Hongkiat.com ini. Saya menggunakan saiz butang kecil segi empat tepat.
Pratonton kod:
Perhatikan bahawa anda perlu menggunakan CSS tambahan untuk memaparkan butang Pin It di atas imej.
Anda juga boleh membuat butang Pinterest Ikut dengan menggunakan data-do = "buttonFollow" atribut, dan menentukan nama yang anda mahu paparkan di dalam butang Ikut di dalam label data & URL akaun anda di data-href atribut.
Contoh Kod (Butang Ikut):
Skrip untuk memasukkan:
5. amp-soundcloud
SoundCloud adalah platform pengedaran audio yang popular di mana pengguna boleh berkongsi muzik mereka. Dengan bantuan
Komponen ini boleh hanya digunakan dengan ketinggian tetap susun atur yang bermaksud anda hanya perlu menentukan ketinggian, dan lebar akan dikira oleh runtime AMP. Akibatnya pemain audio SoundCloud yang terbenam akan isi semua ruang mendatar yang ada.
The data-visual atribut sama ada benar atau salah (lalai adalah salah).
Dalam kedua-dua mod, anda perlu menggunakan data-trackid atribut kepada tentukan pengecam audio; anda boleh mencari ID audio dengan mengklik butang Kongsi di bawah pemain audio di SoundCloud.com, dan melihat URL bentuk panjang di dalam kod Embed.
Mod Klasik
The Mod Klasik memaparkan imej kecil kecil di sebelah kiri, dan pemain audio di sebelah kanan. Anda boleh mendapatkan nilai yang sesuai untuk ketinggian atribut dari kod Embed pada SoundCloud.com.
Dalam Mod Klasik, anda boleh menentukan warna pemain audio jika anda mahu menggunakannya warna data atribut (anda tidak boleh melakukan ini dalam Mod Visual).
Contoh kod (mod klasik):
Pratonton kod (mod klasik):
Mod Visual
In Mod Visual, imej yang dibentangkan di belakang pemain audio. Di sini, anda juga boleh mencari yang betul ketinggian milik Mod Visual dalam kod Embed pada SoundCloud.com.
Contoh kod (mod visual):
Contoh kod (mod visual):
Jika anda mahu membenamkan audio peribadi, gunakan pilihan data rahsia-token atribut.
Skrip untuk memasukkan:
6. amp-vine
Vine adalah laman perkongsian video pendek di mana anda boleh berkongsi video sepanjang 6-detik dengan rakan-rakan anda. The
Komponen AMP ini agak mudah, anda hanya perlu menambah dimensi, dan ID video Vine dalam data-kebun anggur atribut. Anda boleh mendapatkan ID dari URL setiap Vine.
Oleh kerana Vines adalah petak, jika anda menggunakan susun atur responsif, peraturan yang sama digunakan seperti Instagram embeds; anda boleh menambah sebarang nilai kepada lebar dan ketinggian sifat-sifatnya, sehingga mereka sama mereka akan berfungsi dengan baik.
Contoh kod:
Pratonton kod:
Skrip untuk memasukkan:
7. amp-youtube
Awak boleh menyemai video YouTube pada halaman AMP dengan bantuan
Untuk berbuat demikian, anda perlu menambah dimensi, ditambah ID video dalam data-videoid atribut. Apabila menyatakan lebar dan ketinggian, ia penting perhatikan nisbah aspek.
Anda juga boleh gunakan parameter embeds YouTube dalam dokumen AMP, masukkan nama parameter sahaja selepas data-param- awalan.
Contoh kod:
Dalam contoh ini, saya menggunakannya mulakan Parameter YouTube di data-param-start atribut untuk membuat video bermula pada usia 43-an.
Pratonton kod:
Skrip untuk memasukkan:
Perkhidmatan Perkongsian Video Lain
AMP juga mempunyai komponen yang berkaitan dengan perkhidmatan perkongsian video lain, iaitu bekerja sama dengan
8. amp-sosial-saham
Selain penyemakan media sosial, anda juga boleh memaparkan butang saham sosial pada halaman AMP anda dengan menggunakan
Ciri kongsi sosial ialah sebelum ditetapkan untuk beberapa pembekal, tetapi dengan tetapan yang tepat, anda boleh menggunakannya
Butang Kongsi Pra-Dikonfigurasikan
Butang saham pra-dikonfigurasikan tidak memerlukan terlalu banyak tetapan; anda perlu menentukan lebar (lalai ialah 60px) dan ketinggian (default ialah 44px), dan nama penyedia media sosial di jenis atribut.
Dengan Facebook, anda juga dikehendaki untuk menentukan id apl Facebook di dalam data-param-app_id atribut.
Contoh kod:
Pratonton kod:
Pra-konfigurasi membuat andaian bahawa URL yang ingin anda bagikan adalah URL kanonikal pada halaman semasa, dan teks yang anda ingin sertakan dalam bahagian anda adalah tajuk halaman.
Jika anda ingin menggunakan konfigurasi lain, anda boleh melakukannya dengan yang berikut tiga sifat pilihan:
teks-datauntuk teks yang anda ingin sertakan dalam bahagiandata-urluntuk URL yang ingin anda kongsiatribusi datauntuk nama orang atau pembekal yang anda mahu bahagian anda dikaitkan
Butang Saham Tak Dikonfigurasikan
Untuk memaparkan butang kongsi sosial penyedia yang tidak dikonfigurasikan, seperti WhatsApp, anda perlu tentukan protokol tersuai pembekal di dalam data-share-endpoint atribut. Semak di dalam dokumen bagaimana anda boleh melakukan ini.
Skrip untuk memasukkan:
