Доброго времени суток, уважаемые специалисты.
Нашёл такой замечательный скрипт шаринга в социальные сети
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>
Этот же код в jsfiddle для наглядности
https://jsfiddle.net/8np6ejma/
Добавил вот этот код (надеюсь правильно?):
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_..- вроде как что-то с отслеживанием связано. Мне это не нужно. Как можно сократить эту функцию до минимума, удалив указанное?
