Элементарные социальные share-кнопки tutorial ~ Страницы Интернета

пятница, 2 октября 2015 г.

Элементарные социальные share-кнопки tutorial

13:03 By Guest Rooms "Varnaflats.eu" Facebook, SEO, site, VK No comments

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

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>

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){});
 }

В моем случае принимающий скрипт достает с URL айдишник записи, заносит в табличку запись и/или увеличивает счетчик на 1 для конкретной социальной сети.

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

Страницы Интернета

пятница, 2 октября 2015 г.