Membuat custom tombol share Facebook, Twitter, Google +, LinkedIn, Pinterest? Apa maksud judul artekel ini? Jika teman-teman bertanya-tanya tentang judul tersebut saya rasa teman-teman masih awam seperti saya sendiri atau mungkin karena judulnya kurang jelas. Maksud dari judul tersebut adalah disini saya akan membahas bagaimana caranya kita merubah dafault tombol share facebook, twitter dll, sesuai dengan bentuk atau gambar yang kita miliki sendiri.
Khasus ini saya dapatkan ketika saya membuat sebuah projek website dan konseptor atau pemiliknya memberikan saya brief kalau tombol share yang ada pada website akan dibuat lebih menarik dari pada tombol share bawaan sosial media tersebut. Saya googling untuk mendapatkan jawabannya, dan pada artikel ini saya akan membagikan kepada teman-teman totorialnya secara gratis.
Untuk mempermudah disini saya tidak hanya menggunakan html dan css saja, tapi saya juga menggunakan php agar strukturnya lebih mudah.
Membuat custom tombol share Facebook, Twitter, Google +, LinkedIn, Pinterest
Untuk dasarnya saya gunakan code berikut :
<a id="button" onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title; ?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image;?>', 'sharer', 'toolbar=0,status=0,width=550,height=400');" target="_parent" href="javascript: void(0)"> <img src="images/f.jpg" /></a>
Pada bagian <?php echo $title; ?>, <?php echo $summary; ?>, <?php echo $url; ?>, <?php echo $image; ?> secara berturut-turut bisa diganti dengan code untuk memanggil judul, deskripsi, url artikel, dan url gambar blog yang kamu buat. Untuk images/f.jpg kamu bisa gantikan dengan url tempat kamu menyimpan gambar/icon social media blogmu.
<a href="http://twitter.com/share?source=sharethiscom&text=<?php echo $title;?>&url=<?php echo $url; ?>&via=berbagiyuks"><img src="images/tw.jpg" /></a>
Untuk bagian twitter tidak jauh berbeda. Kamu juga bisa menganti via=berbagiyuks menjadi username twittermu tanpa @.
Google +
<a href="javascript:void(0);" onclick="popUp=window.open('https://plus.google.com/share?url=<?php echo $url; ?> ','popupwindow','scrollbars=yes,width=800,height=400');popUp.focus();return false"><img src="images/g.jpg" /></a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo $url; ?> &title=<?php echo $title;?>&summary=<?php echo $summary;?>&source=BerbagiYuks.con"rel="nofollow"><img src="images/in.jpg" /></a>
Untuk Google + dan LinkedIn juga sama dengan penjelasan pada pengaturan facebook.
Pintereset
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src="images/pin.jpg" /></a>
Berikut ini script lengkapnya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Membuat Custom Tombol Share Facebook, Twitter, Google +, LinkedIn</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.10.2%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0AjQuery(document).ready(function(%24)%20%7B%0A%20%24('.popup').click(function(event)%20%7B%0A%20var%20width%20%3D%20575%2C%0A%20height%20%3D%20400%2C%0A%20left%20%3D%20(%24(window).width()%20-%20width)%20%2F%202%2C%0A%20top%20%3D%20(%24(window).height()%20-%20height)%20%2F%202%2C%0A%20url%20%3D%20this.href%2C%0A%20opts%20%3D%20'status%3D1'%20%2B%0A%20'%2Cwidth%3D'%20%2B%20width%20%2B%0A%20'%2Cheight%3D'%20%2B%20height%20%2B%0A%20'%2Ctop%3D'%20%2B%20top%20%2B%0A%20'%2Cleft%3D'%20%2B%20left%3B%0A%20%0A%20window.open(url%2C%20'twitter'%2C%20opts)%3B%0A%20%0A%20return%20false%3B%0A%20%7D)%3B%0A%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.facebook%2C.twitter%20%7B%20margin-left%3A3px%20!important%3B%7D%0A.facebook%2C%20.twitter%2C%20.google%2C%20.linkedin%2C%20.pinterest%20%7B%0A%20float%3Aleft%3B%0A%20position%3Arelative%3B%0A%20margin-left%3A5px%3B%0A%7D%0A.container%20%7B%0A%20width%3A400px%3B%0A%20margin%3Aauto%3B%0A%20text-align%3Acenter%3B%0A%7D%0A.social-share%20%7B%0A%20width%3A190px%3B%0A%20margin%3A15px%20auto%200%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>
<body>
<?php $title = 'Membuat Custom Tombol Share Facebook, Twitter, Google +, LinkedIn' ; $summary = 'Tombol share untuk sosial media merupakan sebuah plugin untuk membagikan artikel terbaru anda dengan orang-orang yang berteman dengan anda di sosial media'; $image='http://demo.pindexain.com/black-white-img/img/1.jpg'; $url = "http://demo.pindexain.com/black-white-img/"; ?>
<div class="container">
<h1>Membuat Custom Tombol Share Facebook, Twitter, Google +, LinkedIn</h1>
<img src="<?php echo $image;?>" />
<div style="clear:both;"></div>
<div class="social-share">
<div class="facebook">
<a id="button" onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title; ?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image;?>', 'sharer', 'toolbar=0,status=0,width=550,height=400');" target="_parent" href="javascript: void(0)">
<img src="images/f.jpg" /></a>
</div>
<div class="twitter">
<a class="twitter popup" href="http://twitter.com/share?source=sharethiscom&text=<?php echo $title;?>&url=<?php echo $url; ?>&via=berbagiyuks"><img src="images/tw.jpg" /></a>
</div>
<div class="google">
<a href="javascript:void(0);" onclick="popUp=window.open('https://plus.google.com/share?url=<?php echo $url; ?> ','popupwindow','scrollbars=yes,width=800,height=400');popUp.focus();return false"><img src="images/g.jpg" /></a>
</div>
<div class="linkedin">
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo $url; ?> &title=<?php echo $title;?>&summary=<?php echo $summary;?>&source=BerbagiYuks.con" class="popup"rel="nofollow"><img src="images/in.jpg" /></a>
</div>
<div class="pinterest">
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src="images/pin.jpg" /></a>
</div>
</div>
</div>
</body>
</html>
Oh ya, agar kami bisa menghemat biaya saat membeli hosting, kami punya voucher diskon hosting di domainesia.com dan niagahoster.co.id untuk kami.
Dapatkan diskon sebesar 20% dari DomainNesia dengan menggunakan kode promo HostDiskon. Sekedar informasi saja, blog ini juga menggunakan layanan hosting di DomainNesia.
Atau ingin diskon yang lebih besar lagi? Kamu boleh membuka website niagahoster.co.id dan membeli layanan hostingnya dengan menggunakan kode promo a-HostingPromo.
Kamu akan mendapatkan potongan harga sebesar 10% – 40% dari total paket harga yang kamu beli. Dihari-hari tertentu, seperti hari raya, bahkan kamu bisa mendapatkan diskon bisa hingga 50%.
Segera ambil voucher diskonmu sekarang juga, sebelum kehabisan. Kuota hanya untuk 50 orang pertama, sekarang sudah ada 40 orang yang menggunakannya.
Semoga bermanfaat, dan jika ada yang kurang jelas atau pertanyaan silahkan utarakan pada kotak komentar.
March 8, 2014 at 2:50 pm
om… saya udh coba tutorial nya.. tetapi image nya. kok gk sesuai yang harus di share…
March 8, 2014 at 3:18 pm
Coba gunakan tambah script dibawah pada javascriptnya
jQuery(document).ready(function($) { $('.popup2').click(function(event) { var width = 575, height = 400, left = ($(window).width() - width) / 2, top = ($(window).height() - height) / 2, url = this.href, opts = 'status=1' + ',width=' + width + ',height=' + height + ',top=' + top + ',left=' + left; window.open(url, 'facebook', opts); return false; }); });Kemudian untuk link facebooknya ganti dengan,
Semoga berhasil gan 🙂
January 8, 2015 at 12:56 am
bagus boss , infonya , tapi scripnya kok gak nampil seperti itu ya , mohon pencerahan nya gan
January 22, 2016 at 5:00 pm
bermanfaat sekali gan makasih
March 14, 2016 at 7:36 pm
Sangat membantu boss, sudah dipraktekkan di http://www.dwicore.com
Thanks you
June 9, 2017 at 12:55 am
thanks min, mau dipasang di blog saya..
June 9, 2017 at 2:41 am
Silahkan. Semoga berhasil 🙂
August 23, 2017 at 8:41 pm
susah gann ane kan pake template gratisan yang udah ada gambar logo twitter facebook google+ biar kalo langsung bisa ga gan,,misalnya pas di klik logo langsung share gitu tapi pake url web yang menuju facebook ataw twitter,
pertanyaannya url nya apa gan yang buat share itu kalo ada mohon bimbingannya ya gan
August 24, 2017 at 7:18 pm
Saya kurang paham. Kalau udah ada logo twitter facebook bukanny udah bisa langsung di share ya?
November 1, 2017 at 11:42 pm
Tombol share uda bisa, tapi saat mau dishare, tampil pesan konten diblokir. u.u posisi web hosting sendiri.
Kira2 kenapa ya?
June 3, 2018 at 10:59 pm
Terima Kasih.. bermanfaat..
January 30, 2019 at 2:10 am
Terima kasih banyak gan informasinya sangat bermanfaat
May 2, 2019 at 11:05 pm
saya penasaran, mencari artikel tentang :
jika ingin mendapat bonus maka share tulisan ini,
kemudian setelah menshare tulisan kita, pengunjung menyediakan kode tertentu
hal ini tidak bersifat memaksa, bagaimana caranya ya ?