1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.

Кнопки "Поделиться" на вашем сайте

Тема в разделе "WEB-ресурсы", создана пользователем 3aвулoн, 13.01.16.

  1. 3aвулoн

    3aвулoн Активный участник

    11.318
    341
    Дома забыл телефон и флешку с домашней работой, посему есть немного времени, хочу принести пользу сообществу.

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

    Итак, что делаем

    1. идем на сайт https://tech.yandex.ru/share/?3?3, подбираем себе нужные кнопки, затем жмем мышкой "исследовать элемент" и прямо в коде страницы подписываем кнопкам свои тексты.

    2. делаем скриншот, вырезаем из него кнопки, сохраняем их в png

    3. формируем правильные урлы для ccылок, по которым будет переход по нажатию на кнопку, например для Друпала это как то так
    4. вставляем кнопки куда надо, радуемся простоте и красоте :) например в интернет магазине у меня получилось так

    [​IMG]

    Буду рад критике, мож и правда косяк где а я не вижу :)
     

    Вложения:

    • sbb.jpg
      sbb.jpg
      Размер файла:
      13,7 КБ
      Просмотров:
      175
  2. имя

    имя Активный участник

    9.406
    112
    :d:d
    По мне так, на ВФ просто круть крутейшая по сравнению с тем, что у тебя получилось, Александр. Прости, ничего личного. Просто имха:d:d
     
  3. 3aвулoн

    3aвулoн Активный участник

    11.318
    341
    имя, а я не обижаюсь, мне реально будет ПОЛЕЗНА твоя критика как незаинтересованного человека - почему ты считаешь так?

    что плохо? спасибо!
     
  4. имя

    имя Активный участник

    9.406
    112
    Я считаю, что каждый элемент или группа элементов на странице должна гармонировать с окружающим контентом. Вот на ВФ есть 7 иконок соцхрени вверху. Они расположены очень компактно, и те посетители, которые "делятся", знают, какая кнопка какой ресурс представляет. Они легко смогут разобраться, и другим, типа меня они незаметны и не мешают. А вот если микрон их сделает по твоему подобию (эдакие полосы с текстами), то куды ж их девать то? Куда лепить их прикажешь?
    Дальше лично моя имха: я никогда не жмакаю по этим иконкам, и если я увижу их на каком-нибудь ресурсе в том виде, что предлагаешь ты, то у меня создастся впечатление "дешевости" ресурса, которому не хватает траффика и он всячески старается "попросить" посетителей рассказать еще кому-то там где-то о нем, и как будто бы "орет", размещая эти очень пестрящие кнопки.
    У меня на сайте где-то там в низу в самом углу футера есть тоже пара иконок соцсетей. Но они во-первых размером с атом, а во-вторых ведут просто на нашу страницу втам, в той соцсети. Страницы эти к слову толком никто не ведет)))
     
  5. 3aвулoн

    3aвулoн Активный участник

    11.318
    341
    все верно. они настолько незаметны, что ни я ни моя жена по ним не жали ни разу (это правда). с учетом того, что я тут на форуме с 2002 года и постов (не считал) наверняка за 20000 - это показатель.

    Кнопок просто не замечают. Если бы замечали - может и жали бы... И именно поэтому хотелось сделать кнопки заметными.

    ---------- Сообщение добавлено 13.01.2016 11:41 ----------

    ну у меня было пустое место в карточке товара :) понятно что всем это не подойдет. НО в предлагаемом мной способе можно там написать короткий текст (или не писать вовсе), и сделать кнопки компактно-квадратными как тебе нравится. Основная идея там была - не использовать сторонних JS.

    ---------- Сообщение добавлено 13.01.2016 12:18 ----------

    вот это кстати интересно - почему у тебя сложилось таком мнение? - цвета кнопок никто не менял, они как бы стандартные для кнопок такого типа.
     
  6. Флавиус

    Флавиус Активный участник

    8.310
    49
    Кнопки должны вписываться в дизайн сайта.
    И писать на каждой 'Поделиться' не стоит. Кнопки занимают много места, особенно на мобильнике.
    Плюс делать кнопки картинками не лучшее решение.

    Я для своих сайтов предпочитаю делать подобные кнопки квадратными (или круглыми) используя для оформления только css и шрифты-наборы иконок, например http://fontawesome.io/icons/

    Получаются хорошие, компактные кнопки, которые к тому же отлично выглядят на retina-дисплеях.
     
  7. 3aвулoн

    3aвулoн Активный участник

    11.318
    341
    тестировал именно то, что на скриншоте - на мобильнике смотрится просто офигенно.
    почему? спасибо! поясню - те кнопки-картинки по размеру занимают считанные байты. а тянуть извне fontawesome (или генерировать свой шрифт с минимальным набором символов), изгиляться с CSS - смысл? я не спорю, я именно хочу понять.

    единственное может проблема в айфонах (проверить не могу - ни у кого их нет), и там эта картинка станет мелкой?
     
  8. Флавиус

    Флавиус Активный участник

    8.310
    49
    Потому что на Айпадах и топовых андроидах используется масштабирование x2. Мелкая графика часто выглядит плохо - несколько размыто.

    Я чаще всего использую fontawesome не только для лайков. Там и элементы оформления, типа корзины, сортировки, удаления\добавления, там и кнопки управления, логотипы платежных систем и т.д.
    Т.е. если делать сайт с нуля, можно учесть внедрение этого шрифта.

    Я в последнее время делаю много работы для загнивающего Запада, за богомерзские зеленые бумажки, а там они любят интерфейсы в стиле Андроид или Видовс 10. Иконки туда вписываются идеально. А fontawesome почти что стандарт, ну типа jquery или bootstap.

    Но в данном случае, действительно, только для лайков цеплять шрифт нет смысла. Я сразу не посмотрел, а сейчас глянул - яндекс для логотипов на кнопках использует SVG, и на мобилках все должно хорошо выглядеть.

    Я и не говорю, что оно плохо смотриться.
    Насчет иконок без надписей, - это моё IMHO.
    Во первых, у тебя там только три иконки, добавь еще пару сервисов, и на мобилках иконки в один ряд не влезут, и будет уже не так красиво. Я чаще всего делаю проекты для других, поэтому стараюсь чтобы подобные элементы были масштабируемыми. Квадратные кнопки занимают меньше места по ширине их проще размещать симметрично.
    А во вторых, в большую квадратную кнопку на мобильнике удобней тыкать пальцем, чем в узкую прямоугольную.
     
  9. 3aвулoн

    3aвулoн Активный участник

    11.318
    341
    кста, тут я тупанул, оно у меня действительно подключено и активно используется.
    я реально не понимаю проблемы. вот сейчас сижу за 1920рх монитором. браузер развернут на весь экран, все смотрится чудесно.
    Начинаю сужать окошко браузера. По достижению каких то ширин (наизусть уже и не помню) у меня дизайн перестривается пару тройку раз, вплоть до самого узкого (который я и вижу на мобиле) - все это время эти кнопки выглядят чудесно. гугл пишет (по памяти) что удобство для мобильных пользователей толи 99% толи чтото около этого...
    Как мне добиться "не так красивого" масштабирования, где тут собака порыта? (((
    а есть смысл для российского пользователя? я чет думал думал и решил что нет :shuffle:
     
  10. Флавиус

    Флавиус Активный участник

    8.310
    49
    На живом телефоне оно несколько иначе. Плотность пикселей другая
    Например у Галакси С5 разрешение 1920х1080. Но ширина контента будет где-то в районе 480px. И кнопка, сделанная картинкой может стать или маленькой и неудобной, или увеличиться, но будет размытой.
    Кнопки, сделанные на css + шрифты или svg такой проблемы лишены.

    Смотря что ты на сайте делаешь. Инстаргам и Ютуб могут быть вполне актуальны. Гугл+ тоже популярен в некоторых кругах.
     
  11. 3aвулoн

    3aвулoн Активный участник

    11.318
    341
    понял! спасибо!
     
  12. 3aвулoн

    3aвулoн Активный участник

    11.318
    341
    сижу сейчас на госуслугах (там до них дозвониться как до Пекину, поэтому есть время) и что я вижу?

    [​IMG]

    размер кнопок ровно такой же :)
     

    Вложения:

    • gosus.jpg
      gosus.jpg
      Размер файла:
      40,9 КБ
      Просмотров:
      119
  13. имя

    имя Активный участник

    9.406
    112
    У меня наверное другие госулуги)))
     

    Вложения:

    • 55.jpg
      55.jpg
      Размер файла:
      37,4 КБ
      Просмотров:
      60
  14. 3aвулoн

    3aвулoн Активный участник

    11.318
    341
    имя, проверь себя на неоплаченные штрафы ГИБДД, там внизу, под табличкой с твоими штрафами, и будут эти кнопки "Поделиться" :d
     
  15. имя

    имя Активный участник

    9.406
    112
    Да, есть. Вот видишь, даже госконтора спрятала их хрен знает куда, а на всех остальных страницах (и на той кстати тоже) все нормально и органично.
    Я еще не понял, чем мне там предлагается поделиться? Моими штрафами?)))
     
  16. Флавиус

    Флавиус Активный участник

    8.310
    49
    Это скорее не 'ПОДЕЛИТЬСЯ', это ближе к лайкам. Плюс нажатии на кнопку в ленте у нажавшего в ленте появиться текст типа 'Я воспользовался сервисом..... и ссылка на сайт'