WuWu 25 окт 2012 в 21:16

Элементарные социальные share-кнопки

3 мин

195K

Веб-разработка *

Туториал

+58

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

CyberAP 25 окт 2012 в 21:36

А что эти «ссылки» будут означать для пользователя который отключил javascript?

WuWu 25 окт 2012 в 21:40

Для пользователя который отключил javascript, надобность в использовании социальных сетей, а тем более надобность шаринга, наверняка отсутствует

CyberAP 25 окт 2012 в 22:07

Рановато вы за пользователей всё решили, раз уж делаете такие неправильные ссылки вы их хотя бы скрывайте через style=«display: none;»

xmdy 25 окт 2012 в 23:06

Раз уж на то пошло, то все остальные кнопки, включая нативные от соцсетей, не работают без js. Вброс не засчитан)

CyberAP 25 окт 2012 в 23:07

Ух ты сколько минусующих, вы что и вправду считаете что ссылки с onclick без href это нормально?

xmdy 25 окт 2012 в 23:09

Нет, не считаю, но и ваш комментарий тоже не в тему.
Да, эти кнопко-ссылки можно было сделать с target="_blank", о отработку в pop-up сделать на js )

CyberAP 25 окт 2012 в 23:11

Это и ссылками даже нельзя назвать, ссылка ведёт на конкретный адрес, здесь же у элементов «a» просто добавлено поведение onclick. Соответственно их надо скрывать от юзеров которые отключили у себя javascript. Или думать о пользователях без js тоже «не в тему»?

xmdy 25 окт 2012 в 23:21

специально для вас — кошерный вариант, кошерней не бывает)
jsfiddle.net/rrZBR/1/
Так подумали о юзерах с js?)

CyberAP 25 окт 2012 в 23:49

Вот, спасибо, такой вариант не страшно на сайт ставить.

xmdy 26 окт 2012 в 08:55

Хм, а вы ждали, что кто-то предложит более правильный вариант?) Могли бы не возмущаться, а предложить решение, которое нравится вам сами)

someoneisusingmyusualnick 26 окт 2012 в 09:54

Мне кажется это стоило бы добавить в топик.

xmdy 26 окт 2012 в 09:58

Предложите это топикстартеру)) он тут властелин и хозяин))

kovalevsky 25 окт 2012 в 23:22

Да что Вы прицепились к ссылкам?
Если Вам не нравится тег a, сделайте через span, h1, p или что-нибудь ещё.
Я согласен с комментриующим Выше, что человек, который отключает js, вряд ли сидит в соц. сетях.
Представьте себе сами тот-же ВК, без JS. Ужас, правда?

Tairesh 26 окт 2012 в 04:51

ВК вообще не пускает юзеров без JS

Akuma 26 окт 2012 в 04:52

он тупо не работает без JS, как и 50% всех современных сайтов

xmdy 26 окт 2012 в 08:56

ну тут вы не правы) я стараюсь свои сделать такими, чтобы основной функционал отрабатывал и без js, иначе правда, будет совсем плохо

Akuma 26 окт 2012 в 09:45

Да, я тоже стараюсь делать именно так.
Но как вы сделаете аякс-отправку формы, например, без JS`а?

Даже комментарии на хабре — тоже JS :)

xmdy 26 окт 2012 в 09:47

Почему сразу ajax? Если работает js — делаем аякс, не работает? Идет стандартный post. А как уже разбить логику на стороне приложения — это ваше дело)

Akuma 26 окт 2012 в 10:07

Это уже урезание функционала приложения :)

xmdy 26 окт 2012 в 10:08

По-моему мы говорим о разных вещах, но никакого урезания нет и не будет ;-)

DimaLondon 28 окт 2012 в 09:15

Чем ниже читаю комментарии, тем дальше они от темы топика. Давайте все же поговорим о кнопках. Они кошерные, не правда ли? xDD

BusteR27 26 окт 2012 в 05:35

с h1 переборщили

Gavrylyuk 26 окт 2012 в 05:32

Слишком умные пользователи, которые отключают js, куки, картинки, css могут идти к черту.

Я к тому, что когда сам отключаю скрипты, вполне ожидаю, что половина функционала сайта вообще работать перестанет.

nsinreal 26 окт 2012 в 09:21

А я когда отключаю js надеюсь, что оно все-таки заработает. Надежда умирает последней

Sirian 26 окт 2012 в 05:45

Каков процент таких людей щас в %? Если отключили js — значит сами себя лишили функционала.
А что если люди сидят с ie 3.0?

djlexs 26 окт 2012 в 05:50

JavaScript отключают только сис админы и прогеры с «параноидальным синдромом безопастности», а большинство обычных пользователей вообще не в курсе что такое JavaScript и что его еще и отключить можно.

Tairesh 26 окт 2012 в 09:12

Не только…

rumkin 25 окт 2012 в 23:23

А как быть с теми пользователями которые нажав на кнопку шаринга, натолкнулись на ввод пароля, который, возможно забыли или просто передумали и решили не шарить контен или удалили после шаринга. Как их пересчитывать?

kovalevsky 25 окт 2012 в 23:26

… надо было отследить статистику нажатий именно на кнопку шаринга...

xmdy 25 окт 2012 в 23:27

Не скажу точно за все сервисы, но возможность обратиться по url сервиса, передать свой url и узнать сколько раз расшарили имеется)

C_oO_re 26 окт 2012 в 05:10

Точно так и делаю! По карте сайта делаю запросы каждый час и кэширую результаты… Представленный вариант в топите крайне не точен.

Akuma 26 окт 2012 в 04:04

А как вы боретесь с блокировкой всплывающих окон?

HoochieMen 26 окт 2012 в 06:34

Тот же вопрос назрел у меня сразу после прочтения. И проскочила мысль что можно сделать кастомное окошко (div «над» сайтом) где бы через iframe подгружался контент страницы шаринга. Единственное — незнаю, могут ли быть какие то проблемы изза защиты какойнить фреймов и т.д.

Akuma 26 окт 2012 в 07:10

Теоретически — возможно. Хотя не пробовал

HeadFore 26 окт 2012 в 10:36

Попробовал: вставил на место вашего коммента iframe с vk.com/share.php.
Итог: не работает, «Security Breach».

Demphest 26 окт 2012 в 12:11

Называется дело было вечером, делать было нечего :)

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.: Сорри что-то не нашел тэг спойлера, был ведь вроде или мне не доступен :(

rubyrabbit 29 окт 2012 в 15:32

Улучшил и дополнил ваш вариант.

rubyrabbit 29 окт 2012 в 15:31

Улучшенная и дополненная версия на базе 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>

Irv 1 дек 2013 в 16:56

Спасибо. вот еще кусочек для Google+

// Google+
	gg: function (_options) {
		var options = $.extend({
			url: location.href			
		}, _options);

		return 'https://plus.google.com/share?url='
			+ encodeURIComponent(options.url);
	},

doxa 21 июл 2014 в 10:08

Спасибо. Добавлю сюда еще кусок для 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);
},

anephew 24 июл 2014 в 06:40

Возникла необходимость так же размещать кнопки на странице списка новостей те кнопки должны быть под каждой новостью. Данные каждой страницы для каждой кнопки соответственно должны подставляться в шаблоне движка сайта динамически.

Разметка должна стать такой, добавляем атрибуты data:
Facebook

js пока не трогал, там есть где развернуться или надо все переписывать?

anephew 24 июл 2014 в 07:17

Упс, хабр сьел код

<button data-type="vk" data-url="" data-title="" data-text="" data-image="">ВКонтакте</button>

anephew 24 июл 2014 в 08:22

Или скрипт подразумевает данные в data-*? Не работает.

anephew 24 июл 2014 в 08:29

Все, пардон, нашел баг в своем коде, супер что работает.

lexxpavlov 23 апр 2015 в 21:07

добавил загрузку данных из 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');
        }
    },

dali 16 ноя 2012 в 19:23

Пользуюсь кодом из топика, нажимаю поделиться в одноклассниках, в окне такая надпись «Нет доступа к ресурсу», хотя в соседней вкладке открыты одноклассники. Погуглил, у кучи людей подобная проблема, но решения не нашел.

wapmorgan 4 окт 2013 в 18:02

простите за некропостинг, но я запилил виджет для yii: github.com/wapmorgan/ShareWidget

gkislin 10 окт 2014 в 19:04

Полезная ссылка на тему: api.yandex.ru/share/

Kozack 16 мар 2015 в 22:48

А что означает параметр noparse в ссылке на ВК?

anephew 17 мар 2015 в 06:00

vk.com/dev/share_details

simpel 26 мая 2015 в 20:32

Столкнулся с проблемой, что при переходе по ссылке на шаринг вконтакте с мобильного устройства — на странице подтверждения диалога шеринга слетает кодировка у title и description полей. Все мои страницы и скрипты в UTF-8 и на десктопных браузерах все нормально, а вот на айфоне, например, кодировка слетает. Кто-нибудь знает как решить эту проблему?

simpel 27 мая 2015 в 02:31

Если кто-то столкнется с такой проблемой, то временно я ее решил детектор мобильных устройств и заменой линка на m.vk.com/share.php тк кодировка ломается во время редиректа с обычного домена на m

m4a1fox 1 окт 2015 в 11:06

Я так понимаю времени много прошло с момент публикации, и facebook чето поменял — имя картинка не подхватывается. Как то случайно он выбирает ее…

tegArt 1 окт 2015 в 12:53

сейчас надо использовать разметку 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" />

grigor7 13 окт 2015 в 11:38

Да, только вот она любит кешироваться…

tegArt 13 окт 2015 в 12:33

да, настраивать неудобно и оч запутано, в общем:
developers.facebook.com/tools/debug
для юзания нужно быть залогиненым, ввести там в форме урл, потом жмакнуть кнопку Debug, потом Fetch new scrape information

antoscenco-vladimir 10 янв 2017 в 02:43

Может кому надо ещё )

<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>

Взято здесь

barney 25 мая 2016 в 07:11

Спасибо!

Зарегистрируйтесь на Хабре, чтобы оставить комментарий