Как стать автором
Обновить

Комментарии 58

А что эти «ссылки» будут означать для пользователя который отключил javascript?
Для пользователя который отключил javascript, надобность в использовании социальных сетей, а тем более надобность шаринга, наверняка отсутствует
Рановато вы за пользователей всё решили, раз уж делаете такие неправильные ссылки вы их хотя бы скрывайте через style=«display: none;»
Раз уж на то пошло, то все остальные кнопки, включая нативные от соцсетей, не работают без js. Вброс не засчитан)
Ух ты сколько минусующих, вы что и вправду считаете что ссылки с onclick без href это нормально?
Нет, не считаю, но и ваш комментарий тоже не в тему.
Да, эти кнопко-ссылки можно было сделать с target="_blank", о отработку в pop-up сделать на js )
Это и ссылками даже нельзя назвать, ссылка ведёт на конкретный адрес, здесь же у элементов «a» просто добавлено поведение onclick. Соответственно их надо скрывать от юзеров которые отключили у себя javascript. Или думать о пользователях без js тоже «не в тему»?
специально для вас — кошерный вариант, кошерней не бывает)
jsfiddle.net/rrZBR/1/
Так подумали о юзерах с js?)
Вот, спасибо, такой вариант не страшно на сайт ставить.
Хм, а вы ждали, что кто-то предложит более правильный вариант?) Могли бы не возмущаться, а предложить решение, которое нравится вам сами)
Мне кажется это стоило бы добавить в топик.
Предложите это топикстартеру)) он тут властелин и хозяин))
Да что Вы прицепились к ссылкам?
Если Вам не нравится тег a, сделайте через span, h1, p или что-нибудь ещё.
Я согласен с комментриующим Выше, что человек, который отключает js, вряд ли сидит в соц. сетях.
Представьте себе сами тот-же ВК, без JS. Ужас, правда?
ВК вообще не пускает юзеров без JS
он тупо не работает без JS, как и 50% всех современных сайтов
ну тут вы не правы) я стараюсь свои сделать такими, чтобы основной функционал отрабатывал и без js, иначе правда, будет совсем плохо
Да, я тоже стараюсь делать именно так.
Но как вы сделаете аякс-отправку формы, например, без JS`а?

Даже комментарии на хабре — тоже JS :)
Почему сразу ajax? Если работает js — делаем аякс, не работает? Идет стандартный post. А как уже разбить логику на стороне приложения — это ваше дело)
Это уже урезание функционала приложения :)
По-моему мы говорим о разных вещах, но никакого урезания нет и не будет ;-)
Чем ниже читаю комментарии, тем дальше они от темы топика. Давайте все же поговорим о кнопках. Они кошерные, не правда ли? xDD
с h1 переборщили
Слишком умные пользователи, которые отключают js, куки, картинки, css могут идти к черту.

Я к тому, что когда сам отключаю скрипты, вполне ожидаю, что половина функционала сайта вообще работать перестанет.
А я когда отключаю js надеюсь, что оно все-таки заработает. Надежда умирает последней
Каков процент таких людей щас в %? Если отключили js — значит сами себя лишили функционала.
А что если люди сидят с ie 3.0?
JavaScript отключают только сис админы и прогеры с «параноидальным синдромом безопастности», а большинство обычных пользователей вообще не в курсе что такое JavaScript и что его еще и отключить можно.
Не только…

image
А как быть с теми пользователями которые нажав на кнопку шаринга, натолкнулись на ввод пароля, который, возможно забыли или просто передумали и решили не шарить контен или удалили после шаринга. Как их пересчитывать?
… надо было отследить статистику нажатий именно на кнопку шаринга...
Не скажу точно за все сервисы, но возможность обратиться по url сервиса, передать свой url и узнать сколько раз расшарили имеется)
Точно так и делаю! По карте сайта делаю запросы каждый час и кэширую результаты… Представленный вариант в топите крайне не точен.
А как вы боретесь с блокировкой всплывающих окон?
Тот же вопрос назрел у меня сразу после прочтения. И проскочила мысль что можно сделать кастомное окошко (div «над» сайтом) где бы через iframe подгружался контент страницы шаринга. Единственное — незнаю, могут ли быть какие то проблемы изза защиты какойнить фреймов и т.д.
Теоретически — возможно. Хотя не пробовал
Называется дело было вечером, делать было нечего :)
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 пока не трогал, там есть где развернуться или надо все переписывать?
Упс, хабр сьел код

<button data-type="vk" data-url="" data-title="" data-text="" data-image="">ВКонтакте</button>
Или скрипт подразумевает данные в data-*? Не работает.
Все, пардон, нашел баг в своем коде, супер что работает.
добавил загрузку данных из 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');
        }
    },

Пользуюсь кодом из топика, нажимаю поделиться в одноклассниках, в окне такая надпись «Нет доступа к ресурсу», хотя в соседней вкладке открыты одноклассники. Погуглил, у кучи людей подобная проблема, но решения не нашел.
А что означает параметр noparse в ссылке на ВК?
Столкнулся с проблемой, что при переходе по ссылке на шаринг вконтакте с мобильного устройства — на странице подтверждения диалога шеринга слетает кодировка у title и description полей. Все мои страницы и скрипты в UTF-8 и на десктопных браузерах все нормально, а вот на айфоне, например, кодировка слетает. Кто-нибудь знает как решить эту проблему?
Если кто-то столкнется с такой проблемой, то временно я ее решил детектор мобильных устройств и заменой линка на m.vk.com/share.php тк кодировка ломается во время редиректа с обычного домена на m
Я так понимаю времени много прошло с момент публикации, и 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
для юзания нужно быть залогиненым, ввести там в форме урл, потом жмакнуть кнопку 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>


Взято здесь
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.