- PVSM.RU - https://www.pvsm.ru -
Здравствуйте,
Польза в предоставлении пользователям возможности поделиться вашей ссылкой в социальных сетях очевидна. Однако, жертвовать производительностью и временем загрузки страницы тоже не хочется.
В статье рассматриваются доступные, готовые для использования социальные кнопки, проблемы с которыми мы столкнулись при их использовании, и описан простой способ как сделать свои кнопки для нескольких популярных социальных сетей.
Когда мы начинали делать наш продукт, мы серьезно не задумывались по поводу шаринг-кнопок на сайт. Просто взяли готовые сервисы и добавили на страницы:
Но со временем мы заметили, что с ними не все так гладко. А именно:
Поэтому мы стали искать другие варианты предоставления пользователям поделиться нашей ссылкой в социальных сетях.
На github есть много готовых решений, например:
По сути, мы могли на этом остановиться, но было решено сделать свой вариант, так как нам всего лишь надо 5 различных шаринг-кнопок (VK, Facebook, Twitter, Google+, LinkedIn + отправка на электронную почту) без каких-либо наворотов. Как известно, хочешь сделать хорошо — сделай сам.
Так как на сайте мы уже использовали шрифты с социальными иконками (для кнопок авторизации через соц сети и для ссылок на группы) то мы просто взяли их — дополнительной памяти на них не требуется.
Так же можно воспользоваться готовыми элементами, например для bootstrap — lipis.github.io/bootstrap-social/ [6] который использует Font Awesome (Font Awesome сам по себе очень большой, по этому если Вам надо только определенные иконки, то советуем выбрать только те которые нужны через fontello.com/ [7])
Рассмотрим код на JS (приведена часть для Вконтакте, в конце статьи есть ссылка на полный пример со всеми социальными кнопками, которые нам были нужны).
Итак, сначала создадим объект и добавим функцию инициализации, в которой укажем классы объекта для запуска события и данных, которыми будем делиться и добавим к каждому объекту на странице eventListener:
var cubeShare = {
title: 'CubeCamp.ru',
width: 600,
height: 400,
init: function() {
var share = document.querySelectorAll('.share-btn');
for(var i = 0, l = share.length; i < l; i++) {
var url = share[i].getAttribute('data-url') || location.href, title = share[i].getAttribute('data-title') || '',
desc = share[i].getAttribute('data-desc') || '', el = share[i].querySelectorAll('a');
for(var a = 0, al = el.length; a < al; a++) {
var id = el[a].getAttribute('data-id');
if(id)
this.addEventListener(el[a], 'click', {id: id, url: url, title: title, desc: desc});
}
}
}
};
Далее, опишем eventListener, добавив его к уже созданному классу:
addEventListener: function(el, eventName, opt) {
var _this = this, handler = function() {
_this.share(opt.id, opt.url, opt.title, opt.desc);
};
if(el.addEventListener) {
el.addEventListener(eventName, handler);
} else {
el.attachEvent('on' + eventName, function() {
handler.call(el);
});
}
}
Наконец, допишем открытие popup-окна, в которое загрузим собственно страницу, которую предоставляют нам социальные сети для шаринга в них. Для добавления других сетей, нужно дописать в switch соотвественно нужную нам страницу:
share: function(id, url, title, desc) {
url = encodeURIComponent(url);
desc = encodeURIComponent(desc);
title = encodeURIComponent(title);
switch(id) {
case 'vk':
this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, this.title, this.width, this.height);
break;
default:
break;
};
},
popupCenter: function(url, title, w, h) {
var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 3) - (h / 3)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
if (window.focus) {
newWindow.focus();
}
}
Если вы используете jQuery, то инициализировать можно так:
$('.share-btn a').on('click', function() {
var id = $(this).data('id');
if(id) {
var data = $(this).parent('.share-btn');
var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || '';
cubeShare.share(id, url, title, desc);
}
});
или без jQuery:
cubeShare.init();
Так же можно вызвать шаринг-кнопку таким образом:
cubeShare.share(id, url, title, desc);
где:
Пример HTML кода для кнопки Вконтакте:
<div class="share-btn" data-url="http://www.cubecamp.ru" data-title="КубКамп" data-desc="Журнал цифровых изобретений">
<a class="btn btn-social-icon btn-sm btn-vk" data-id="vk"><i class="ccon-vkontakte"></i></a>
</div>
Значения в блоке:
Полный пример [8]
Даже такая мелочь как социальные кнопки могут серьезно влиять на скорость загрузки страницы, особенно если пользователь использует данные через мобильную сеть. Потратив небольшое время на создание собственных кнопок вы увеличите скорость, получите возможность создать свой дизайн и приктрутить дополнительный функционал, например статистику. И никаких лишних запросов на сторонние сервисы + не надо волноваться если вдруг они не загрузятся.
Facebook
www.facebook.com/sharer/sharer.php?u=YOUR-URL [10]
Google plus
plus.google.com/share?url=YOUR-URL [11]
LinkedIn
www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL [12]
Pinterest
pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC [13]
Xing
www.xing-share.com/app/user?op=share;sc_p=xing-share;url=YOUR-URL [15]
Tumblr
www.tumblr.com/share/link?url=YOUR-URL&description=YOUR-DESCRIPTION [16]
Reddit
www.reddit.com/submit?url=YOUR_URL&title=YOUR_TITLE [17]
Odnoklassniki
www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=YOUR_URL&st.comments=YOUR-DESCRIPTION [18]
Автор: aleksandrd
Источник [19]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/sotsial-ny-e-knopki/77313
Ссылки в тексте:
[1] github.com/Julienh/Sharrre/: https://github.com/Julienh/Sharrre/
[2] github.com/carrot/share-button: https://github.com/carrot/share-button
[3] github.com/kni-labs/rrssb: https://github.com/kni-labs/rrssb
[4] github.com/sapegin/social-likes: https://github.com/sapegin/social-likes
[5] github.com/mattberridge/Simple-Social-Sharing-Buttons: https://github.com/mattberridge/Simple-Social-Sharing-Buttons
[6] lipis.github.io/bootstrap-social/: http://lipis.github.io/bootstrap-social/
[7] fontello.com/: http://fontello.com/
[8] Полный пример: http://www.cubecamp.ru/articles/share/cubecamp.html
[9] twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE: https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE
[10] www.facebook.com/sharer/sharer.php?u=YOUR-URL: https://www.facebook.com/sharer/sharer.php?u=YOUR-URL
[11] plus.google.com/share?url=YOUR-URL: https://plus.google.com/share?url=YOUR-URL
[12] www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL: https://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL
[13] pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC: https://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC
[14] vk.com/share.php?url=YOUR-URL&title=YOUR-TITLE&description=YOUR-DESCRIPTION&image=YOUR-IMAGE-SRC&noparse=true: https://vk.com/share.php?url=YOUR-URL&title=YOUR-TITLE&description=YOUR-DESCRIPTION&image=YOUR-IMAGE-SRC&noparse=true
[15] www.xing-share.com/app/user?op=share;sc_p=xing-share;url=YOUR-URL: https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url=YOUR-URL
[16] www.tumblr.com/share/link?url=YOUR-URL&description=YOUR-DESCRIPTION: http://www.tumblr.com/share/link?url=YOUR-URL&description=YOUR-DESCRIPTION
[17] www.reddit.com/submit?url=YOUR_URL&title=YOUR_TITLE: http://www.reddit.com/submit?url=YOUR_URL&title=YOUR_TITLE
[18] www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=YOUR_URL&st.comments=YOUR-DESCRIPTION: http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=YOUR_URL&st.comments=YOUR-DESCRIPTION
[19] Источник: http://habrahabr.ru/post/245987/
Нажмите здесь для печати.