@freeman0204

Как немного доработать кастомные социальные share-кнопки?

Вообще мне нужно сделать социальные share-кнопки со своим дизайном. Делал по этой статье.

У меня только 2 вопроса.

Откуда взяты эти ссылки? Пытался взять по аналогии, не получилось. Нужно для гугл + d1b6a1404be7482e9b13144dcad5bd75.png

Как изменить стандартный текст и добавить фото?
0270e68f0b894908bf692a198c35fa3c.png
  • Вопрос задан
  • 343 просмотра
Решения вопроса 1
Про этот способ я не совсем понял. Но когда мне нужно сделать свой дизайн для социальных кнопок поделиться то я делаю так. С начало я подключаю к сайту блок Поделиться от Яндекса https://tech.yandex.ru/share/ с теми кнопками которые мне нужны. Дизайн на данный момент можно выбрать любой.
Затем в подключенном скрипте можно настроить этот блок таким способом.

new Ya.share({
	element: 'yaShare',
	elementStyle: {
		'type': 'button',
		'quickServices': ['vkontakte', 'facebook', 'gplus']
	},
	onready: function(instance) {
		$(instance._block).find('a.b-share__handle').each(function() {
			var el = $(this);
			el.removeClass();
			
			if (el.find('span').hasClass('b-share-icon_vkontakte')) {
				el.find('span').remove();
				el.append('<b class="icons-vk"></b>');
			}

			if (el.find('span').hasClass('b-share-icon_facebook')) {
				el.find('span').remove();
				el.append('<b class="icons-facebook"></b>');
			}

			if (el.find('span').hasClass('b-share-icon_gplus')) {
				el.find('span').remove();
				el.append('<b class="icons-google"></b>');
			}

			if (el.find('span').hasClass('b-share-form-button')) {
				el.find('span').remove();
			}
		});
	}
});

Из кода видно что после того как блок от Яндекса загружен в нем ищется и удаляются span'ы c дизайном от яндекса и вместо них добавляются блоки с теми классами с которыми вам необходимы.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы