Membuat Custom Tombol Share Facebook, Twitter, Google +, LinkedIn, Pinterest

by I Wayan Widyana

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.

Membuat custom tombol share Facebook, Twitter, Google +, LinkedIn, Pinterest

Untuk dasarnya saya gunakan code berikut :

Facebook

&lt;a id="button" onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;amp;p[title]=&lt;?php echo $title; ?&gt;&amp;amp;p[summary]=&lt;?php echo $summary;?&gt;&amp;amp;p[url]=&lt;?php echo $url; ?&gt;&amp;amp;&amp;p[images][0]=&lt;?php echo $image;?&gt;', 'sharer', 'toolbar=0,status=0,width=550,height=400');" target="_parent" href="javascript: void(0)"&gt; &lt;img src="images/f.jpg" /&gt;&lt;/a&gt;

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.

Twitter

&nbsp;
&lt;a href="http://twitter.com/share?source=sharethiscom&amp;text=&lt;?php echo $title;?&gt;&amp;url=&lt;?php echo $url; ?&gt;&amp;via=berbagiyuks"&gt;&lt;img src="images/tw.jpg" /&gt;&lt;/a&gt;

Untuk bagian twitter tidak jauh berbeda. Kamu juga bisa menganti via=berbagiyuks menjadi username twittermu tanpa @.

Google +

&lt;a href="javascript:void(0);" onclick="popUp=window.open('https://plus.google.com/share?url=&lt;?php echo $url; ?&gt; ','popupwindow','scrollbars=yes,width=800,height=400');popUp.focus();return false"&gt;&lt;img src="images/g.jpg" /&gt;&lt;/a&gt;&nbsp;

LinkedIn


&lt;a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=&lt;?php echo $url; ?&gt; &amp;title=&lt;?php echo $title;?&gt;&amp;summary=&lt;?php echo $summary;?&gt;&amp;source=BerbagiYuks.con"rel="nofollow"&gt;&lt;img src="images/in.jpg" /&gt;&lt;/a&gt;

Untuk Google + dan LinkedIn juga sama dengan penjelasan pada pengaturan facebook.

Pintereset

&lt;a href='javascript:void((function()%7Bvar%20e=document.createElement(&amp;apos;script&amp;apos;);e.setAttribute(&amp;apos;type&amp;apos;,&amp;apos;text/javascript&amp;apos;);e.setAttribute(&amp;apos;charset&amp;apos;,&amp;apos;UTF-8&amp;apos;);e.setAttribute(&amp;apos;src&amp;apos;,&amp;apos;http://assets.pinterest.com/js/pinmarklet.js?r=&amp;apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'&gt;&lt;img src="images/pin.jpg" /&gt;&lt;/a&gt;&nbsp;

Berikut ini script lengkapnya :

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Membuat Custom Tombol Share Facebook, Twitter, Google +, LinkedIn&lt;/title&gt;
&lt;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="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" /&gt;
&lt;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="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" /&gt;
&lt;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="&amp;lt;style&amp;gt;" title="&amp;lt;style&amp;gt;" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;?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/"; ?&gt;
&lt;div class="container"&gt;
&lt;h1&gt;Membuat Custom Tombol Share Facebook, Twitter, Google +, LinkedIn&lt;/h1&gt;
&lt;img src="&lt;?php echo $image;?&gt;" /&gt;
&lt;div style="clear:both;"&gt;&lt;/div&gt;
&lt;div class="social-share"&gt;
&lt;div class="facebook"&gt;
 &lt;a id="button" onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;amp;p[title]=&lt;?php echo $title; ?&gt;&amp;amp;p[summary]=&lt;?php echo $summary;?&gt;&amp;amp;p[url]=&lt;?php echo $url; ?&gt;&amp;amp;&amp;p[images][0]=&lt;?php echo $image;?&gt;', 'sharer', 'toolbar=0,status=0,width=550,height=400');" target="_parent" href="javascript: void(0)"&gt;
 &lt;img src="images/f.jpg" /&gt;&lt;/a&gt; 
 &lt;/div&gt;
&lt;div class="twitter"&gt;
 &lt;a class="twitter popup" href="http://twitter.com/share?source=sharethiscom&amp;text=&lt;?php echo $title;?&gt;&amp;url=&lt;?php echo $url; ?&gt;&amp;via=berbagiyuks"&gt;&lt;img src="images/tw.jpg" /&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;div class="google"&gt;
 &lt;a href="javascript:void(0);" onclick="popUp=window.open('https://plus.google.com/share?url=&lt;?php echo $url; ?&gt; ','popupwindow','scrollbars=yes,width=800,height=400');popUp.focus();return false"&gt;&lt;img src="images/g.jpg" /&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;div class="linkedin"&gt;
 &lt;a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=&lt;?php echo $url; ?&gt; &amp;title=&lt;?php echo $title;?&gt;&amp;summary=&lt;?php echo $summary;?&gt;&amp;source=BerbagiYuks.con" class="popup"rel="nofollow"&gt;&lt;img src="images/in.jpg" /&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;div class="pinterest"&gt;
 &lt;a href='javascript:void((function()%7Bvar%20e=document.createElement(&amp;apos;script&amp;apos;);e.setAttribute(&amp;apos;type&amp;apos;,&amp;apos;text/javascript&amp;apos;);e.setAttribute(&amp;apos;charset&amp;apos;,&amp;apos;UTF-8&amp;apos;);e.setAttribute(&amp;apos;src&amp;apos;,&amp;apos;http://assets.pinterest.com/js/pinmarklet.js?r=&amp;apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'&gt;&lt;img src="images/pin.jpg" /&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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.

Demo Download

Image source