меню

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

Добавляем следующий 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 и дает возможность вести собственную статистику на своем же сервере.


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

Зачем нам нужен TypeScript?

В этой статье мы узнаем зачем нам нужен TypeScript, некоторые основные понятия, которые помогут нам начать работу, и несколько примеров JavaScript.

Область видимости в JavaScript

Область видимости переменной — это часть контекста выполнения, в котором эта переменная существует. Область видимости определяет, есть ли у вас доступ к переменной в данном контексте выполнения.

Три способа понять промисы

Promise (обычно их так и называют «промисы») – предоставляют удобный способ организации асинхронного кода. В современном JavaScript промисы часто используются в том числе и неявно, при помощи генераторов.

Введение в прототипы JavaScript

Хотя JavaScript не является языком, основанным на классах, и не реализует ООП в традиционном смысле, он предоставляет возможности и шаблоны, которые позволяют использовать концепции объектно-ориентированного программирования.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту