Установим социальные кнопки для сайта | Заметки вебмастера






Социальные кнопки для сайта

социальные кнопки для сайтаЗдравствуйте, уважаемые посетители!

На улице жара, солнце печёт, не жалея своей энергии. Ну а я уже прогулялся и спрятался от него дома.

Засел с ноутбуком и решил написать ещё одну статейку.

Вообще, по правде говоря, эту статью я должен был написать давно, но всё как-то руки не доходили.

Речь пойдёт о том, как создать социальные кнопки для сайта (Твиттер, Фэйсбук, Вконтакте и Google+ и т.д.).

Такие кнопки социальных сетей я уже давно установил. Их Вы можете увидеть внизу после каждой моей статьи.

Кстати, после прочтения этого материала, нажмите на одну из них, если Вам понравилась данная статья.

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

Для чего нужны социальные кнопки

Главная функция таких кнопок заключается в привлечении новых посетителей и читателей на свой блог.

Ни для кого не секрет, что на сегодняшний день очень много людей проводят массу свободного времени, общаясь в разных соцсетях, таких как Вконтаке, Одноклассники, Твиттер, Фейсбук и других.

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

Его друзья увидят эту запись и возможно, если им будет интересна эта информация, перейдут по ссылке на Ваш блог. Также они могут нажать «мне нравится» и эту новость узнают их друзья и так далее.

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

Читайте, делайте всё по шагам, и будет Вам счастье! Итак, начнём.

Есть один чудо-сервис, который поможет нам в осуществлении задуманного.

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

На многих буржуйских её просто нет, и приходится прикручивать эту кнопочку вручную.

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

Короче, плюсы налицо, надеюсь, убедил Вас следовать моему пути. Другие плюсы Вы увидите своими глазами при использовании данного сервиса. Начнём!

Как добавить социальные кнопки на блог

Ну а теперь к практике. Как же добавить социальные кнопки на свой веб-ресурс?

Для начала переходим по ссылке на официальный сайт Share 42 — http://share42.com/ru

Первым делом выберите размер иконок (32х32), (24х24) или (16х16) мм, а также сами иконки. Нажимайте на нужные Вам иконки по очереди для выбора.

Оптимальным размером иконок считается 32х32 мм. Советую выбрать именно такой:

социальные кнопки

Вы можете менять последовательность отображения самих иконок как хочется, просто перетаскивая их мышью:

социальные кнопки на сайте

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

Тип панели

Горизонтальная в основном применяется для установки снизу сразу после самой статьи. Плавающая устанавливается на всех страницах слева или справа и при прокрутке страницы остаётся на своём месте.

Ограничить видимое количество иконок

Эта опция как раз для плавающей панели. Какое число пропишите, такое количество кнопок и будет отображаться на этой панели.

Добавить иконку сайта Share42.com

Это иконка сервиса, на котором Вы находитесь в данный момент. Добавление иконки на Ваше усмотрение.

Ссылка на Rss Вашего сайта

Пропишите здесь адрес Вашей RSS ленты, в том случае, если Вы добавили к своим кнопкам иконку RSS. Читайте мою предыдущую статью про то что такое RSS

Показывать счётчики публикаций

Эта опция работает только в том случае, если к Вашему сайту подключена библиотека JavaScript jQuery. Она отвечает за взаимодействие JavaScript с HTML.

Я не стал заморачиваться и скачивать её. Если Вам нужны эти счётчики — добро пожаловать в Яндекс.

Обязательно нажмите кнопку » Посмотрите, как это будет выглядеть», прежде чем нажать на другую кнопку для скачивания готового скрипта!

Ну а теперь посмотрите мой скрин с настройками:

социальные кнопки

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

социальные кнопки

Распаковать архив со скриптом, я думаю, Вы сможете. Закинуть папку на сервер тоже не проблема. Для этого используйте любой FTP-клиент.

Я лично пользуюсь клиентом Total Commander. Но в основном я его применяю только для резервного копирования своего сайта.

А для того, чтобы закинуть какую-нибудь мелочь или удалить лишнее, я использую услугу Web-FTP, которую мне бесплатно предоставляет мой любимый хостинг.

Я закинул папку Share42 в корень блога, т.е. туда где хранятся папки wp-admin, wp-includes и т.д.

Выберите тип Вашего блога. Не знаю, какая у Вас Cms, но у меня удобный WordPress.

Затем нужно вставить код, который Вам предлагают в шаблон блога. Для этого перейдите в своей админпанели по вкладкам Внешний вид—> Редактор. Потом выберите файл для редактирования single.php.

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

<?php the_content('ЧИТАТЬ СТАТЬЮ &raquo;'); ?>

У меня это выглядит следующим образом:

кнопки соцсетей
Для того, чтобы быстро найти функцию <?php the_content в большом коде воспользуйтесь поиском Ctrl+F

Ну а вот сам результат. Посмотрите:

кнопки соцсетей

Плавающую панель я не стал себе устанавливать. Если хотите, то можете её себе соорудить. Теперь для Вас это не должно составить особого труда.

Да, совсем забыл Вам рассказать про то как создать социальные кнопки из моей боковой панели. Кстати,  них совсем другая функция.

При нажатии на одну из них, Вы попадаете на мою личную страничку в социальной сети. Можно будет уже там пообщаться с ним и стать друзьями.

Сделать такие кнопочки проще простого и без специального сервиса Share42

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

Также советую прочитать мою статью про создание кнопки «читать далее» вместо простой стандартной ссылки на главной странице блога. Так будет намного красивее!

Ну а теперь настало время прощаться. Надеюсь, написал всё доступно и понятно. Если есть вопросы — задавайте в комментариях. Пока.

Успехов Вам и Удачи
С Уважением,


Книга о заработке в интернете:
Книга о заработке в интернете

Комментариев к статье: 43

  1. Черноморец:

    А вот и статья написанная в два часа ночи,я ее ждал!http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif Я воспользоаался услугами сервиса PLUSO и очень доволен,там по моему все проше чем в сервисе описанным тобой! Но все равно попробую твой установить на тестовый сайт и посмотрю как будет! Спасибо Сергей, за эту статью про социальные кнопки!

    Ответить

    • Сергей:

      Да, Игорь, это именно она! http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif
      Спасибо за информацию, попробую воспользоваться данным сервисом http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

      Ответить

  2. Леха):

    Отличная статья и сервис в целом, вскоре поставлю себе такой скрипт, спасибо)

    Ответить

    • Сергей:

      Всегда пожалуйста, Лёха. Сервис и правда отличный, давно служит мне верой и правдой http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  3. Денис Скрипник:

    Здравствуйте. Хорошая инструкция. Я этот сервис знаю, даже на сайт одного из клиентов ставил, но на свой блог не хочу: в Maxsite есть простой плагин социальных кнопок, который не нагружает хостинг.

    Ответить

    • Сергей:

      Привет,Денис http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif А ты считаешь этот плагин не нагружает сервер?

      Ответить

      • Денис Скрипник:

        Да. Не думаю, а знаю, потому что он сохраняет javascript в базе данных, который выполняется без постоянных толчков со стороны плагина.
        А из базы данных он сохраняется один раз в файловый (системный) кэш.

        Ответить

        • Сергей:

          Понятно. Главное кэш на компе не чистить http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

          Ответить

          • Денис Скрипник:

            Нет. Не понятно вам. :-)
            Системный кэш хранится в папке applacation/cash. Как-то так пишется. Причём там есть и кэш БД, и кэш файлов.

            Ответить

          • Саня Сабегатулин:

            Интересно, хоть себе попробуй поставь. А то мой плагин не особо меня радует. Что то есть ощущение что он подтармаживает маленько.

            Ответить

          • Alexandr:

            А если почистить кэш, что станет?

            Ответить

          • Сергей Саранчин:

            Если почистить, то будет основа копироваться из базы данных в системный кэш. К чему этот «круговорот»?

            Ответить

          • Alexandr:

            Пожалуй, не соглашусь с Вами в этом вопросе. Я чищу кэш часто и мне бывает это крайне нужно.

            Ответить

          • Екатерина:

            Это смотря, по каким причинам Вы чистите кэш. Не стоит ровнять все под одну гребенку.

            Ответить

  4. Denis:

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

    Ответить

  5. Евгения Куварина:

    Как только я не выводила кнопки и плагином, и кодом, потом pluso, сейчас использую сервис uptolike для вывода социальных кнопок для сайта.
    Пожалуй и этот способ можно будет попробовать, люблю экспериментыhttp://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Ответить

    • Сергей:

      Я тоже люблю экспериментировать, особенно с дизайном блога. В будущем хочу сделать из него «конфетку» http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

      • Саня Сабегатулин:

        Эксперименты это хорошо, но бывает оп и положил блог. И сидишь потом мудришь, чтоб его поднять.

        Ответить

        • Екатерина:

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

          Ответить

          • Игорь:

            Так его так Катерина :cry:
            Пусть знает что тестовый блог должен быть.

            Ответить

          • Alexandr:

            Тестовый сайт хорошее подспорье для тестирования.

            Ответить

  6. Анютка Незабудка:

    Ох и намучилась я в свое время с такими вот кнопками. Почему то никак они не хотели устанавливаться у меня и все!!! Потом справилась с ними все-таки.

    Ответить

  7. Alexandr:

    Меня вопрос интересует, часто люди нажимают на кнопки соцсетей и какую соцсеть выбирают чаще?

    Ответить

    • Сергей Саранчин:

      Не очень часто, Александр. А вот какие чаще выбирают я не могу сказать. Это нужно отслеживать статистику :cry:

      Ответить

      • Alexandr:

        Думаю, что чаще нажимают твитер и фейсбук. Твитер чаще.

        Ответить

        • Екатерина:

          А мне кажется, чаще нажимают Вконтакте и Одноклассники. Эти соц. сети более развиты у нас. Хотя я могу ошибаться…

          Ответить

          • Alexandr:

            Кто в какой сети зарегестрирован, тому эта соцсеть нравится. Мне что ВК что Твитер, всё по фейсбуку.

            Ответить

          • Екатерина:

            Сейчас молодежь помешана на соц. сетях, поэтому очень многие проекты начинают свою раскрутку именно с соц. сетей.

            Ответить

          • Игорь:

            Потому что будущее за молодежью :lol:

            Ответить

          • Alexandr:

            Молодёжи навязывают её будущее, не она его выбирает.

            Ответить

          • Alexandr:

            Откуда инфа? У меня инфа другая.

            Ответить

  8. NI4KA:

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

    Ответить

  9. Alexandr:

    Как кнопки могут привлечь новых посетителей на блог ума не приложу. Их практически никто не нажимает.

    Ответить

    • Сергей Саранчин:

      Но ведь есть люди, которые нажмут и тем самым приведут на блог дополнительный трафик :smile:

      Ответить

    • Екатерина:

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

      Ответить

  10. Елена:

    Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.

    Ответить

    • Сергей Саранчин:

      Пожалуйтса, Елена. Рад, что Вы справились :oops:

      Ответить

    • Екатерина:

      Установка кнопок соц. сетей на блог достаточно несложный процесс. Очень хорошо, что у Вас, Елена, не возникло проблем. :smile:

      Ответить

      • Игорь:

        Да не сложный.
        Но у некоторых возникают трудности

        Ответить

        • Екатерина:

          И правда сложности бывают появляются на ровном месте. Не туда посмотрел, не ту кнопку нажал и исправляешь потом часами.

          Ответить

          • Игорь:

            Если большая проблема,то я откат обычно делаю и начинаю все заново.

            Ответить

          • Alexandr:

            А если откат не сработает? Бывает же и так.

            Ответить

        • Alexandr:

          У новичка во всём есть трудности и вопросы.

          Ответить


НАПИШИТЕ СВОЙ ПЕРВЫЙ КОММЕНТАРИЙ НА ЭТОМ БЛОГЕ И ПОЛУЧИТЕ ПОДАРКИ!

Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: