Скрипт шаринга в социальные сети
Доброго времени суток.
Нашёл такой замечательный скрипт шаринга в социальные сети https://github.com/delfimov/JS-Share Я актуализировал код соц сетей (в примере только кнопка ВК и телеграм, чтобы не загромождать). <html> <head> <title>Заголовок статьи</title> <meta name="description" content="Описание статьи" /> <meta property="og:image" content="https://img.ru/img.jpg" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="part-example"> <p>Share: <button class="btn btn-default social_share" data-type="vk">VK.com</button> <button class="btn btn-default social_share" data-type="telegram">Telegram</button> </p> </div> </div> <script> (function (factory) { var registeredInModuleLoader; if (typeof define === 'function' && define.amd) { define(factory); registeredInModuleLoader = true; } if (typeof exports === 'object') { module.exports = factory(); registeredInModuleLoader = true; } if (!registeredInModuleLoader) { return window.JSShare = factory(); } }(function () { /** * indexOf for old browsers */ if (!('indexOf' in Array.prototype)) { Array.prototype.indexOf = function(find, i /*opt*/) { if (i === undefined) i = 0; if (i < 0) i += this.length; if (i < 0) i = 0; for (var n = this.length; i < n; i++) if (i in this && this[i] === find) return i; return -1; }; } /** * Object Extending Functionality */ function _extend(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { if (!arguments[i]) { continue; } for (var key in arguments[i]) { if (arguments[i].hasOwnProperty(key)) { out[key] = arguments[i][key]; } } } return out; } /** * Get data-attributes */ function _getData(el, defaultOptions) { var data = {}; for (var key in defaultOptions) { if (defaultOptions.hasOwnProperty(key)) { var value = el.getAttribute('data-' + key); if (value !== null && typeof value != 'undefined') { data[key] = value; } } } return data; } /** * Open a popup window with sharing info * @param url * @param _options * @returns {Window} * @private */ function _popup (url, _options) { return window.open(url, '', 'toolbar=0,status=0,scrollbars=1,width=' + _options.popup_width + ',height=' + _options.popup_height); } /** * Get URL for sharing based on options * @param options * @returns {string | *} * @private */ function _getURL(options) { if (options.url === '') { options.url = location.href; } var url = options.url; var utm = ''; if (options.utm_source !== '') { utm += '&utm_source=' + options.utm_source; } if (options.utm_medium !== '') { utm += '&utm_medium=' + options.utm_medium; } if (options.utm_campaign !== '') { utm += '&utm_campaign=' + options.utm_campaign; } if (utm !== '') { url = url + '?' + utm; } return url; } descr = document.querySelector("meta[name='description']").getAttribute("content"); ogimage = document.querySelector("meta[property='og:image']").getAttribute("content"); var social = { // default handler unknown: function (options) { return encodeURIComponent(_getURL(options)); }, // vk.com - ВКонтакте vk: function (options) { return 'https://vk.com/share.php' + '?url=' + encodeURIComponent(_getURL(options)) + '&title=' + encodeURIComponent(options.title) + '&description=' + encodeURIComponent(descr) + '&image=' + encodeURIComponent(ogimage); }, // Telegram tg: function (options) { return options.link_telegram + '?url=' + encodeURIComponent(_getURL(options)) + '&text=' + encodeURIComponent(options.title); } }; function init() { var defaultOptions = { type: 'email', // default share type url: '', // url to share title: document.title.split(' | ')[0], // title to share image: '', // image to share text: '', // text to share utm_source: '', utm_medium: '', utm_campaign: '', popup_width: 626, popup_height: 436, link_telegram: 'https://t.me/share/url', link_whatsapp: 'https://wa.me/' }; function api() {} function go(element, options) { var withoutPopup = [ 'unknown', 'vi', 'tg', 'wa' ]; var tryLocation = true; var link; options = _extend( defaultOptions, _getData(element, defaultOptions), options ); if (typeof social[options.type] == 'undefined') { options.type = 'unknown' } link = social[options.type](options); if (withoutPopup.indexOf(options.type) === -1) { tryLocation = _popup(link, options) === null; } if (tryLocation) { if (element.tagName === 'A' && element.tagName === 'a') { element.setAttribute('href', link); return true; } else { location.href = link; return false; } } else { return false; } } api.go = go; api.options = defaultOptions; return api; } return init(); })); document.addEventListener("DOMContentLoaded", function(event) { var shareItems = document.querySelectorAll('.social_share'); var isIOS = /iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); var isAndroid = /(android)/i.test(navigator.userAgent); var options = {}; if (isIOS || isAndroid) { options.link_telegram = 'tg://msg'; options.link_whatsapp = 'whatsapp://send'; } for (var i = 0; i < shareItems.length; i += 1) { shareItems[i].addEventListener('click', function share(e) { return JSShare.go(this, options); }); } }); </script> </body> </html> Добавил вот этот код (надеюсь правильно?): descr = document.querySelector("meta[name='description']").getAttribute("content"); ogimage = document.querySelector("meta[property='og:image']").getAttribute("content"); И ещё два вопроса по коду. При нажатии по кнопке Телеграм и Ватсапп в браузере для компьютера, осуществляется уход на страницу t.me. Как сделать, чтобы этот процесс осуществлялся в новой вкладке (target=_blank)? И по function _getURL(options) вопрос. utm_..- вроде как что-то с отслеживанием связано. Мне это не нужно. Как можно сократить эту функцию до минимума, удалив указанное? |
Часовой пояс GMT +3, время: 01:13. |