Membuat Social Share Buttons Tanpa Plugin di WordPress

Dengan membuat sosial sharing button atau tombol / link untuk berbagi ke media sosial tanpa plugin, maka bisa menghemat space pada hosting.

Terlebih, loading website ringan saat diakses, karena tidak dibebani load resource dari pihak ketiga misalnya Facebook dan Twitter SDK (Software Development Kit).

Pertama-tama buat sebuah script sebelum penutup tag HTML </body>.

(function($){
  
  /**
   * jQuery function to prevent default anchor event and take the href * and the title to make a share popup
   *
   * @param  {[object]} e           [Mouse event]
   * @param  {[integer]} intWidth   [Popup width defalut 500]
   * @param  {[integer]} intHeight  [Popup height defalut 400]
   * @param  {[boolean]} blnResize  [Is popup resizeabel default true]
   */
  $.fn.customerPopup = function (e, intWidth, intHeight, blnResize) {
    
    // Prevent default anchor event
    e.preventDefault();
    
    // Set values for window
    intWidth = intWidth || '500';
    intHeight = intHeight || '400';
    strResize = (blnResize ? 'yes' : 'no');

    // Set title and open popup with focus on it
    var strTitle = ((typeof this.attr('title') !== 'undefined') ? this.attr('title') : 'Social Share'),
        strParam = 'width=' + intWidth + ',height=' + intHeight + ',resizable=' + strResize,            
        objWindow = window.open(this.attr('href'), strTitle, strParam).focus();
  }
  
  /* ========================================== */
  
  $(document).ready(function ($) {
    $('.btn-social-share').on("click", function(e) {
      $(this).customerPopup(e);
    });
  });
    
}(jQuery));

Javascript dari Patrick Kahl diatas untuk menjadikan link yang mempunyai class .btn-social-share nanti tampil pop-up saat di klik.

Kemudian sisipkan kode button social sharing berikut di file single.php pada themes WordPress anda, atau dimana saja yang dikehendaki.

Tombol untuk Twitter:

<a class="btn-social-share" target="_blank" href="https://twitter.com/intent/tweet?hashtags=idnetter&amp;original_referer=<?php the_permalink(); ?>&amp;related=<?php echo urlencode('idnetter,vps,wordpress'); ?>&amp;text=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>">Tweet</a>

Tombol untuk Facebook:

<a class="btn-social-share" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" title="<?php the_title(); ?>">Share</a>

Kode diatas, sesuaikan dengan kebutuhan.

Simpan kemudian tes, jika berhasil maka saat visitor sharing, maka akan menampilkan pop-up untuk submit post ke media social mereka.

Mudah bukan?. Semoga bermanfaat.

6 thoughts on “Membuat Social Share Buttons Tanpa Plugin di WordPress

  1. Fajar Sesa

    thanks kak, sangat membantu

    1. Omar

      wah ini artis yg itu ya. makasih sudah mampir.

  2. Abdul

    Contoh gambarnya ada mas? Tombol share ini membuat loading agak lama gan ya? Makasih

    1. Omar

      Contohnya ada blog ini 😀 Javascript tombol share button pada tutorial ini saya pakai untuk blog idnetter.com. Justru ini lebih ringan daripada mengambil sumber SDK dari facebook/twitter. Ini gambarnya, Contoh gambar share button idnetter.com iconnya pakai font.

  3. Gelang karet

    Ijin praktek mastah.. Trim

  4. Ost Trading

    Kenapa ga bisa yah?

Add a comment