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

Тема в разделе "Веб-дизайн", создана пользователем Красавчег, 2 ноя 2012.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Красавчег

    Красавчег Завсегдатай

    Регистр.:
    15 мар 2010
    Сообщения:
    902
    Симпатии:
    298
    В общем, переделывал я тут как-то для себя блок "Поделиться" от Яндекса и вроде неплохо так получилось, что даже жалко) блин стало, что они у меня одного будут стоять (странно как-то - ведь обычно)) все наоборот происходит). В общем, решил я с вами поделиться своими кнопками "поделиться". Во, как сказанул)

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

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


    1-й вариант.

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

    Ниже скриншот как это выглядит. Поглядеть на это вживую и скачать исходники можно здесь: http://yashare.narod.ru/index.html

    [​IMG]


    2-й вариант.

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

    Ниже скриншот как это выглядит, а посмотреть вживую и скачать исходники можно вот здесь: http://yashare.narod.ru/variant2.html

    [​IMG]


    3-й вариант.

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

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

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

    Ниже скриншот как это выглядит. Поглядеть на это вживую и скачать исходники можно здесь: http://yashare.narod.ru/variant3.html

    [​IMG]


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

    P.S. - а еще, когда решил этим всем "добром" поделиться, всё думал куда бы файлы эти все скинуть, а потом взял да и тупо забубенил) это все на http://narod.yandex.ru/ - вот и польза от него)
     
    boomberman, SEOKinG, vita189 и 6 другим нравится это.
  2. _sergey_

    _sergey_ Писатель

    Регистр.:
    1 окт 2008
    Сообщения:
    1.744
    Симпатии:
    1.154
    Так в первом посту же ссылки есть. Выбираешь вариант, нажимаешь на Сделать и скачиваешь архив.
     
  3. Sirofim

    Sirofim Писатель

    Регистр.:
    8 ноя 2012
    Сообщения:
    6
    Симпатии:
    1
    хорошая работа, вот только не валидные кнопки.. 3 ошибки и все из-за data-yashareL10n="ru" data-yashareType="none"
    в html5 это проходит валидацию, а как быть у кого доктайп "transitional", это как то лечится?
     
  4. Красавчег

    Красавчег Завсегдатай

    Регистр.:
    15 мар 2010
    Сообщения:
    902
    Симпатии:
    298
    Ну, а моя-то в чем тут вина? :facepalm:это же Яндекса код: http://api.yandex.ru/share/
     
  5. arsen

    arsen НЕрядовой

    Регистр.:
    16 июн 2011
    Сообщения:
    857
    Симпатии:
    305
    Предпочитаю использовать сервис

    больше опций ,дизайн на мой взгляд посимпатичней
     
    Последнее редактирование модератором: 7 янв 2015
    evolvent нравится это.
  6. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    776
    Симпатии:
    230
Статус темы:
Закрыта.