Membuat Tombol Share Sosial Media di Drupal Tanpa Module

Tombol sharing sosial media pada sebuah website memliki sebuah peranan yang sangat penting, karena dengan adanya tombol sharing/berbagi ke sosial media tersebut dapat membuat situs dikenal secara lebih luas, memang itu sebenarnya tujuan utamanya.

Cara paling mudah membuat tombol berbagi/share sosial media di drupal adalah dengan menggunakan module – module yang memang dirancang khusus untuk membuat tombol share, ada banyak modul social sharing yang bisa Anda temukan di drupal, hanya tinggal instal aktifkan kemudian konfigurasi penempatannya, maka nanti tombol share akan secara otomatis muncul pada situs drupal Anda.

Walau memang Drupal sudah menyediakan module share social media, tapi terkadang saya pribadi lebih menyukai untuk membuat tombol sharing sosial media secara manual, karena saya pikir kalau hanya sekedar tombol share, rasanya tidak perlu bergantung pada module atau menginstal module share.

Disini saya ingin sedikit berbagi tentang bagaiman tata cara membuat tombol share di drupal tanpa menggunakan module. “How to create share button social media in drupal without module?” Lalu bagaimana membuat tombol share sosial media tanpa menggunakan module ?

Perlu diperhatikan bahwa dalam contoh kali ini Saya menggunakan template bootstrap, dimana saya telah membuat subtheme untuk template tersebut. Didalam Template subtheme telah saya tambahkan beberapa file, salah satunya adalah file node.tpl.php, dan file tersebutlah yang nantinya akan menjadi target untuk diedit atau ditambahkan tombol share. Jika belum memahami tentang ini silahkan lihat artikel Instalasi dan Konfigurasi Template Bootstrap Pada Drupal 7

File node.tpl.php yang saya tambahkan ke file Template subtheme merupakan file yang secara default mengatur tata letak atau isi artikel, sehingga bila seandainya ingin menambahkan tombol share di dalam artikel, maka perlu menambahkannya ke file node.tpl.php

Membuat Tombol Share Sosial Media di Drupal Tanpa Module

Pertama tambahkan terlebih dahulu kode CSS untuk tombol sharing sosial media ke file custom style yang terdapat pada template. Kalau tidak mau repot silahkan pakai style CSS yang pernah saya buat pada artikel “Membuat Tombol Share Pop-up di Blogspot ”
Selanjutnya buka file node.tpl.php yang terdapat pada bootstrap_subtheme\templates\. Kurang lebih nanti anda akan melihat kode – kode seperti berikut

Pada bagian atas <?php print render($content['comments']); ?> tambahkan kode berikut untuk membuat tombol share sosial media

     <div class="shareroot">
<div class='sh-title'>
 <strong>SHARE THIS</strong>
 </div>

<a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php global $base_root; print $base_root . $node_url; ?>" onClick="window.open(this.href, 'mywin',
'left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fa fa-facebook color-facebook"></i></a>
<a class="twitter" href="https://twitter.com/intent/tweet?text=<?php print $title; ?>&amp;url=<?php global $base_root; print $base_root . $node_url; ?>&amp;via=MXBLOG" onClick="window.open(this.href, 'mywin',
'left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fa fa-twitter color-twitter"></i></a>
<a class="googleplus" href="http://plus.google.com/share?url=<?php global $base_root; print $base_root . $node_url; ?>" onClick="window.open(this.href, 'mywin',
'left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="fa fa-google-plus color-google"></i></a>
</div>

Perhatikan pada bagian kode url=<?php global $base_root; print $base_root . $node_url; ?>

global $base_root merupakan kode untuk memanggil fungsi global root domain situs anda (domian utama), global $base_root bisa saja hanya ditambahkan satu kali saja pada bagian pertama kode sharing, dan kode share selanjutnya tidak perlu menambahkan kode global $base_root; karena kode kedua dan ketiga akan mengambil data dari global $base root yang pertama. Hal tersebut tidak akan berlaku jika misalnya global $base_root ditaruh dibagian akhir, maka kode sharing yang kedua dan pertama tidak akan bisa mengambil data dari global $base_root yang ditaruh di kode sharing terakhir.

Dalam contoh kasus ini saya menambahkan kode global $base_root; pada setiap kode sharing, baik facebook, twitter, maupun google+
Kode $base_root akan mencetak nilai root domain pada address bar
kode $node_url akan mencetak nila content type dan url dari artikel

Sampai disini proses pembuatan tombol share sosial media di drupal tanpa module sudah selesai. Jika salah satu tombol share di klik, misalnya tombol twitter, maka hasilnya akan terlihat seperti berikut

Teknik penambahan tombol share diatas tidak akan berlaku untuk jenis content type yang misalnya sudah ditambahkan fungsi / module seperti Display Suite, maka tekniknya pun nanti akan sedikit berbeda.

Baca juga :

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Membuat Tombol Share Sosial Media di Drupal Tanpa Module

0 Response to "Membuat Tombol Share Sosial Media di Drupal Tanpa Module"

Post a Comment