Beranda
»
Artikel
»
Membagikan Konten Web Via Sosial Media Sharing Button Tanpa Plugin

Membagikan Konten Web Via Sosial Media Sharing Button Tanpa Plugin

Sosial media sebagai sarana bertukar informasi dan konten antar sesama pengguna, dapat digunakan sebagai media untuk menyebarkan konten suatu website dengan cepat. Membagikan konten website melalui media sosial seperti facebook, twitter, pinterest merupakan hal yang umum dilakukan oleh sebagian besar website. Hal ini akan membawa keuntungan tersendiri berupa meningkatnya traffic pengaksesan website via sosial media.

Sosial media dikenal sebagai salah satu marketing channel (saluran pemasaran) yang sangat efektif untuk menjaring lebih banyak pengunjung ke website. Sosial media merupakan sumber lalu lintas kedua dalam pengaksesan suatu website setelah pencarian organik pada mesin pencari seperti google, msn, bing dan lainnya.

Bagi anda yang sudah memiliki website yang sudah online tentu saja dapat menggunakan sarana sosial media untuk meningkatkan performa dan traffic website anda. Ada beberapa cara untuk membagikan halaman website melalui media sosial seperti menggunakan plugin pihak ketiga dan memasangnya pada website anda. Situs addthis.com dan sharethis.com menyediakan tombol berbagi via berbagai platform sosial media melalui plugin yang mereka miliki.

Namun penggunaan plugin via pihak ketiga memiliki konsekuensi tersendiri seperti loading halaman web yang akan terasa lebih lambat. Anda juga tidak akan leluasa dalam memilih jenis platform tertentu yang akan digunakan. Untuk itu anda bisa membuat sendiri script untuk berbagi konten website via sosial media.

Menambahkan Sosial Media Sharing Button

Untuk menambahkan sosial media sharing button, hal pertama yang perlu disiapkan adalah halaman atau konten website itu sendiri. Pada umumnya, sharing button terletak di bagian bawah setelah kolom artikel. Sharing button juga bisa diposisikan pada bagian paling bawah halaman (footer) dengan sifat diam pada tempatnya jika dilakukan scrolling.

Berikut ini contoh halaman index yang di dalamnya berisi tombol sosial media. Jika tombol tersebut diklik, halaman baru akan terbuka guna membagi konten website via platform sosial media :

HTML

<!DOCTYPE html>
<html>
<head>
<title>Menambahkan Sosial Media Sharing Button</title>
<style type="text/css">
body{ 
   padding: 10px 
}
.sosmed_inline img{
   display:inline;
   margin:2px;
   border-radius:4px;
   width:44px;
   opacity:1;
   cursor:pointer;
}
.sosmed_inline img:hover{
   opacity:0.8;
   transform:scale(1);
}
</style>
</head>
<body>
   <h1>Menambahkan Sosial Media Sharing Button</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
   <p>Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus. Ut elementum dictum mi, non gravida est condimentum iaculis. Suspendisse magna mi, dapibus sit amet bibendum vel, dapibus laoreet tortor. Nam lobortis sapien ultricies, suscipit risus non, blandit purus. In hac habitasse platea dictumst. Praesent eu pretium nibh. Maecenas nec elementum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p><b>Share this artikel :</b></p>
   <p class="sosmed_inline">
   <img src="res/facebook.png" onclick="_fb();" alt="facebook">
   <img src="res/reddit.png" onclick="_reddit();" alt="reddit">
   <img src="res/twitter.png" onclick="_twitter();" alt="twitter">
   <img src="res/email.png" onclick="_email();" alt="email">
   <img src="res/whatapps.png" onclick="_whatapps();" alt="whatapps">
   <img src="res/pinterest.png" onclick="_pinterest();" alt="pinterest">
   <img src="res/gmail.png" onclick="_gmail();" alt="gmail">
   <img src="res/telegram.png" onclick="_telegram();" alt="telegram">
   <img src="res/line.png" onclick="_line();" alt="line">
   <img src="res/yahoomail.png" onclick="_yahoomail();" alt="yahoomail">
   <img src="res/skype.png" onclick="_skype();" alt="skype">
   </p>
<script>
   var title = "Sosial media sharing button";
   var deskripsi= "Membagi konten web via sosial media";
   var currentLocation = window.location;
   var top = (screen.height - 570) / 2;
   var left = (screen.width - 570) / 2;
   var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
   function _fb(){
     var url="https://web.facebook.com/sharer.php?u=" + encodeURI(currentLocation);
     window.open(url,'NewWindow',params);
   }
   function _reddit(){
     var url="https://reddit.com/submit?url=" + encodeURI(currentLocation) + "&title="+encodeURI(title);
     window.open(url,'NewWindow',params);
   }
   function _twitter(){
     var url="https://twitter.com/intent/tweet?url=" + encodeURI(currentLocation) + "&text="+encodeURI(deskripsi);
     window.open(url,'NewWindow',params);
   }
   function _email(){
     var url="mailto:?subject=" + encodeURI(title) + "&body=" +encodeURI(currentLocation) + encodeURI(deskripsi);
     window.open(url,'NewWindow',params);
   }
   function _whatapps(){
     var url="https://api.whatsapp.com/send?phone=&text=" + encodeURI(title +" "+deskripsi);
     window.open(url,'NewWindow',params);
   }
   function _pinterest(){
     var url="http://pinterest.com/pin/create/button/?url="+ encodeURIcurrentLocation);
     window.open(url,'NewWindow',params);
   }
   function _gmail(){
     var url="https://mail.google.com/mail/?view=cm&to=&su=" + encodeURI(title) + "&body=" + encodeURI(currentLocation + deskripsi);
     window.open(url,'NewWindow',params);
   }
   function _telegram(){
     var url="https://telegram.me/share/url?url=" + encodeURI(currentLocation) + "&text=" +encodeURI(title + deskripsi);
     window.open(url,'NewWindow',params);
   }
   function _line(){
     var url="https://lineit.line.me/share/ui?url=" + encodeURI(currentLocation) + "&text=" +encodeURI(title + deskripsi);
     window.open(url,'NewWindow',params);
   }
   function _yahoomail(){
     var url="http://compose.mail.yahoo.com/?to=&subject="+encodeURI(title)+"&body="+encodeURI(currentLocation + deskripsi);
     window.open(url,'NewWindow',params);
   }
   function _skype(){
     var url="https://web.skype.com/share?url=" + encodeURI(currentLocation) + "&text=" +encodeURI(title + deskripsi);
     window.open(url,'NewWindow',params);
   }
</script>
</body>
</html>

Penjelasan :
Tombol sosial media di sini menggunakan gambar secara langsung. Keseluruhan gambar (image) sosial media dapat didownload secara lengkap pada bagian akhir artikel ini via download source code. Tombol sosial media ditempatkan secara inline berjajar. Jika tombol tersebut diklik, akan memicu event onClick() javascript dan akan memanggil fungsi yang berbeda tiap-tiap tombolnya.

Sebagai contoh, jika tombol berbagi via facebook diklik akan memanggil fungsi _fb();. Fungsi ini akan membuat variable url dengan tujuan https://web.facebook.com/sharer.php?u=" + currentLocation. Kemudian halaman baru akan muncul untuk berbagi konten via sosial media.

Tampilan saat halaman index dimuat :

berbagi konten web via sosial media sharing button

Tampilan saat tombol berbagi via facebook diklik, terlihat menu login facebook muncul :

Tampilan saat pengguna sudah melakukan login dan konten website siap dibagikan via facebook :

URL Parameter Content Sharing Pada Berbagai Sosial Media

Setiap platform sosial media mempunyai metode khusus dalam melakukan kegiatan berbagi konten. Misalnya pada platform facebook, untuk berbagi konten dengan dilakukan dengan cara memanggil url https://web.facebook.com/sharer.php?u={urlToShare}. Kemudian pada twitter, dengan memanggil url "https://twitter.com/intent/tweet?url={urlToShare}&text={text}. Tiap-tiap URL mempunyai parameter yang berbeda sebagai input guna mengelola data pada platform tersebut.

Hal yang sama juga berlaku pada pinterest, skype, whatsapp, line maupun gmail. Mereka membutuhkan parameter khusus lainnya untuk mengelola data sebelum dibagikan pada pengguna.

Berikut URL Parameter pada tiap platform sosial media :

Platform Sosial Media	URL	Parameter	Keterangan
Facebook	https://web.facebook.com/sharer.php?u={url}	u (url)	Encode URL
Twitter	https://twitter.com/intent/tweet?url={url}&text={text}	url text	Encode URL
Pinterest	http://pinterest.com/pin/create/button/?url={url}	url	Encode URL
Reddit	"https://reddit.com/submit?url={url}&title={title}	url title	Encode URL
LinkedIn	"https://linkedin.com/sharing/share-offsite/?url{url}	url	Encode URL
Tumbler	"https://tumbler.com/widgets/share/tool/canonicalUrl={url}	url	Encode URL
Whatsapp	https://api.whatsapp.com/send?phone={phone_number}&text={text}	phone (boleh dikosongkan) text	Encode URL
Telegram	https://telegram.me/share/url?url{url}&text={text}	url text	Encode URL
Line	https://lineit.line.me/share/ui?url={url}&text={text}	url text	Encode URL
Skype	https://web.skype.com/share?url={url}&text={text}	url text	Encode URL
Email	mailto:{email_address_to}?subject={subject}&body={email_body}	mailto {boleh dikosongkan} subject body	Encode URL
Gmail	https://mail.google.com/mail/?view=cm&to={email_address_to}&su={subject}&body={email_body}	to {boleh dikosongkan} view su (subject) body	Encode URL
Yahoomail	http://compose.mail.yahoo.com/?to={email_address_to}&subject={subject}&body={email_body}	to {boleh dikosongkan} subject body	Encode URL

Melakukan Encode URL Pada Nilai Parameter

Ketika membagikan halaman web menggunakan link, pada dasarnya anda sedang melakukan pengiriman data dengan metoda GET request via HTTP GET. Teks yang berada pada link, jika mengandung karakter tertentu misalnya spasi akan digantikan dengan karakter lain. Misalnya karakter spasi akan digantikan dengan karakter %20.

Pengiriman via Email atau Whatsapp juga masih menggunakan kaidah HTTP GET, yang tentu saja seluruh teks yang akan dikirimkan harus dalam bentuk URL Encoded. Jika tidak, akan menyebabkan kegagalan pembacaan data ataupun data tidak bisa dikirim karena teks yang dikirimkan masih dalam bentuk raw text.

Sebagai contoh, teks berikut akan diubah dalam bentuk URL Encode :

KODE SCRIPT

//normal text
normal_text = "Sosial media sharing button | Membagi konten web via sosial media";
//text setelah proses encoding url
encoded_text = "Sosial%20media%20sharing%20button%20%7C%20Membagi%20konten%20web%20via%20sosial%20media";

Proses encode url dapat dilakukan dengan mudah melalui fungsi javascript. Fungsi encodeURI() akan mengubah teks normal menjadi teks yang sudah diencode.

JAVASCRIPT

<script>
   var title = "Sosial media sharing button";
   var deskripsi= "Membagi konten web via sosial media";
   console.log(encodeURI(title+deskripsi));
</script>

Source Code

Silahkan download source code beserta file pendukung pada tutorial ini.

note Catatan : Konten website yang dibahas disini merupakan konten website yang sudah diakses secara online. Jika anda menerapkan konten website yang berada pada localhost atau konten offline dan membaginya via sosial media, tentu saja request akan ditolak tidak akan bisa diteruskan.

Demikian tutorial bagaimana cara membagikan konten web via sosial media sharing button, semoga bermanfaat.

18 Sept 2022 0 3.512

Kategori : html - css - javascript - tech

facebook twitter whatapp linkedin pinterest

Halaman Terkait

	Membuat Tombol Contact Us Dan Share Whatsapp Pada Website artikel
	Membuat Google Translate Button Pada Website artikel
	Validasi Form Menggunakan Plugin Validation Jquery artikel

Tinggalkan Balasan

Formulir ini hanya bagi member yang sudah terdaftar. Silahkan disini.

Belum terdaftar? silahkan queue Daftar disini.

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.

Peringatan!

Apakah ingin menghapus komentar ini?

	Daftar Kode ASCII 32.730
	Membuat Menu Navigasi Horisontal dan Vertikal Pada HTML 28.111
	Membuat Database Dan Tabel Melalui CMD Pada Xampp Server 24.947
	Mendownload File Dengan Menggunakan PHP 20.552
	Menggunakan Barcode Scanner Pada Aplikasi Berbasis Web 10.319
	Membuat Barcode Generator Dengan PHP 10.256
	Cara Mudah Membuat QR Code Generator Dengan PHP 10.214
	Perbedaan Antara fungsi rand() dan mt_rand() Pada PHP 10.010
	Validasi Form Menggunakan Plugin Validation Jquery 9.842
	Merubah Warna Latar Text Editor Notepad++ 9.198

Visitor Name
Email