Как установить кнопки социальных сетей со своим дизайном и счетчиком

кнопки поделиться в соц сетях свой дизайнВсем доброго времени суток!
Этот день знаменателен для моего блога, потому что на нем наконец-то появится статья о том, как установить на сайт кнопки «Поделиться» :)

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

И когда однажды я захотела сделать блок «Поделиться» таким же красивым, как, например, у Борисова, пришлось поломать голову. Где-то в глубине души я догадывалась, что обычным html-кодом тут не обойтись, нужен скрипт. Но где его взять, если в jQuery ты полный ноль? К счастью, решение все-таки нашлось, поэтому оставляю очередную шпаргалку.

Рекомендую вам сервис share24.com на котором можно не только сгенерировать блок кнопок социальных сетей, но и скачать его себе. А раз есть возможность закачать, значит можно и отредактировать на свое усмотрение.

Я записала для вас видео, в котором показываю установку кнопок социальных сетей на примере своего сайта. Сайт, как вы, наверное догадываетесь, на MODx Revolution. Впрочем, основная часть видео будет полезна владельцам сайтов и блогов на любой CMS.

Еще раз краткий план действий:

  1. Создаем единый png-файл с изображением всех иконок;
  2. Генерируем скрипт на share24.com;
  3. Скачиваем скрипт, редактируем стили в файле share42.js;
  4. Подключаем share42.js скрипта в хедере сайта, если у вас уже есть подключенные скрипты компрессируем все файлы в один на www.refresh-sf.com;
  5. Заливаем скрипт и наш файл с иконками на сервер;
  6. Добавляем стили в свой .css файл;
  7. Копируем код на страницах сайта.

В итоге мы не только получаем индивидуальный дизайн кнопок добавления материала в социальные сети, но и оптимизируем код: подключен только один скрипт, нет лишнего кода в футере или в шапке, все иконки аккуратные, одного размера, а для отображения кнопок используется только один графический файл.

Еще несколько заметок для вебмастеров:

  • http://web-koshka.ru Web-Кошка

    Оля, а обязательно спрайт использовать? Для него же сложно стили писать…

    • Ольга

      Лариса, стиль каждой кнопки генерирует скрипт. Область бэкграунда для каждой иконки формируется автоматически. То есть, без спрайта тут не обойтись.

      • http://web-koshka.ru Web-Кошка

        Поняла. Тогда это отличный вариант. Я просто прочитала про в шестом пункте инструкции, а видео, конечно, не смотрела — вот и подумала, что это про стили позиционирования речь. Вручную намучаешься…

        • Ольга

          В шестом пункте вообще все просто — нужно скопировать код с сайта share42 и вставить в свой css.

  • http://ideafox.ru Дмитрий

    Хороший у тебя голос, Ольга)

    У меня никак не доходят руки поменять/добавить свои соц. кнопки… с другой стороны, если их слишком много, то они довольно сильно тормозят загрузку страницы.

    Как-то тестировал — разница довольно заметная.

    • Ольга

      Спасибо, Дима! Так было не всегда))))

      По поводу нагрузки: в этом варианте блока используется один скрипт на все иконки, по идее, нагрузка никак не должна увеличиться. Впрочем, здесь я не спец.

  • http://artabr.ru Артем

    Привет, Ольга! Хороший скрипт, я про него тоже как-о писал. А то, что можно заменить кнопки своими не догнал…
    Вот только вопрос, а что значит «компрессируем все файлы в один на http://www.refresh-sf.com;». Это как это? То есть если у меня несколько скриптов, то можно их совместить в один и они будут работать?
    И еще, а картинки кнопок должны только в png или можно векторные форматы применять?

    Надо будет попробовать, а то скрипты от вк и фб реально тормозят сайт.

    И хватит прибедняться, что не разбираешься в jQuery, вон как лихо код правила)))

    • Ольга

      Привет, Артем! Да, можно объединить все js-файлы, которые у тебя подключены, в один. Плюс скрипт «сжимает» код, убирает все лишнее, в итоге файл получается меньше по объему.

      Векторные форматы это какие? По идее, можно, наверное и jpg использовать или gif, но тогда в скрипте нужно найти, где прописано название файла спрайта.

      • http://artabr.ru Артем

        Хм, интересно. Тогда заказываю тебе пост, о том как сжимать скрипты, что довольно актуально. А еще вопрос, а если скрипты подгружаются со сторонних ресурсов, тогда их можно как-то сжать?

        Векторные форматы это форматы рисунков типа svg. Довольно удобный формат — можно и в браузере просматривать и в векторном редакторе типа Иллюстратора редактировать. И CSS с ним на ура работает, особенно в плане спрайтов.

        • Ольга

          Тема не тянет на пост)))) В видео все есть: заходишь на сайт, выбираешь файлы со своего компа и получаешь оптимизированный код. Все! Сторонние скрипты так не получится сжать.

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

          • http://artabr.ru Артем

            Значит я не внимательно видео смотрел, пересмотрю.

            Про svg сам недавно узнал, но попробовал применить и удобно оказалась. Себе так кнопки делал, удобнее со спрайтами работать.

  • http://borodatiy-admin.ru/ Бородатый админ

    Послушал только из-за красивого и поставленного голоса — меня кнопки не очень интересуют. Борисов сделал себе дизайн вычурным, а блог превратился в банальный, поэтому не нужны мне кнопки :) Даже я АБ комментирую только из за топа комментаторов. Хотя вру — не всегда и комментирую.
    Кстати, а когда ты закончишь книгу о MODх? Пора Бородатому админу чего нибудь полезное почитать. Ну и видео обязательно… послушать:) Кто то еще плакался, что она перфекционист. Так это же дает отличные результаты!

    • Ольга

      Привет! Вопрос. конечно, интересный :) Вообще, планировала закончить курс в сентябре, но была форс-мажорная неделя, одним словом, из графика выбилась.

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

      • http://borodatiy-admin.ru Бородатый админ

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

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

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

        • http://borodatiy-admin.ru Бородатый админ

          В последнем абзаце переоптимизация :)
          Сказывается изучение сео. Теперь заходит Бородатый админ в бар, ресторан, купить алкогольные напитки, клубы, лучшие пивные бары в Киеве, заказать банкет в ресторане…

        • Ольга

          Что ж, попробую кратко и простыми словами описать элементарные вещи))) Спасибо!
          Гигахост не радует… сейчас две сайта у меня лежат, а тех.поддержка. видать, отдыхает.

          • http://borodatiy-admin.ru Бородатый админ

            Вот видишь, уже и Гигахост лежит. Представь, что на нем неограниченное число твоих сайтов, которые приносят неограниченное количество денег.

            Главное, чтобы хватило знаний описать, да еще и кратко. У меня по теме выбора домена и хостинга больше вопросов, чем ответов. Что не мешает практически суетиться.

            • Ольга

              Черт, зря я так о Гигахосте, оказалось, это мой провайдер что-то у себя крутил, половина сайтов вообще не открывалась)))

  • http://mainliberhous.ru Богдан

    Действительно, если захотеть выраженной индивидуальности, то можно и позаморачиваться. А так — слишком много телодвижений (копировать, вставить, копрессировать, править, снова копировать… :) ) и всё для того, что бы кнопки были не такие, как у всех.
    Это ещё и графику надо где-то найти? В идеале так ещё и сидеть самому рисовать в фотожабе — что бы уж точно уникальный дизайн был.
    На этом блоге вот кнопки от сервиса Pluso смотрятся очень даже неплохо. И, главное, выполняют своё предназначение! А то будешь кнопки рисовать полчаса — а по ним и клацать никто не станет. Обидно :(

    • Ольга

      Богдан, красота требует жертв :) Плюсо — хорошее решение, но лично меня оно не полностью устраивает. Во-первых, это сторонний скрипт и грузится дольше. Во-вторых, счетчик кривой, можно натыкать себе сколько угодно плюсов. Хотя, многие скажут, что это наоборот хорошо — не надо лайки покупать)))

  • http://mainliberhous.ru Богдан

    А, чуть не забыл пропеть дифирамбы кулинарному блогу! Что сказать — на загляденье! Хоть я не женская аудитория — но мне блог понравился. «…да ты настоящий мастер, Карло!…»

    • Ольга

      Спасибо :)

  • Николай Текстов

    Привет! Этот комментарий будет конструктивным. Звучания видео на Высоте. А вот доходчивость сюжета меня запутала.
    Поэтому я и установи кнопки от сервиса (pluso) вроде как их скрип нормально грузиться. И его установка очень проста!

    • Ольга

      Николай, спасибо за конструктив))) Буду учиться говорить понятнее.

      • Николай Текстов

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

        • Ольга

          Только код, чтобы не набирать вручную во время записи. Я его просто копировала.

          • Николай Текстов

            Я наверное неправильно сформулировал вопрос :(
            Подготавливала ли ТЫ текст(сюжет) для записи видео, точнее читала с листочка или импровизировал?
            Просто в своих постах ТЫ писала, что ТЫ являешься сторонником зачитанных текстов.
            Во время просмотра видео урока у меня сложилось мнения, что текст для сюжета был подготовлен.

            • Ольга

              Николай, я поняла. К подкасту готовила только код, текст не прописывала.

  • http://myworkpro.ru Александр

    Могу как вариант посоветовать сервис http://share.pluso.ru. Там есть шаблоны кнопок, которые вы Ольга у себя в видео уроке на фотошопе рисовали.
    С ютубом начали работать — это хорошо. Со временем надеюсь благодаря этому сервису у вас станет большое число подписчиков.
    Запись классная!! Сразу чувствуется рука профессионала, хоть бери и записывайся на ваши подкасты, что бы в будущем самому такие видео озвучивать.:)

    • Ольга

      Привет, Александр! Кнопки Плюсо у меня на этом блоге стоят, если нужно быстро и просто поставить блок — самое то))

      • http://myworkpro.ru Александр

        А я уже за правду подумал, что сами рисовали)

        • Ольга

          Александр, я — маньяк, конечно, но не на столько :D

  • http://health-bit.ru/ Роман

    Спасибо за подробную инструкцию — все сделал по ней, и вроде как работает.
    Кстати, решил добавить google+ кнопку к этим 4-ем, но она нерабочая (са точнее счетчик не работает). Так что я схитрил и нарисовал ее с ноликом :)
    Пускай и не считает: зато самому свою статью удобно в g+ постить после написания :)

    • Ольга

      Здорово получилось! Счетчик G+ действительно не работает у Shere42, я обычно просто кнопку без области счетчика рисую)))

      • http://health-bit.ru/ Роман

        Точно, как я сразу не додумался просто нарисовать кнопку без счетчика, нужно будет так сделать :)
        Спасибо, Ольга!

        • Ольга

          Роман, всегда пожалуйста! :) А еще я бы подчеркивание ссылок убрала, но это, конечно, дело вкуса.

          • http://health-bit.ru/ Роман

            А как это можно реализовать, не подскажете? :)

            • Ольга

              В файле со стилями.

              #share42 a {opacity: 0.5}

              Замените на

              #share42 a {opacity: 0.5; text-decoration: none;}

              • http://health-bit.ru/ Роман

                Благодарю!

  • http://fredli.ru Александр

    Кнопки не нужны, захотелось лишний раз услышать=)

    • Ольга

      Александр, раз так, буду принимать заявки. О чем рассказать в следующий раз, чтобы вам было интересно?)))

      • http://health-bit.ru/ Роман

        О, о, а можно я? :)
        Я знаю о чем можно написать! Напишите о том, как Вы так все красиво заделали в сайдбаре: блок «над чем я работаю сейчас», «последние комментарии» ну и т.д.
        Мне, кстати, очень понравилась Ваша идея блока «над чем я работаю сейчас» — прям захотел себе такой, но не знаю, как так красиво реализовать :)

        • Ольга

          Роман, тут вообще ничего сложного. “над чем я работаю сейчас” — обычный html-код. “последние комментарии» — делала не сама, а по инструкции на одном из блогов о WP. На каком точно, не вспомню, они все как один) Можно просто в поисковик набить «Последние комментарии без плагина» и получите кучу статей на эту тему)

          • http://health-bit.ru/ Роман

            Все ясно, буду рыть информацию в интернете :)
            Скажите, а можно позаимствовать у Вас идею «над чем я работаю сейчас»? Уж очень мне этот блок приглянулся.

            • Ольга

              Спасибо за вопрос, конечно заимствуйте))) И скачайте курс Попова по CSS/HTML. Мне кажется, всем, кто ведет свой блог не лишним будет изучить основы верстки.

              • http://health-bit.ru/ Роман

                Спасибо, Ольга, Ваши рекомендации как никогда кстати! :)
                А это тот курс, что входит в «технические моменты» или какой-то другой?

  • http://health-bit.ru/ Роман

    А хотя я уже все нашел в бесплатностях Евгения, буду качать и изучать.
    Еще раз спасибо!

  • http://365idea.blogspot.com/ Андрей

    Спасибо, нужно попробовать сделать. Будут вопросы можно обращаться? ))

    • Ольга

      Привет, Андрей, обращайтесь :)

  • Игорь

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

    • Ольга

      Игорь, приветствую на блоге :) Для WP нужно делать то же самое, только при установке кода кнопок на Share42 выбрать WordPress и следовать их инструкциям.

  • http://best-weblinks.ru Виталий

    Очень приятный голос:)

  • http://jestov.net BazMaster

    Похоже сайт share24.com превратился в share42.com… )) Я не сразу понял и вышел на него через гугл..
    Поправьте ссылку на него.

  • http://jestov.net BazMaster

    И css-стили они уже не выдают…

  • http://www.stijit.com/ Stijit

    А как установка соц. кнопок влияет на скорость загрузки страниц сайта?

  • https://plus.google.com/103908136414297724520 Selfie File

    Ставить сторонний скрипт опасно