Membuat Tombol Icon Sosial Media Dinamis pada OpenCart

Bermain sosial media merupakan suatu kebiasaan sekarang ini, semua orang ingin saling bertukar informasi dengan tujuannya masing – masing, entah itu positif maupun negatif. Salah satu sisi positif media sosial adalah memanfaatkannya untuk sarana promosi produk toko online, menyebarkan produk di media sosial terbukti ampuh untuk mendatangkan potensi pembelian.

Pada artikel kali ini saya akan memberikan tutorial untuk memasang tombol akun media sosial di bagian deskripsi produk opencart, tujuannya saat pengunjung melihat-lihat produk lalu mengklik tombol media sosial yang dibuat, maka akan langsung diarahkan ke akun media sosial pemilik toko.

Sebenarnya opencart sudah menyediakan tombol media sosial seperti gambar dibawah ini, namun tombolnya terlalu kecil dan ada beberapa fungsi yang mungkin sebagian orang yang tidak membutuhkannya.

Pada artikel kali ini kita akan menimpa tombol media sosial bawaan tersebut dengan tombol media sosial yang baru, anda bisa langsung mengikuti tahapannya seperti gambar dibawah ini.

Langkah 1
Langkah pertama tentu saja anda perlu mengunjungi https://www.addthis.com, tampilan depan akan seperti gambar dibawah ini. Untuk menggunakan fitur pada website ini kita perlu mendaftar terlebih dahulu, supaya tidak terlalu banyak mengisi formulir pendaftaran silahkan klik tombol daftar melalui google seperti gambar dibawah ini.

Langkah 2
Selanjutnya pilih akun google yang ingin digunakan.

Langkah 3
Pada langkah ini saya sedikit heran kok disuruh masukin email lagi (kan sudah pakai google), tapi ya sudahlah isi saja, setelah selesai klik register.

Langkah 4
Setelah registrasi anda akan di alihkan kehalaman awal lagi, silahkan klik Dashboard di pojok kanan atas ya. Pada halaman dashboard tampilannya akan seperti gambar dibawah ini.

Langkah 5
Sangat banyak fitur yang ditawarkan oleh situs addThis ini, tapi untuk saat ini kita hanya akan mencoba fitur follow buttons, silahkan di klik menu follow buttons.

Langkah 6
Ada 2 pilihan layout disini yaitu Header dan Inline, silahkan pilih sesuai keinginan, ada previewnya juga untuk mengetahui bagaimana tampilannya. Kalau saya di tutorial kali ini memilih yang inline, jika sudah selesai klik tombol continue.

Langkah 7
Selanjutnya kita akan mengatur media sosial apa saja yang ditampilkan dan juga silahkan isi username medsosnya ya, untuk menambahkan media sosial baru silahkan klik tombol Add more services, sebenarnya masih banyak fitur yang ditawarkan disini silahkan klik activate tool jika sudah selesai.

Langkah 8
Akhirnya kita mendapatkan kode untuk ditempelkan pada toko online opencart, silahkan klik code view only jika hanya ingin menampilkan kodenya saja. Untuk sekarang biarkan saja dulu, silahkan buka tab baru pada browser dan pergi ke bagian admin toko online opencart.

Langkah 9
Pada bagian admin ini saya akan mengedit tema website opencart,caranya adalah pergi ke menu Design > Theme Editor > template product, atau bisa dilihat pada gambar dibawah ini.

Langkah 10
Setelah template product terbuka silahkan pilih file product.twig untuk di edit, dan cari tulisan AddThis Button yang merupakan tombol media sosial bawaan dari opencart. Sedikit info saya menemukannya pada baris kode 292, namun setiap versi opencart mungkin berbeda jadi coba cari saja ya.

Setelah menemukannya silahkan hapus tombol bawaannya, lalu tempelkan 2 kode yang sudah didapatkan sebelumnya, setelah selesai klik save. Anda bisa melihat gambar dibawah ini untuk lebih jelasnya.

Selesai sudah tutorial ini, untuk memastikannya berhasil silahkan buka toko online opencart dan pergi ke halaman produk, di sana terdapat tombol media sosial yang baru kita buat.

Semoga berhasil ya, jangan lupa juga lihat-lihat artikel lainnya dan produk – produk premium kami, cukup sekian sampai jumpa.