Comments 58
А что эти «ссылки» будут означать для пользователя который отключил javascript?
Для пользователя который отключил javascript, надобность в использовании социальных сетей, а тем более надобность шаринга, наверняка отсутствует
Ух ты сколько минусующих, вы что и вправду считаете что ссылки с onclick без href это нормально?
Нет, не считаю, но и ваш комментарий тоже не в тему.
Да, эти кнопко-ссылки можно было сделать с target="_blank", о отработку в pop-up сделать на js )
Да, эти кнопко-ссылки можно было сделать с target="_blank", о отработку в pop-up сделать на js )
Это и ссылками даже нельзя назвать, ссылка ведёт на конкретный адрес, здесь же у элементов «a» просто добавлено поведение onclick. Соответственно их надо скрывать от юзеров которые отключили у себя javascript. Или думать о пользователях без js тоже «не в тему»?
специально для вас — кошерный вариант, кошерней не бывает)
jsfiddle.net/rrZBR/1/
Так подумали о юзерах с js?)
jsfiddle.net/rrZBR/1/
Так подумали о юзерах с js?)
Да что Вы прицепились к ссылкам?
Если Вам не нравится тег a, сделайте через span, h1, p или что-нибудь ещё.
Я согласен с комментриующим Выше, что человек, который отключает js, вряд ли сидит в соц. сетях.
Представьте себе сами тот-же ВК, без JS. Ужас, правда?
Если Вам не нравится тег a, сделайте через span, h1, p или что-нибудь ещё.
Я согласен с комментриующим Выше, что человек, который отключает js, вряд ли сидит в соц. сетях.
Представьте себе сами тот-же ВК, без JS. Ужас, правда?
ВК вообще не пускает юзеров без JS
он тупо не работает без JS, как и 50% всех современных сайтов
ну тут вы не правы) я стараюсь свои сделать такими, чтобы основной функционал отрабатывал и без js, иначе правда, будет совсем плохо
с h1 переборщили
Слишком умные пользователи, которые отключают js, куки, картинки, css могут идти к черту.
Я к тому, что когда сам отключаю скрипты, вполне ожидаю, что половина функционала сайта вообще работать перестанет.
Я к тому, что когда сам отключаю скрипты, вполне ожидаю, что половина функционала сайта вообще работать перестанет.
Каков процент таких людей щас в %? Если отключили js — значит сами себя лишили функционала.
А что если люди сидят с ie 3.0?
А что если люди сидят с ie 3.0?
JavaScript отключают только сис админы и прогеры с «параноидальным синдромом безопастности», а большинство обычных пользователей вообще не в курсе что такое JavaScript и что его еще и отключить можно.
А как быть с теми пользователями которые нажав на кнопку шаринга, натолкнулись на ввод пароля, который, возможно забыли или просто передумали и решили не шарить контен или удалили после шаринга. Как их пересчитывать?
А как вы боретесь с блокировкой всплывающих окон?
Тот же вопрос назрел у меня сразу после прочтения. И проскочила мысль что можно сделать кастомное окошко (div «над» сайтом) где бы через iframe подгружался контент страницы шаринга. Единственное — незнаю, могут ли быть какие то проблемы изза защиты какойнить фреймов и т.д.
Теоретически — возможно. Хотя не пробовал
Попробовал: вставил на место вашего коммента iframe с vk.com/share.php.
Итог: не работает, «Security Breach».
Итог: не работает, «Security Breach».
Называется дело было вечером, делать было нечего :)
т.е. банально проверяем, вернулся ли объект window, если да, то все нормуль, если нет то прописываем ссылку и переходим на неё.
P.S.: Сорри что-то не нашел тэг спойлера, был ведь вроде или мне не доступен :(
Share = {
go: function(a, type, url, title, img, text) {
type = type || 'facebook';
url = url || location.href;
title= title|| document.title;
img = img || '';
text = text || '';
var urlSet = this[type](url, title, img, text);
var isOpened = this.popup(urlSet);
if (null === isOpened) {
a.href = urlSet;
return true;
}
return false;
},
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';
return 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);
return 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);
return url;
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
return 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);
return url;
},
popup: function(url) {
return window.open(url,'','toolbar=0,status=0,width=626,height=436');
}
};
<a href="" onclick="return Share.go(this)">like+</a>
т.е. банально проверяем, вернулся ли объект window, если да, то все нормуль, если нет то прописываем ссылку и переходим на неё.
P.S.: Сорри что-то не нашел тэг спойлера, был ведь вроде или мне не доступен :(
Улучшил и дополнил ваш вариант.
Улучшенная и дополненная версия на базе jQuery с опциями
Share = {
/**
* Показать пользователю дилог шаринга в сооветствии с опциями
* Метод для использования в inline-js в ссылках
* При блокировке всплывающего окна подставит нужный адрес и ползволит браузеру перейти по нему
*
* @example <a href="" onclick="return share.go(this)">like+</a>
*
* @param Object _element - элемент DOM, для которого
* @param Object _options - опции, все необязательны
*/
go: function(_element, _options) {
var
self = Share,
options = $.extend(
{
type: 'vk', // тип соцсети
url: location.href, // какую ссылку шарим
count_url: location.href, // для какой ссылки крутим счётчик
title: document.title, // заголовок шаринга
image: '', // картинка шаринга
text: '', // текст шаринга
},
$(_element).data(), // Если параметры заданы в data, то читаем их
_options // Параметры из вызова метода имеют наивысший приоритет
);
if (self.popup(link = self[options.type](options)) === null) {
// Если не удалось открыть попап
if ( $(_element).is('a') ) {
// Если это <a>, то подставляем адрес и просим браузер продолжить переход по ссылке
$(_element).prop('href', link);
return true;
}
else {
// Если это не <a>, то пытаемся перейти по адресу
location.href = link;
return false;
}
}
else {
// Попап успешно открыт, просим браузер не продолжать обработку
return false;
}
},
// ВКонтакте
vk: function(_options) {
var options = $.extend({
url: location.href,
title: document.title,
image: '',
text: '',
}, _options);
return 'http://vkontakte.ru/share.php?'
+ 'url=' + encodeURIComponent(options.url)
+ '&title=' + encodeURIComponent(options.title)
+ '&description=' + encodeURIComponent(options.text)
+ '&image=' + encodeURIComponent(options.image)
+ '&noparse=true';
},
// Одноклассники
ok: function(_options) {
var options = $.extend({
url: location.href,
text: '',
}, _options);
return 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1'
+ '&st.comments=' + encodeURIComponent(options.text)
+ '&st._surl=' + encodeURIComponent(options.url);
},
// Facebook
fb: function(_options) {
var options = $.extend({
url: location.href,
title: document.title,
image: '',
text: '',
}, _options);
return 'http://www.facebook.com/sharer.php?s=100'
+ '&p[title]=' + encodeURIComponent(options.title)
+ '&p[summary]=' + encodeURIComponent(options.text)
+ '&p[url]=' + encodeURIComponent(options.url)
+ '&p[images][0]=' + encodeURIComponent(options.image);
},
// Живой Журнал
lj: function(_options) {
var options = $.extend({
url: location.href,
title: document.title,
text: '',
}, _options);
return 'http://livejournal.com/update.bml?'
+ 'subject=' + encodeURIComponent(options.title)
+ '&event=' + encodeURIComponent(options.text + '<br/><a href="' + options.url + '">' + options.title + '</a>')
+ '&transform=1';
},
// Твиттер
tw: function(_options) {
var options = $.extend({
url: location.href,
count_url: location.href,
title: document.title,
}, _options);
return 'http://twitter.com/share?'
+ 'text=' + encodeURIComponent(options.title)
+ '&url=' + encodeURIComponent(options.url)
+ '&counturl=' + encodeURIComponent(options.count_url);
},
// Mail.Ru
mr: function(_options) {
var options = $.extend({
url: location.href,
title: document.title,
image: '',
text: '',
}, _options);
return 'http://connect.mail.ru/share?'
+ 'url=' + encodeURIComponent(options.url)
+ '&title=' + encodeURIComponent(options.title)
+ '&description=' + encodeURIComponent(options.text)
+ '&imageurl=' + encodeURIComponent(options.image);
},
// Открыть окно шаринга
popup: function(url) {
return window.open(url,'','toolbar=0,status=0,scrollbars=1,width=626,height=436');
}
}
// Все элементы класса .social_share считаем кнопками шаринга
$(document).on('click', '.social_share', function(){
Share.go(this);
});
// Пример кнопок с минимальной настройкой
<p>Поделиться:
<button class="social_share" data-type="vk">ВКонтакте</button>
<button class="social_share" data-type="fb">Facebook</button>
<button class="social_share" data-type="tw">Twitter</button>
<button class="social_share" data-type="lj">LiveJournal</button>
<button class="social_share" data-type="ok">Одноклассники</button>
<button class="social_share" data-type="mr">Mail.Ru</button>
</p>
Спасибо. вот еще кусочек для Google+
// Google+
gg: function (_options) {
var options = $.extend({
url: location.href
}, _options);
return 'https://plus.google.com/share?url='
+ encodeURIComponent(options.url);
},
Спасибо. Добавлю сюда еще кусок для LinkedIn.
//LinkedIn
li: function(_options) {
var options = $.extend({
url: location.href,
title: document.title,
text: ''
}, _options);
return 'http://www.linkedin.com/shareArticle?mini=true'
+ '&url=' + encodeURIComponent(options.url)
+ '&title=' + encodeURIComponent(options.title)
+ '&summary=' + encodeURIComponent(options.text);
},
Возникла необходимость так же размещать кнопки на странице списка новостей те кнопки должны быть под каждой новостью. Данные каждой страницы для каждой кнопки соответственно должны подставляться в шаблоне движка сайта динамически.
Разметка должна стать такой, добавляем атрибуты data:
Facebook
js пока не трогал, там есть где развернуться или надо все переписывать?
Разметка должна стать такой, добавляем атрибуты data:
js пока не трогал, там есть где развернуться или надо все переписывать?
добавил загрузку данных из meta-тегов OpenGraph:
Загрузка из OpenGraph
go: function(_element, _options) {
var
self = Share,
options = $.extend(
{
type: 'vk', // тип соцсети
url: location.href, // какую ссылку шарим
count_url: location.href, // для какой ссылки крутим счётчик
title: param('title'), // заголовок шаринга
image: param('image'), // картинка шаринга
text: param('description'), // текст шаринга
},
$(_element).data(), // Если параметры заданы в data, то читаем их
_options // Параметры из вызова метода имеют наивысший приоритет
);
if (self.popup(link = self[options.type](options)) === null) {
// Если не удалось открыть попап
if ( $(_element).is('a') ) {
// Если это <a>, то подставляем адрес и просим браузер продолжить переход по ссылке
$(_element).prop('href', link);
return true;
}
else {
// Если это не <a>, то пытаемся перейти по адресу
location.href = link;
return false;
}
}
else {
// Попап успешно открыт, просим браузер не продолжать обработку
return false;
}
function param(name) {
return $('meta[property=og\\:' + name + ']').attr('content');
}
},
Пользуюсь кодом из топика, нажимаю поделиться в одноклассниках, в окне такая надпись «Нет доступа к ресурсу», хотя в соседней вкладке открыты одноклассники. Погуглил, у кучи людей подобная проблема, но решения не нашел.
простите за некропостинг, но я запилил виджет для yii: github.com/wapmorgan/ShareWidget
Полезная ссылка на тему: api.yandex.ru/share/
А что означает параметр noparse в ссылке на ВК?
Столкнулся с проблемой, что при переходе по ссылке на шаринг вконтакте с мобильного устройства — на странице подтверждения диалога шеринга слетает кодировка у title и description полей. Все мои страницы и скрипты в UTF-8 и на десктопных браузерах все нормально, а вот на айфоне, например, кодировка слетает. Кто-нибудь знает как решить эту проблему?
Я так понимаю времени много прошло с момент публикации, и facebook чето поменял — имя картинка не подхватывается. Как то случайно он выбирает ее…
сейчас надо использовать разметку Open Graph в head страницы, мне помогло
<meta property="og:url" content="https://example.ru" />
<meta property="og:type" content="website" />
<meta property="og:title" content="тайтл" />
<meta property="og:description" content="описание" />
<meta property="og:image" content="https://example.ru/123/img.png" />
Да, только вот она любит кешироваться…
да, настраивать неудобно и оч запутано, в общем:
developers.facebook.com/tools/debug
для юзания нужно быть залогиненым, ввести там в форме урл, потом жмакнуть кнопку
developers.facebook.com/tools/debug
для юзания нужно быть залогиненым, ввести там в форме урл, потом жмакнуть кнопку
Debug, потом Fetch new scrape information
Может кому надо ещё )
Взято здесь
<script>
function fbShare(siteUrl, picture, title, caption, descr, winWidth, winHeight) {
var winTop = (screen.height / 2) - (winHeight / 2);
var winLeft = (screen.width / 2) - (winWidth / 2);
window.open('http://www.facebook.com/sharer.php?s=100&u=' + siteUrl + '&picture=' + picture + '&title=' + title + '&caption=' + caption , '&description=' + descr, 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
}
</script>
<a href="javascript:fbShare('https://habrahabr.ru/', 'https://изображение.jpg', 'Заголовок', 'Название сайта', 'Краткое описание', 520, 350)" class="facebook-share">Опубликовать на Facebook</a>
Взято здесь
Спасибо!
Sign up to leave a comment.
Элементарные социальные share-кнопки