WordPress

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.

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

Leave a Reply

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