Membuat Sendiri Share Link Ke Social Network Dengan Javascript
October 28th, 2009 | by rosihanari |
Cetak Artikel Ini
Pernahkah Anda melihat link seperti di bawah ini di blog-blog atau situs orang lain?
Ngomong-omong? buat apaan sih link gituan? Buat kalian yang belum tahu gunanya? Link tersebut digunakan untuk membagi link (share link) dari URL artikel yang sedang dibaca ke situs jejaring sosial milik kita, boleh jadi dishare ke Facebook, Twitter, dll.
Nah… bila Anda menggunakan WordPress, ada sih plugin yang menampilkan link share tersebut yang nantinya akan muncul di setiap postingan. Diharapkan dengan link tersebut, pembaca atau pengunjung blog yang tertarik dengan sebuah postingan tersebut bisa mensharenya langsung ke situs jejaring miliknya.
Sekarang… bagaimana bila kita memasang link share tersebut tanpa plugin apa-apa alias membuatnya sendiri? Dengan membuat sendiri, kita bisa memasangnya di CMS buatan kita sendiri atau situs pribadi kita.
So… bagaimana caranya kalo kita buat sendiri link sharenya? OK.. langkah pertama kita harus tahu dulu URL di masing-masing social network untuk share link ini. Berikut ini beberapa URL dari social network untuk share linknya.
Facebook : http://www.facebook.com/share.php?u=url
Twitter: http://twitter.com/home/?status=url
Digg: http://digg.com/submit?url=url
Reddit: http://www.reddit.com/submit?url=url
Perhatikan keempat URL untuk keperluan share link di masing-masing social network di atas. Semuanya terdapat kesamaan yaitu adanya parameter ‘url‘. Parameter inilah yang akan diisi dengan URL yang akan kita share. Sebagai contoh misalkan kita ingin menshare sebuah URL http://blog.rosihanari.net ke Facebook, maka kita gunakan URL http://www.facebook.com/share.php?u=http://blog.rosihanari.net.
Dah paham konsepnya ya? Sekarang misalkan kita punya blog atau CMS buatan sendiri. Lalu bagaimana cara menaruh share link tersebut ke setiap postingan, dan URL yang dishare itu menyesuaikan URL dari artikel yang sedang dibaca oleh visitor? atau dengan kata lain, bagaimana cara membuat script supaya parameter ‘url’ yang ada di setiap share link social network di atas secara otomatis terisi oleh URL dari setiap artikel yang ada di blog kita?
Nah… untuk melakukan hal tersebut caranya mudah, kita bisa membaca link URL dari setiap artikel yang ada di blog dengan menggunakan perintah Javascript ‘document.URL‘. Dalam Javascript, perintah ‘document.URL‘ digunakan untuk membaca URL dari halaman web yang sedang tampil di browser. Sehingga, dengan perintah ini kita bisa membuat share link ke social network nya dengan cara sbb:
Share this article on:
<script language="javascript">
document.write("<a href='http://twitter.com/home/?status=" + document.URL + "'>Twitter</a> | <a href='http://www.facebook.com/share.php?u=" + document.URL + "'>Facebook</a> | <a href='http://www.reddit.com/submit?url=" + document.URL + "'>Reddit</a> | <a href='http://digg.com/submit?url=" + document.URL + "'>Digg</a>");
</script>
Javascript di atas selanjutnya kita taruh di setiap halaman artikel di blog atau CMS kita. Dan hasilnya… bisa Anda lihat di bawah artikel ini 
dan juga di bagian bawah semua artikel yang ada di blog ini. Barusan tadi saya punya ide untuk membuatnya sendiri tanpa menggunakan plugin apa-apa. Memang sih simple, tapi keren kan? ceilee… muji sendiri. Supaya lebih menarik, Anda bisa menambahkan icon dari setiap social network.
Dengan adanya share link tersebut, blog kita akan mendapat traffic gratis yang berasal dari social network. Selamat mencoba ya !!
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
Beberapa artikel terkait
- Teknik Membuat Script Mengubah Ukuran Image dengan Javascript
- Membuat Sendiri Script Excerpt (Cuplikan) Artikel Ala WordPress
- Tentang DOM di Javascript
- Javascript Untuk Validasi Input Hanya Angka Pada Form
- Membuat Sendiri Script PHP Untuk Backup MySQL
- Membuat Buku Tamu dengan Akun Facebook (Bag 1)
- Membuat Buku Tamu dengan Akun Facebook (Bag 3)
- Membuat Kotak Fans Club Facebook di Blog WordPress
- Membuat Buku Tamu dengan Akun Facebook (Bag 2)
Share this article on:
Kata kunci: share link digg script - share link facebook script - share link javascript - share link script - share link twitter script - share social network -
mantap nih….. selalu aj dapet yg bagus2 nih…….
lama g kesini ngabsen dulu y bos……
btw bos mo promosi KONTES SEO kecil2an d tempatq nih y sapa tau tertarik
thanks bro infonya sangat bagus
.-= ikwanm7´s last blog ..DownThemAll =-.
makasih….
berguna banget tutorialnya
.-= Alfian Yuda P.´s last blog ..Set default pilihan di Windows =-.
Mau Tampilin Di setiap Potingan Gimana Ya PAk. Tolong Bantuin. HEHEHEH
@gueelo: kalo di wordpress, cukup sisipkan script di atas di bagian script bernama single.php
Mas,
Bila pengunjung situs saya adalah penguna mobilephone, yg kebanyakan browser nya tdk ber-javascript, apakah bisa secara hardcoded ditulis spt dibawah ini?
misal utk share di fb (kode berupa pseudo saja)
alamat_fb/share.php?u=alamat_fix_yg_mau_dishare
mas ari… saya masih kesulitan memasukkan kode javascript ke dalam kode php sy…
Barangkali bagian yang ini…document.URL pada
Facebook
karena document.URL nya dinamis mengikuti id artikelnya… sy coba ganti dengan menyisipkan kode phpnya blm berhasil…
Gmn cara menyisipkan kode php dalam javascript dan kebalikannya…
terimaskih
@isham: memang nanti document.URL nya dinamis mas, mengikuti id artikelnya. Karena setiap artikel kan punya id unik di setiap URL nya.
@rio: mmm… saya belum pernah coba mas. btw.. maksudnya pseudo code yang anda maksud spt apa ya?
hehehe.. maksud saya pseudo code ya spt yg saya tulis diatas itu, karena sesuai peraturan di kolom komen ini bhw tdk boleh menulis kode dalam format apapun baik html maupun script.
Jd yg saya tulis berupa pseudo code (kode pura2, kode ilustrasi/ simbol yg tdk bs di eksekusi oleh komputer).
pak saya mau tanya, untuk menyisipkan iklan chitika berupa java script ke php gimana ya caranya
@siuma: caranya ya cukup letakkan saja di HTML nya, karena javascript itu nanti naruhnya di HTML. Bisa juga anda kasih perintah echo “kode javascript”;
maaf mengganggu lagi sekali. kebetulan saya menggunakan script jomsocial yang sudah jadi. dan scriptnya menggunakan php. nah saat saya masukkan scrpt java chitika. iklannya tidak muncul. saya mau tanya cara lengkap menyisipkan script chitika ke script php gimana ya. tolong karena saya bukan programer jadi kalau bisa yang lebih jelas. terima kasih
wah manteb nih….saya coba dulu ya pak.
bener2 ini yg saya cari selama ini..
nice blog..and good post sob.