Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • Artikel
  • »
  • Membagikan Konten Web Via Sosial Media Sharing Button Tanpa Plugin

Membagikan Konten Web Via Sosial Media Sharing Button Tanpa Plugin

previous Previous Page

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

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta name="viewport" content="width=device-width, initial-scale=1">
5.  <meta charset="utf-8">
6.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7.  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8.  <title>Menambahkan Sosial Media Sharing Button</title>
9.  <style type="text/css">
10. body{
11.    padding: 10px
12. }
13. .sosmed_inline img{
14.    display:inline;
15.    margin:2px;
16.    border-radius:4px;
17.    width:44px;
18.    opacity:1;
19.    cursor:pointer;
20. }
21. .sosmed_inline img:hover{
22.    opacity:0.8;
23.    transform:scale(1.1);
24. }
25. </style>
26. </head>
27. <body>
28. <h1>Menambahkan Sosial Media Sharing Button</h1>
29. <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>
30. <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>
31. <p><b>Share this artikel :</b></p>
32. <p class="sosmed_inline">
33. <img src="res/facebook.png" onclick="_fb();" alt="facebook">
34. <img src="res/reddit.png" onclick="_reddit();" alt="reddit">
35. <img src="res/twitter.png" onclick="_twitter();" alt="twitter">
36. <img src="res/email.png" onclick="_email();" alt="email">
37. <img src="res/whatapps.png" onclick="_whatapps();" alt="whatapps">
38. <img src="res/pinterest.png" onclick="_pinterest();" alt="pinterest">
39. <img src="res/gmail.png" onclick="_gmail();" alt="gmail">
40. <img src="res/telegram.png" onclick="_telegram();" alt="telegram">
41. <img src="res/line.png" onclick="_line();" alt="line">
42. <img src="res/yahoomail.png" onclick="_yahoomail();" alt="yahoomail">
43. <img src="res/skype.png" onclick="_skype();" alt="skype">
44. </p>
45. 
46. <script>
47. var title = "Sosial media sharing button";
48. var deskripsi= "Membagi konten web via sosial media";
49. var currentLocation = window.location;
50. var top = (screen.height - 570) / 2;
51. var left = (screen.width - 570) / 2;
52. var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
53. console.log(encodeURI(title+deskripsi));
54.    function _fb(){
55.      var url="https://web.facebook.com/sharer.php?u=" + encodeURI(currentLocation);
56.      window.open(url,'NewWindow',params);
57.    }
58.    function _reddit(){
59.      var url="https://reddit.com/submit?url=" + encodeURI(currentLocation) + "&title="+encodeURI(title);
60.      window.open(url,'NewWindow',params);
61.    }
62.    function _twitter(){
63.      var url="https://twitter.com/intent/tweet?url=" + encodeURI(currentLocation) + "&text="+encodeURI(deskripsi);
64.      window.open(url,'NewWindow',params);
65.      
66.    }
67.    function _email(){
68.      var url="mailto:?subject=" + encodeURI(title) + "&body=" +encodeURI(currentLocation) + encodeURI(deskripsi);
69.      window.open(url,'NewWindow',params);
70.    }
71.    function _whatapps(){
72.      var url="https://api.whatsapp.com/send?phone=&text=" + encodeURI(title +" "+deskripsi);
73.      window.open(url,'NewWindow',params);
74.    }
75.    function _pinterest(){
76.      var url="http://pinterest.com/pin/create/button/?url="+ encodeURIcurrentLocation);
77.      window.open(url,'NewWindow',params);
78.    }
79.    function _gmail(){
80.      var url="https://mail.google.com/mail/?view=cm&to=&su=" + encodeURI(title) + "&body=" + encodeURI(currentLocation + deskripsi);
81.      window.open(url,'NewWindow',params);
82.    }
83.    function _telegram(){
84.      var url="https://telegram.me/share/url?url=" + encodeURI(currentLocation) + "&text=" +encodeURI(title + deskripsi);
85.      window.open(url,'NewWindow',params);
86.    }
87.    function _line(){
88.      var url="https://lineit.line.me/share/ui?url=" + encodeURI(currentLocation) + "&text=" +encodeURI(title + deskripsi);
89.      window.open(url,'NewWindow',params);
90.    }
91.    function _yahoomail(){
92.      var url="http://compose.mail.yahoo.com/?to=&subject="+encodeURI(title)+"&body="+encodeURI(currentLocation + deskripsi);
93.      window.open(url,'NewWindow',params);
94.    }
95.    function _skype(){
96.      var url="https://web.skype.com/share?url=" + encodeURI(currentLocation) + "&text=" +encodeURI(title + deskripsi);
97.      window.open(url,'NewWindow',params);
98.    }
99. </script>
100. </body>
101. </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 :

berbagi konten web via sosial media sharing button

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

berbagi konten web via sosial media sharing button

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 MediaURLParameterKeterangan
Facebookhttps://web.facebook.com/sharer.php?u={url}
  • u (url)
Encode URL
Twitterhttps://twitter.com/intent/tweet?url={url}&text={text}
  • url
  • text
Encode URL
Pinteresthttp://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
Whatsapphttps://api.whatsapp.com/send?phone={phone_number}&text={text}
  • phone (boleh dikosongkan)
  • text
Encode URL
Telegramhttps://telegram.me/share/url?url{url}&text={text}
  • url
  • text
Encode URL
Linehttps://lineit.line.me/share/ui?url={url}&text={text}
  • url
  • text
Encode URL
Skypehttps://web.skype.com/share?url={url}&text={text}
  • url
  • text
Encode URL
Emailmailto:{email_address_to}?subject={subject}&body={email_body}
  • mailto {boleh dikosongkan}
  • subject
  • body
Encode URL
Gmailhttps://mail.google.com/mail/?view=cm&to={email_address_to}&su={subject}&body={email_body}
  • to {boleh dikosongkan}
  • view
  • su (subject)
  • body
Encode URL
Yahoomailhttp://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 :

//normal text
Sosial media sharing button | Membagi konten web via sosial media
//text setelah proses encoding url
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

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

Source Code

Silahkan download source code beserta file pendukung pada tutorial ini.

noteCatatan : 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.

   0   1.024

Kategori : tag iconhtml - tag iconcss - tag iconjavascript

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tinggalkan Balasan

Nama Pengguna* :

Email* :

 

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.

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Polling

1. Apakah website ini menambah pengetahuan Anda?
 Ya
 Tidak
 Tidak Tahu
2. Seberapa sering Anda mengunjungi website ini?
 Sering
 Jarang
 Tidak Pernah
3. Apakah penilaian Anda terhadap website ini, jika melihat dari segi konten/isi?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
4. Apakah penilaian Anda terhadap website ini, jika melihat dari segi tampilan?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
5. Untuk meningkatkan kualitas website ini, Apakah saran Anda?

 


Visitor Live Chat

 admin(04 Mar 2021 at 10:52 am)

Silahkan anda memberikan masukkan chat (obrolan) pada fasilitas chat ini. Konten bebas, sopan dan menghargai pendapat orang lain..

 _Dicky (06 Mar 2021 at 03:24 pm)

Said : Oops, It's nice content

 billy_123 (06 Mar 2021 at 03:26 pm)

Said : Anyone, can you explain about HTMl.. what is it???

 _Dicky (06 Mar 2021 at 03:27 pm)

Said : HTML is abbreviation ..

 _Dicky (06 Mar 2021 at 03:28 pm)

Said : It's Stand for Hyper text mark up language..

 billy_123 (06 Mar 2021 at 03:28 pm)

Said : It's so clear right now..

 billy_123 (06 Mar 2021 at 03:29 pm)

Said : and what about CSS

 _Dicky (06 Mar 2021 at 03:29 pm)

Said : css for styling sheet guys..

 rizky yuda (07 Mar 2021 at 12:30 pm)

Said : Konten cukup menambah wawasan...

 suryadi (13 Mar 2021 at 06:46 pm)

Said : Boleh request artikel cara koneksi database msyql ke php..

 Nettie Rutherfo (08 Apr 2021 at 12:30 pm)

Said : Auto

 Tedy (29 Mei 2021 at 12:09 pm)

Said : nice blog and articles..

 Ms. Doyle Mann (02 Jun 2021 at 09:56 pm)

Said : card

 flowrie_skylee (12 Jun 2021 at 01:24 pm)

Said : nice content

 Nelson Schaefer (12 Jul 2021 at 04:01 pm)

Said : JSON

 ooppp (18 Jul 2021 at 11:44 pm)

Said : 000popooppi

 Mrs. Jeff Boehm (01 Agt 2021 at 11:01 am)

Said : fuchsia

 dharma (07 Sept 2021 at 05:16 pm)

Said : ini support PHP 8?

 admin (12 Sept 2021 at 12:50 pm)

Said : #dharma masih dalam ruang lingkup PHP versi 7.
Namun untuk ke depannya akan dipertimbangkan agar support PHP 8, jika perubahan dari PHP 7 ke PHP 8 memang dirasa sangat signifikan.

 sadas (13 Jan 2022 at 09:48 am)

Said : Hello

 sutiyono (15 Jan 2022 at 09:36 am)

Said : konten cukup menarik.

 Fuad (08 Mar 2022 at 05:00 pm)

Said : Maksih bang kontennya, sangat membantu.

 admin (10 Mar 2022 at 12:18 pm)

Said : #Fuad Sama sama bang.. terima kasih sudah mampir di blog ini..

 Ferdian (09 Mei 2022 at 11:31 pm)

Said : bang bisa tolong buatkan contoh tamplate kirim email verifikasi gak?

 admin (10 Mei 2022 at 09:44 pm)

Said : Bang #Ferdian, artikelnya belum dibuat. Tapi ada kesamaan konsep yang dapat ditemukan pada halaman : Membuat Form Newsletters Interaktif Dengan Kode Verifikasi Dikirim Via Email,
Silahkan download source code dan file penunjangnya di sana. dan coba kembangkan untuk mengirimkan verifikasi via email untuk penggunaan yang lainnya.

Visitor Name
Email

 I'm not a robot