Кастомный блок «Поделиться» от Яндекса

Статус
В этой теме нельзя размещать новые ответы.

Красавчег

Завсегдатай
Регистрация
15 Мар 2010
Сообщения
906
Реакции
313
В общем, переделывал я тут как-то для себя Для просмотра ссылки Войди или Зарегистрируйся и вроде неплохо так получилось, что даже жалко) блин стало, что они у меня одного будут стоять (странно как-то - ведь обычно)) все наоборот происходит). В общем, решил я с вами поделиться своими кнопками "поделиться". Во, как сказанул)

Немного предыстории. Очень многие из нас ставят себе на сайты яндексовские соцкнопки (ну и я тоже, как вы уже наверное успели заметить) но они, блин, такие уже заезженные, что просто смотреть на них не хочется, не то что ставить себе на сайт. Ну, вот и решил я, короче, поэкспериментировать над ними. Главный смысл был в том, чтобы скрипт этих кнопок оставался "яндексовским" и соответственно, чтобы все переходы с этих кнопок (а возможно и другие действия) в ЯндексМетрике продолжали учитываться.

В общем, выкинул я оттуда и саму эту ЯндексКнопку с выпадающим окном и всю туеву хучу тех социалок, на которые нажимают наверное только какие-нибудь "редкие птицы, долетевшие до середины днепра". В общем оставил я там, на мой взгляд, только самое нужное. Еще раз хочу заметить, что скрипт при подключении используется родной "яндексовский", мы только меняем его внешний вид. Итак, поехали:


1-й вариант.

Хотелось чего-то стильного) и первый вариант я сделал "под металлик". При наведении на любую из кнопок она меняется на цветную.

Ниже скриншот как это выглядит. Поглядеть на это вживую и скачать исходники можно здесь: Для просмотра ссылки Войди или Зарегистрируйся

metallic.png



2-й вариант.

А почему бы не сделать наоборот? И сделал "цветной" вариант. Тут уже при наведении на любую цветную кнопку она становится серой.

Ниже скриншот как это выглядит, а посмотреть вживую и скачать исходники можно вот здесь: Для просмотра ссылки Войди или Зарегистрируйся

color.png



3-й вариант.

Ну, и выкладываю третий вариант (это я раньше экспериментировал) вот все думал, показывать или нет? Ну, да ладно. Может тоже кому-то пригодится. Итак, здесь можно у кнопки менять сам текст (это уже само по себе привлекает внимание посетителя, можно написать например: "тыкать сюды" или "Не жмись, ссылкой поделись" или вообще "Не смотри сюда, блеать!" а можно.. ох, что-то уже понесло меня) ну, в общем, можно менять у кнопки текст. Вот.

Далее, в выпадающее окно добавлено поле с урлом страницы для копирования (в скрипте по умолчанию яндексоиды его почему-то не сделали) и в это же выпадающее окно были засунуты ссылки на все-все-все социалки какие только можно было всунуть. Да и грех было) не засунуть - окно-то ведь свернутое всегда и эта куча кнопок никому глаза не мозолит, а так, глядишь, может какой "фриендфид" и тыкнет когда-нибудь.

Ну, а рядом с самой ЯндексКнопкой, опять же, вывел только самые нужные и наиболее часто, на мой взгляд, используемые (ну, может если только кроме кнопки "блоггера"). Опять же, любые кнопки вы там можете легко заменить, выкинуть или поставить именно нужные вам.

Ниже скриншот как это выглядит. Поглядеть на это вживую и скачать исходники можно здесь: Для просмотра ссылки Войди или Зарегистрируйся

custom.png



Ну, вот такие пироги, друзья. Вроде неплохо так получилось - сделали "неприевшиеся" кнопки для социалок и при этом не используем никаких скриптов сторонних сервисов. Вот.

P.S. - а еще, когда решил этим всем "добром" поделиться, всё думал куда бы файлы эти все скинуть, а потом взял да и тупо забубенил) это все на Для просмотра ссылки Войди или Зарегистрируйся - вот и польза от него)
 
а по ссылке то ни чего уже нет, либо браузер у мени совсем плох стал.
Проверьте пожалуйсто ссылку.
Так в первом посту же ссылки есть. Выбираешь вариант, нажимаешь на Сделать и скачиваешь архив.
 
хорошая работа, вот только не валидные кнопки.. 3 ошибки и все из-за data-yashareL10n="ru" data-yashareType="none"
в html5 это проходит валидацию, а как быть у кого доктайп "transitional", это как то лечится?
 
Ну, а моя-то в чем тут вина? :facepalm:это же Яндекса код: Для просмотра ссылки Войди или Зарегистрируйся
Предпочитаю использовать сервис
Скрытое содержимое доступно для зарегистрированных пользователей!

больше опций ,дизайн на мой взгляд посимпатичней
 
Последнее редактирование модератором:
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху