How to manage your Share Button on website via Jquery + Javascript

Somebody uses a lot of javascript functions in onclick attribute in html tag like <a>, <button>, ... and so on. However, there is a good way to help coder to manage 'click' event easier by using class attribute as below.

HTML code:

<ul class="shareList"> 

  <li><a href="javascript:void(0);" class="facebook" onclick="..."></a></li>

  <li><a href="javascript:void(0);" class="twitter" onclick="..."></a></li>

  <li><a href="javascript:void(0);" class="googleplus" onclick="..."></a></li>

  <li><a href="javascript:void(0);" class="plurk" onclick="..."></a></li>

  <li><a href="javascript:void(0);" class="weibo" onclick="..."></a></li>

</ul>

Javascript and Jquery code:

var shareurl = encodeURIComponent(' website url for sharing ');

// Note: Do not forget to encode 

// the website address string for url parameters

// via encodeURIComponent() function.

$('.facebook').on('click',fwopen);
$('.plurk').on('click',pwopen);
$('.twitter').on('click',twopen);
$('.googleplus').on('click',gwopen);
$('.weibo').on('click',wwopen);

// for facebook

function fwopen() { 
window.open ('https://www.facebook.com/sharer/sharer.php?u='+shareurl, 'facebook', 'height=450, width=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); 
} 

// for twitter
function twopen() { 
window.open ('http://www.twitter.com/share?url='+shareurl, 'twitter', 'height=450, width=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); 
} 

// for plurk
function pwopen() { 
window.open ('http://www.plurk.com/?qualifier=shares&status=' .concat(shareurl) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')'), 'plurk', 'height=400, width=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); 
}

//for google-plus
function gwopen() { 
window.open ('https://plus.google.com/share?url='+shareurl,'googleplus', 'height=400, width=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); 
}

// for sina weibo
function wwopen() { 
window.open ('http://v.t.sina.com.cn/share/share.php?url='+shareurl+'&title='+encodeURIComponent(document.title),'weibo', 'height=400, width=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); 
}


Finally, the structure of website page is like below:

So,..... Is the solution easy to be readable??? I hope it is useful to you.

p.s. If you are a Pinterest heavy user, it will be useful to you too as below:

http://pinterest.com/pin/create/button/?url={URI-encoded URL of the page to pin}&media={URI-encoded URL of the image to pin}&description={optional URI-encoded description}