Cara Membuat Tombol Bagikan untuk Situs Anda Langkah-demi-Langkah

Diterbitkan: 2021-05-21

Tombol berbagi sosial adalah elemen tak terpisahkan dari setiap situs web. Baik itu blog pribadi atau bisnis, portofolio online, atau proyek eCommerce, tombol sosial memungkinkan pelanggan dengan mudah menyebarkan berita tentang konten Anda di Facebook, Twitter, Instagram, atau Pinterest. Saat menerapkan tombol berbagi sosial yang mudah ke sumber daya web Anda, Anda dapat memperluas jangkauan Anda secara signifikan dan menyambut klien baru untuk datang ke situs Anda untuk mencari konten atau barang berharga. Kekuatan jaringan media sosial tidak boleh diremehkan akhir-akhir ini. Jika bisnis tidak dapat ditemukan di Facebook atau Instagram, bisnis kehilangan kesempatan untuk menjangkau audiens targetnya dan memasarkan barang dan jasanya kepada lebih banyak orang. Seperti namanya, tombol berbagi sosial membuat konten Anda lebih dapat dibagikan di web. Ini adalah praktik umum bagi pengguna modern untuk membagikan tautan ke produk pilihan mereka di halaman Facebook mereka. Setiap pos sosial dapat dijangkau oleh pengikut dengan minat dan preferensi yang sama seperti yang dimiliki klien Anda.

Selanjutnya, dengan tombol media sosial, Anda dapat dengan mudah menyiarkan konten Anda di grup media sosial atau ke individu yang dipilih. Jumlah share media sosial menunjukkan konten yang menurut orang lebih berharga dan menarik. Jadi, banyak brand yang bekerja keras untuk memperbanyak share media sosial dan meningkatkan brand awareness mereka.

Menyebarkan berita tentang potongan konten yang disukai bisa menjadi mudah hanya dengan melakukan beberapa klik. Tombol sosial memungkinkan pelanggan Anda menyiarkan tautan saat mereka tetap berada di situs web Anda. Dalam kebanyakan kasus, ini hanya melibatkan mengetuk tombol bagikan dan memilih platform media sosial tempat mereka ingin tautan Anda muncul.

Cara Membuat Tombol Bagikan Langkah-demi-Langkah

Internet penuh dengan tombol berbagi yang berbeda, tugas utamanya adalah memilih yang tepat. Terkadang Anda bahkan tidak mengerti tombol sosial apa yang Anda butuhkan di blog Anda sendiri. Terkadang Anda tidak dapat menemukan tombol dengan desain yang sesuai dengan kebutuhan Anda. Terkadang Anda tidak dapat menemukan cara sederhana dan keren untuk menerapkan tombol berbagi di blog Anda. Jangan panik! Dalam artikel ini, kami akan menunjukkan cara membuat beberapa tombol berbagi dasar dan sosial.

Kursus Desain Web

  • Kelas coding online untuk pembelajaran di rumah
  • Paket Penguasaan Photoshop Lengkap

Jika Anda tidak ingin berurusan dengan kode yang besar, penuh sesak, dan kustomisasi detail yang rumit, tutorial ini tepat untuk Anda. Bahkan pemula HTML akan merasa mudah untuk diikuti. Jadi, kencangkan sabuk pengaman Anda dan mari kita mulai!

Langkah 1

Hal pertama yang harus Anda lakukan adalah membuka file HTML Anda dan paste kode di bawah ini

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
atau
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Cara Membuat Tombol Bagikan untuk Situs Anda Langkah-demi-Langkah 1

Langkah 2

Sekarang buat file js yang berisi informasi seperti itu:

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};

Itu saja :) Metode yang sangat sederhana untuk melacak statistik mengklik tombol bagikan yang ditempatkan langsung di halaman berbagi. Masalah ini diselesaikan dengan bantuan tabel dalam database dan ajax sederhana:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Skrip ini mendapatkan id dari URL, menambahkan label ke tabel dan/atau menambah penghitung satu per satu untuk jejaring sosial tertentu. Ini adalah solusi sederhana untuk tombol berbagi. Anda dapat dengan mudah mengubah tampilan tombol Anda melalui CSS, Anda dapat mendesain tombol Anda sendiri di Photoshop dan menggunakannya di sini. Anda dapat melakukan hampir semuanya!

Tentu saja, contoh ini sedikit primitif, tetapi ini adalah poin yang bagus untuk mulai membuat tombol berbagi keren Anda sendiri. Mencobanya!

Jaringan media sosial populer memungkinkan Anda menghasilkan potongan kode khusus yang dapat kami sematkan ke dalam posting atau halaman situs web untuk memungkinkan orang menyiarkan konten pilihan mereka. Facebook dan Twitter adalah dua jejaring sosial paling populer yang mendukung fungsi masing-masing. Mari kita lihat bagaimana mengintegrasikan tombol sosial tersebut ke situs Anda.

Cara Menambahkan Tombol Bagikan Facebook

Tombol berbagi Facebook memungkinkan pelanggan Anda membagikan tautan yang mengarahkan ke pos atau penawaran di situs web Anda dengan sepotong teks yang ditulis khusus.

Untuk menambahkan tombol ini ke situs web Anda, Anda harus terlebih dahulu membuka halaman ini.

Sekarang mari kita lihat apa arti beberapa field pada halaman setup.

  • URL untuk Suka - bidang ini menambahkan halaman situs yang ingin kita bagikan di Facebook.
  • Lebar - lebar tombol diatur di sini.
  • Kata kerja untuk ditampilkan - di sini kita dapat memilih teks di tombol "Suka" atau "Saya sarankan".
  • Skema Warna - Di sini Anda dapat memilih desain tombol untuk situs terang atau gelap.
  • Font - pilih font untuk label tombol.

Setelah kami memilih pengaturan, cari tombol "Dapatkan Kode" dan klik di atasnya. Selanjutnya, jendela dengan kode akan ditampilkan, itu juga perlu dimasukkan dalam dua tahap:

Masukkan kode tepat setelah tag <body>.

Kode untuk menampilkan tombol:

Rekatkan kode ini di mana tombol dari facebook akan ditampilkan:

Cara Menambahkan Tombol Bagikan Twitter

Saat menambahkan tombol berbagi Twitter ke situs web Anda, ada beberapa hal yang disarankan pengembang Twitter untuk Anda ingat:

  • Jika pengguna tidak masuk ke akun Twitter-nya, mereka akan diminta untuk masuk ke tweel pesan Anda.
  • Tweet akan menautkan ke halaman web yang telah dikunjungi seseorang. Pengguna mungkin merasa bebas untuk menyesuaikan pesan tweet sesuai keinginannya.
  • Setelah mengklik "Tweet", kotak popup akan menampilkan daftar akun terkait di Twitter. Seorang pengguna dapat memutuskan ke mana harus mengikuti mereka atau mengabaikannya.
  • Tidak ada batasan berapa kali per hari dan pengguna yang sama dapat men-tweet sesuatu ke timeline.

Untuk menambahkan tombol berbagi Twitter, lakukan hal berikut:

  • Buka publish.twitter.com dan ketuk Tombol Twitter.
  • Pilih jenis tombol berbagi Twitter yang ingin Anda tambahkan ke situs Anda.
  • Sesuaikan Tweet dan pesan yang akan dikandungnya sambil menyebutkan @akun yang ingin Anda sebutkan.
  • Setelah selesai, salin dan tempel kode ke situs Anda.

Itu cukup banyak. Kami harap Anda akan menemukan panduan ini bermanfaat. Hal terbaik tentang itu adalah Anda tidak harus memiliki keterampilan pengkodean yang mendalam untuk menambahkan tombol berbagi sosial ke situs web Anda. Pembuat kode otomatis memberi Anda solusi siap pakai yang dapat Anda sesuaikan, salin, dan tempel secara intuitif ke HTML situs web Anda.