Свой дизайн кнопок социальных сетей для сайта. Кнопки "Поделиться"

Зачем это может понадобиться. Во-первых стандартные сервисы от Яндекса Поделиться, Pluso и др. не позволяют свои иконки кнопок ставить. Во-вторых, эти сервисы могут подгружать лишние скрипты - типа метрики, которую Яндекс использует для статистики в Яндекс.Метрика у вашего сайта. Удобно, но не всегда необходимо.
1. Основа - сам скрипт помещаем в файл share.js и подключаем либо в head, либо там, где вставляем сам html-код кнопок
var Shares = { title: 'Поделиться', width: 600, height: 400, init: function() { var share = document.querySelectorAll('.social'); 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') || '', media = share[i].getAttribute('data-image') || '', 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, media: media}); } } }, addEventListener: function(el, eventName, opt) { var _this = this, handler = function() { _this.share(opt.id, opt.url, opt.title, opt.desc, opt.media); }; if(el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, function() { handler.call(el); }); } }, share: function(id, url, title, desc, media) { url = encodeURIComponent(url); desc = encodeURIComponent(desc); title = encodeURIComponent(title); media = encodeURIComponent(media); switch(id) { case 'fb': this.popupCenter('https://www.facebook.com/sharer/sharer.php?u=' + url, this.title, this.width, this.height); break; case 'vk': this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, this.title, this.width, this.height); break; case 'tw': var text = title || desc || ''; if(title.length > 0 && desc.length > 0) text = title + ' - ' + desc; if(text.length > 0) text = '&text=' + text; this.popupCenter('https://twitter.com/intent/tweet?url=' + url + text, this.title, this.width, this.height); break; case 'gp': this.popupCenter('https://plus.google.com/share?url=' + url, this.title, this.width, this.height); break; case 'ok': this.popupCenter('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=' + url, this.title, this.width, this.height); break; case 'pi': this.popupCenter('http://pinterest.com/pin/create/button/?url=' + url + '&description=' + title +'. ' + desc + '&media=' + media, this.title, this.width, this.height); break; }; }, newTab: function(url) { var win = window.open(url, '_blank'); win.focus(); }, 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(); } } }; $('.social a').on('click', function() { var id = $(this).data('id'); if(id) { var data = $(this).parent('.social'); var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || '', media = data.data('media') || ''; Shares.share(id, url, title, desc, media); } });
2. Html-код на страницу вставляем
<div id="share"> <div class="like">Поделиться:</div> <div class="social" data-url="<?php ФУНКЦИЯ_ИЛИ_ПЕРЕМЕННАЯ_С_УРЛОМ_СТРАНИЦЫ ?>" data-title="<?php ЗАГОЛОВОК_СТРАНИЦЫ ?>"> <a class="push facebook" data-id="fb"><i class="fa fa-facebook"></i> Facebook</a> <a class="push twitter" data-id="tw"><i class="fa fa-twitter"></i> Twitter</a> <a class="push vkontakte" data-id="vk"><i class="fa fa-vk"></i> Вконтакте</a> <a class="push google" data-id="gp"><i class="fa fa-google-plus"></i> Google+</a> <a class="push ok" data-id="ok"><i class="fa fa-odnoklassniki"></i> OK</a> <a class="push pi" data-id="pi"><i class="fa fa-pi"></i> Pinterest</a> </div> </div>

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Composer – пакетный менеджер PHP. Что и как? (22.07.2014)
- 0 MySQL и PHP: Вычисление возраста (количество лет) по дате рождения (20.06.2017)
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Как изменить часовой пояс на сервере (16.11.2013)
- 0 PHP: Как удалить файлы по маске? (07.11.2013)
- 0 Регулярные выражения в PHP (12.04.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 Защита от спама в phpBB3 без капчи (09.10.2013)
- 0 Php функция implode внутри запроса SELECT к MySQL. (02.09.2013)
- 0 Как убрать папку www из денвера? (22.03.2013)
- 0 Устанавливаем и настраиваем WampServer (аналог MAMP в Mac и возможная замена Denwer'у) на Windows (22.03.2013)
- 0 Полезные возможности PhpStorm и настройка горячих клавиш (14.03.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Асинхронная загрузка css (21.01.2021)
- Оборачиваем изображения в ссылки с помощью хука add_filter('the_content', ...) в functions.php (14.08.2019)
- Добавляем форму отправки обратного звонка на сайт (по Javascript и с ReCaptcha) (29.07.2019)
- Преимущества ИТ–аутсорсинга (25.03.2019)
- Отладка PHP кода в консоли браузера (22.03.2019)
- Ошибка в phpmyadmin: count(): Parameter must be an array or an object that implements Countable (27.03.2019)
- Java-скрипт работа с css-свойствами (09.03.2019)
- Две или более reCaptcha на одной странице. Несколько рекапч на странице (25.02.2019)
- Оверлей кнопка на видео HTML5 video overlay play button (15.02.2019)
- Javascript: Выводим прелоадер пока ожидаем выполнение скрипта php (29.01.2019)
- Плавная прокрутка на странице (Bootstrap JS Scrollspy) (12.10.2018)
