Membuat Tombol Share di Blogger (Add Social Share Buttons)

oleh

Apakah tombol share itu penting?

Tidak perlu diragukan lagi! medsos memegang kunci dalam dunia internet marketing Memudahkan pengunjung blog melakukan share konten adalah bagian dari optimalisasi SEO

Selain itu tombol share juga secara kasat mata membuat desain web kita tampak elegan, indah dan professional

Membuat Tombol Share di Blogger

Di dalam template buatan gurublogger sendiri sudah ter embed tombol sharing di tengah (antara content dan sidebar kanan)

Untuk teman teman yang belum menggunakan template bawaan gurublogger cara membuat tombol social share ini juga sebenarnya sama.

Membuat Tombol Facebook Share

Untuk membuat tombol sharing dari medsos, silahkan kunjungi medsos yang bersangkutan kemudian lihat di bagian developers bagaimana cara melakukan setting

Kita akan menggunakan tombol sharingnya facebook sebagai contoh, maka cukup kunjungi developers.facebook.com/products (ada di bagian social integration)

Selanjutnya di bagian pengaturan pilih plugin share button –> Facebook Share

Silahkan ikuti langakah langkah berikut ini untuk membuat tombol share di blogger:

  1. Klik tipe layout kemudian pilih apakah button, button count, atau box count
  2. Pilih button size untuk mengatur besarnya ukuran tombol share
  3. Akan ditampilkan preview tombol share facebook
  4. Bila pengaturan sudah selesai silahkan lanjutkan ke Get Code
  5. Pilih Javascript SDK bila ingin memasang menggunakan javascript
  6. Pilih i frame bila tidak (gurublogger mencontohkan dengan i frame)
  7. Pilih App ID (kalau website baru dengan akun fb sendiri silahkan daftar APP Id baru)
  8. Copy code kedalam gadget HTML/Javascript blogger, atau copy dimanapun teman2 ingin memunculkan tombol share

Preview langkah langkahnya adalah seperti gambar dibawah ini:

Mudah bukan?

Untuk memasang tweet dan like instagram caranya hampir sama, silahkan kunjungi developer medsos masing masing

TRENDING :  Cara Merubah Warna Tulisan (Font) Di Postingan Blogspot

Tombol Share di Blogger Ala Gurublogger

Tombol social share ala gurublogger mungkin berbeda dengan tombol share yang teman teman sering jumpai

Pertama karena gurublogger menyediakan elemen khusus untuk menempatkan tombol social share diantara main content dengan sidebar

Pemikiran dibalik itu adalah ketika user selesai membaca konten utama (berarti posisi dia sekarang di halaman paling bawah website) maka dia akan melihat menu sebelah kanan untuk klik link lain (mau baca konten yang lain)

Ketika mouse digerakkan dari konten menuju sidebar maka pembaca akan ketemu dengan social share terlebih dahulu (posisinya strategis)…. tinggal bedoa semoga dia mau membagikan artikel kita di medsos 😀

Kedua, gurublogger menggunakan plugn dari Addthis jadi sekali pasang semua medsos ada, mulai dari tweeter instagram sampai whatsApp

Untuk memasang plugin ini silahkan kunjungi –> Addthis (gratis)

Sebelum bisa menggunakan Addthis teman teman harus sudah mendaftar terlebih dahulu, bila sudah berikut ini adalah langkah langkah setting Addthis:

  1. Pada menu Tools pilih Add New Tool
  2. Kemudian pilih share button
  3. Kemudian pilih floating
  4. Kemudian klik continue
  5. Setting tipe tombolnya kemudian Activate Tool

Contekan settingan addthisnya gurublogger:

Untuk mendapatkan kode script Add this silahkan klik pada tombol Get The Code :

Memasang Add This di Blogger

Waktunya memasang script add this, mohon dibaca baik baik.

Langkah 1: Hasil script yang kita dapatkan dari Add this silahkan ganti tanda “petik dua” dengan tanda ‘petik satu’   contoh: ” –> ‘  (jangan manual, masukin notepad trus gunakan ctrl + H)

Bila tidak mau repot repot silahkan di parse htmlnya

Langkah 2: tambahkan kode async=’async’ setelah tag pembuka <script sehingga codenya menjadi kurang lebih seperti ini

<!– Go to www.addthis.com/dashboard to customize your tools –>

TRENDING :  Menghilangkan Tanggal Postingan Blog Atau Optimasi Tanggal?

<script async=’async’ type=’text/javascript’ src=’//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-8475465457′ />

Bila sudah maka selanjutnya copy kode tersebut di akhir template blogger yang teman teman gunakan, sebelum closing tag html

<— Copy Disini
</body>
</html>

Langkah 3: Waktunya memanggil script supaya muncul

Silahkan buka template blogger teman teman dan temukan kode berikut ini:

<img alt=’medsos-test’ src=’https://1.bp.blogspot.com/-vhke9OpRqPw/XuwbvRx840I/AAAAAAAAG-Y/kEA4YrA6F0cPZT8rkQzIr-mnGeWTh_LWACK4BGAsYHg/medsos-test.png’/>

Ganti kode tersebut dengan kode berikut ini

<div class=’addthis_inline_share_toolbox’/>

Untuk yang tidak menggunakan template gurublogger cukup buat gadget html/javascript baru kemudian paste script disitu >> save >> selesai

Bila semua berjalan lancar, seharusnya tombol share di blogger teman2 sudah aktif dan pengunjung blog sudah bisa menggunakannya

Kesimpulan

Facebook, Twitter, Instagram, Linkedin, Whats app, Add this dll secara keseluruhan adalah pihak ketiga.

Penggunaan script pihak ketiga secara umum akan memperlambat performa web “sedikit”, jadi silahkan dipikir baik baik apakah worth it untuk dilakukan. Bila tidak ya tidak usah dipasang !!

Menaruh script di akhir kode html membuat script tersebut loading paling akhir, dan penggunaan asyncronize juga adalah upaya agar web tidak menjadi lambat walaupun menggunakan plugin pihak ke3

Silahkan tentukan pilihan dan modifikasi sesuai selera