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.
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 :
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 :
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 |
|---|---|---|---|
| https://web.facebook.com/sharer.php?u={url} |
| Encode URL | |
| https://twitter.com/intent/tweet?url={url}&text={text} |
| Encode URL | |
| http://pinterest.com/pin/create/button/?url={url} |
| Encode URL | |
| "https://reddit.com/submit?url={url}&title={title} |
| Encode URL | |
| "https://linkedin.com/sharing/share-offsite/?url{url} |
| Encode URL | |
| Tumbler | "https://tumbler.com/widgets/share/tool/canonicalUrl={url} |
| Encode URL |
| https://api.whatsapp.com/send?phone={phone_number}&text={text} |
| Encode URL | |
| Telegram | https://telegram.me/share/url?url{url}&text={text} |
| Encode URL |
| Line | https://lineit.line.me/share/ui?url={url}&text={text} |
| Encode URL |
| Skype | https://web.skype.com/share?url={url}&text={text} |
| Encode URL |
| mailto:{email_address_to}?subject={subject}&body={email_body} |
| Encode URL | |
| Gmail | https://mail.google.com/mail/?view=cm&to={email_address_to}&su={subject}&body={email_body} |
| Encode URL |
| Yahoomail | http://compose.mail.yahoo.com/?to={email_address_to}&subject={subject}&body={email_body} |
| Encode URL |
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
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.
0 
1.024
Kategori : 
html - css - javascript
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 |
Belum terdaftar? silahkan 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.Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Polling
Belum terdaftar? silahkan Daftar disini.
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.
Previous Page 
HTML
Peringatan!
Apakah ingin menghapus komentar ini?