меню

Для шаринга в социальных сетях с громоздким исходным кодом, и сложной детальной кастомизацией, решение которое однажды написал неизвестный, но однозначно добрый программист.

Добавляем следующий 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');
  }
};
    
  

Счетчик шаринга

В случаях, когда надо вести подсчет количества шаринга страницы для каждой из социальных сетей любым возможным способом, а не конкретной кнопкой, здесь конечно идеальный вариант.

Если надо будет отследить статистику нажатий именно на кнопку шаринга размещенную непосредственно на расшариваемой странице. Далеко не уходя от способа шаринга представленного выше, эта задача была решена табличкой в БД, еще одним параметром функции и простым 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){});
}
    
  

Данное решение является самым минималистичным из встречающих, с свободной кастомизацией внешнего вида. Оно избавляет от надобности в использовании сторонних сервисов типа pluso.ru и дает возможность вести собственную статистику на своем же сервере.

Помощь сайту
ЮMoney:
4100 1180 7209 833
Карта Сбербанк:
2202 2080 6183 7127

Возможно, вам будет интересно

Сравнение методов require() и import() в JavaScript

Методы require() и import() в JavaScript используются для включения модулей. У них есть несколько важных особенностей, о которых должен знать каждый разработчик.

Как исправить ошибку «RangeError: Invalid time value» при вызове метода toISOString даты JavaScript?

В этой статье мы рассмотрим, как исправить ошибку «RangeError: Invalid time value» при вызове toISOString метода даты JavaScript.

Понимание синхронного и асинхронного JavaScript с Async/Await

В этой статье вы узнаете о том, что такое синхронное и асинхронное программирование в JavaScript и как применяя эти знания, работать с Async/Await

Перестаньте всё превращать в массивы (и работайте меньше)

Большая часть фронтенд-кода обрабатывает данные задолго до их вывода на экран. Мы получаем список, изменяем его, сокращаем и повторяем. И обычно не задумываемся о том, какой объём работы выполняем на этом пути.