Advertisement
Html/Css/Jquery PHP

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

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 :

Facebook

<a id="button" onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title; ?>&p[summary]=<?php echo $summary;?>&p[url]=<?php echo $url; ?>&&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.

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

Editorial Team

Editorial Team adalah mereka yang menulis artikel untuk blog PinDexain.

Related Stories

11 Responses to Membuat Custom Tombol Share Facebook, Twitter, Google +, LinkedIn, Pinterest

  1. om… saya udh coba tutorial nya.. tetapi image nya. kok gk sesuai yang harus di share…

    • 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,

      <a class="facebook popup2" target="_parent" href="http://www.facebook.com/sharer.php?u=LINK_URL_HALAMAN_ARTIKEL_ANDA">facebook</a>
      

      Semoga berhasil gan 🙂

  2. bagus boss , infonya , tapi scripnya kok gak nampil seperti itu ya , mohon pencerahan nya gan

  3. bermanfaat sekali gan makasih

  4. Sangat membantu boss, sudah dipraktekkan di http://www.dwicore.com
    Thanks you

  5. thanks min, mau dipasang di blog saya..

  6. 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

  7. Tombol share uda bisa, tapi saat mau dishare, tampil pesan konten diblokir. u.u posisi web hosting sendiri.
    Kira2 kenapa ya?

  8. Terima Kasih.. bermanfaat..

Leave a Reply

Your email address will not be published. Required fields are marked *