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

amp-social-share

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

The share tracking feature is under development.

 

Required Scripts

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Supported Layouts

Menampilkan tombol berbagi di platform sosial.

Skrip yang Diperlukan
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Tata Letak yang Didukung container, fill, fixed, fixed-height, flex-item, nodisplay, responsive
Contoh Lihat contoh amp-social-share di AMP By Example.

Ringkasan

Komponen amp-social-share menampilkan tombol berbagi untuk sejumlah penyedia media sosial.

Contoh

Contoh: Tombol berbagi sosial dasar

Tombol berbagi otomatis menebak beberapa setelan default untuk sejumlah penyedia yang dikonfigurasi sebelumnya. Tombol berbagi mengasumsikan bahwa URL kanonis dokumen saat ini adalah URL yang ingin Anda bagikan, dan judul halamannya adalah teks yang ingin Anda bagikan.

<amp-social-share type="twitter"></amp-social-share>

Contoh: Meneruskan parameter

Jika ingin meneruskan parameter ke endpoint berbagi, Anda dapat menentukan data-param-<attribute> yang akan ditambahkan ke akhir endpoint berbagi.

<amp-social-share type="linkedin" width="60" height="44"
    data-param-text="Hello world"
    data-param-url="https://example.com/">
</amp-social-share>

LinkedIn adalah salah satu penyedia yang dikonfigurasi sebelumnya, sehingga Anda tidak perlu menyediakan atribut data-share-endpoint.

Atribut

type (wajib) Memilih jenis penyedia. Atribut ini wajib baik untuk penyedia yang telah maupun yang tidak dikonfigurasi sebelumnya.
data-target Menentukan tempat di mana target akan dibuka. Defaultnya adalah _blank untuk semua kasus selain email/SMS pada iOS, yang dalam hal ini target ditetapkan ke _top. Harap perhatikan bahwa kami hanya menyarankan penggunaan penggantian ini untuk email.
data-share-endpoint Atribut ini wajib untuk penyedia yang tidak dikonfigurasi.
Beberapa penyedia populer memiliki endpoint berbagi yang dikonfigurasi sebelumnya. Untuk selengkapnya, baca bagian Penyedia yang Dikonfigurasi Sebelumnya. Untuk penyedia yang tidak dikonfigurasi, Anda harus menentukan endpoint berbagi.
data-param-* Semua atribut dengan prefiks data-param-* diubah menjadi parameter URL dan diteruskan ke endpoint berbagi.

Penyedia yang dikonfigurasi sebelumnya

Komponen amp-social-share menyediakan beberapa penyedia yang dikonfigurasi sebelumnya yang mengetahui endpoint berbaginya serta beberapa parameter default.

Penyedia Jenis Parameter
Web Share API (memicu dialog berbagi OS) system
  • data-param-text: opsional, didefaultkan ke: "Judul halaman saat ini"
  • data-mode: opsional, jika ditetapkan ke replace, semua opsi berbagi lainnya akan dihapus.
Email email
  • data-param-subject: opsional, didefaultkan ke: Judul halaman saat ini
  • data-param-body: opsional, didefaultkan ke: URL rel=canonical
  • data-param-recipient: opsional, didefaultkan ke: '' (string kosong)
Facebook facebook
  • data-param-app_id: wajib, didefaultkan ke: none. Parameter ini adalah app_id Facebook yang diperlukan untuk dialog Berbagi Facebook.
  • data-param-href: opsional, didefaultkan ke: URL rel=canonical
  • data-param-quote: opsional. Dapat digunakan untuk membagikan kutipan atau teks.
LinkedIn linkedin
  • data-param-url: opsional, didefaultkan ke: URL rel=canonical
Pinterest pinterest
  • data-param-media: opsional (tapi sangat direkomendasikan untuk ditetapkan), didefaultkan ke: none. URL untuk media yang akan dibagikan di Pinterest. Jika tidak ditetapkan, pengguna akhir akan diminta untuk mengupload media oleh Pinterest.
  • data-param-url: opsional, didefaultkan ke: URL rel=canonical
  • data-param-description: opsional, didefaultkan ke: Judul halaman saat ini
G+ gplus
  • data-param-url: opsional, didefaultkan ke: URL rel=canonical
Tumblr tumblr
  • data-param-url: opsional, didefaultkan ke: URL rel=canonical
  • data-param-text: opsional, didefaultkan ke: Judul halaman saat ini
Twitter twitter
  • data-param-url: opsional, didefaultkan ke: URL rel=canonical
  • data-param-text: opsional, didefaultkan ke: Judul halaman saat ini
Whatsapp whatsapp
  • data-param-text: opsional, didefaultkan ke: "Judul halaman saat ini - URL halaman saat ini"
LINE line
  • data-param-url: opsional, didefaultkan ke: URL rel=canonical
  • data-param-text: opsional, didefaultkan ke: Judul halaman saat ini
SMS sms
  • data-param-body: opsional, didefaultkan ke: URL rel=title - rel=canonical

Penyedia yang tidak dikonfigurasi

Selain penyedia yang dikonfigurasi sebelumnya, Anda dapat menggunakan penyedia yang tidak dikonfigurasi dengan menentukan atribut tambahan pada komponen amp-social-share.

Contoh: Membuat tombol berbagi untuk penyedia yang tidak dikonfigurasi

Contoh berikut membuat tombol berbagi melalui Facebook Messenger dengan menetapkan atribut data-share-endpoint ke endpoint yang benar untuk protokol kustom Facebook Messenger.

<amp-social-share type="facebookmessenger"
    data-share-endpoint="fb-messenger://share"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

Karena penyedia ini tidak dikonfigurasi sebelumnya, Anda harus membuat gambar dan gaya tombol yang sesuai untuk penyedia tersebut.

Gaya

Gaya Default

Secara default, amp-social-share menyertakan beberapa penyedia populer yang dikonfigurasi sebelumnya. Tombol untuk penyedia tersebut disesuaikan dengan warna dan logo resmi penyedia. Lebar default adalah 60 piksel dan tinggi default adalah 44 piksel.

Kunjungi AMP Start untuk link berbagi yang responsif dan sudah diberi gaya sebelumnya, yang dapat digunakan di halaman AMP Anda.

Gaya Kustom

Terkadang Anda ingin memberikan gaya Anda sendiri. Anda dapat mengganti gaya yang disediakan dengan mudah, seperti berikut:

amp-social-share[type="twitter"] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

Penggantian Variabel

Anda dapat menggunakan penggantian variabel AMP global dalam elemen <amp-social-share>. Pada contoh di bawah, TITLE diganti dengan judul halaman dan CANONICAL_URL diganti dengan URL kanonis dokumen.

<amp-social-share type="whatsapp"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

Validasi

Lihat aturan amp-social-share dalam spesifikasi validator AMP.

Perlu bantuan lainnya?

Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.

Kunjungi Stack Overflow
Menemukan bug atau ada fitur yang kurang?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Kunjungi GitHub