AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-social-share

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?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub