Elementary social share-buttons

In response to posts about sharing buttons on social networks with cumbersome source code, and complex detailed customization, I want to show the habrasoobshchestvu solution that once wrote an unknown, but definitely a good programmer. The author of this miracle is not me, but I have been using this solution for more than a year in projects I work with.

HTML

<a onclick="Share.vkontakte('URL','TITLE','IMG_PATH','DESC')"> {  }</a> <a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {  }</a> <a onclick="Share.mailru('URL','TITLE','IMG_PATH','DESC')"> {  }</a> <a onclick="Share.odnoklassniki('URL','DESC')"> {  }</a> <a onclick="Share.twitter('URL','TITLE')"> {  }</a> 

Js

 Share = { vkontakte: function(purl, ptitle, pimg, text) { url = 'http://vkontakte.ru/share.php?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&image=' + encodeURIComponent(pimg); url += '&noparse=true'; Share.popup(url); }, odnoklassniki: function(purl, text) { url = 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1'; url += '&st.comments=' + encodeURIComponent(text); url += '&st._surl=' + encodeURIComponent(purl); Share.popup(url); }, facebook: function(purl, ptitle, pimg, text) { url = 'http://www.facebook.com/sharer.php?s=100'; url += '&p[title]=' + encodeURIComponent(ptitle); url += '&p[summary]=' + encodeURIComponent(text); url += '&p[url]=' + encodeURIComponent(purl); url += '&p[images][0]=' + encodeURIComponent(pimg); Share.popup(url); }, twitter: function(purl, ptitle) { url = 'http://twitter.com/share?'; url += 'text=' + encodeURIComponent(ptitle); url += '&url=' + encodeURIComponent(purl); url += '&counturl=' + encodeURIComponent(purl); Share.popup(url); }, mailru: function(purl, ptitle, pimg, text) { url = 'http://connect.mail.ru/share?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&imageurl=' + encodeURIComponent(pimg); Share.popup(url) }, popup: function(url) { window.open(url,'','toolbar=0,status=0,width=626,height=436'); } }; 

Charge counter

In cases when it is necessary to count the number of sharing of the page for each of the social networks in any possible way, and not by a specific button, here is of course an ideal option.

But I had another task, it was necessary to track the statistics of clicks on the sharing button located directly on the shared page. Far from departing from the method of sharing presented above, this problem was solved by a tablet in the database, another function parameter and a simple ajax:

  popup: function(url,soc) { window.open(url,'','toolbar=0,status=0,width=626,height=436'); $.post('/social/share', {social:soc, page:url}, function (data){}); } 

In my case, the receiving script gets an ID record from the URL, writes a record in the tablet and / or increments the counter by 1 for a specific social network.

This solution is the most minimalist one I have encountered, with a free customization of appearance. It eliminates the need to use third-party services such as pluso.ru and allows you to maintain your own statistics on your own server.