Социальные кнопки своими руками

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

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

Существует масса сервисов которые позволяют установить на сайт кнопки социальных сетей:

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

Поэтому было решено «лепить» социальные кнопки самостоятельно. На Хабре нашелся очень простой и привлекательный скрипт кнопок на базе jQuery c опциями.

Все элементы класса .social_share считаем кнопками шаринга.

Пример кнопок с минимальной настройкой.

Для настройки внешнего вида кнопок использовался MojoShare о котором прочитал тоже на Хабре 🙂

После подключения всех скриптов и стилей прописываем следующий код.

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

  • даже несмотря на кажущуюся объемность полученного решения, его код намного меньше, чем у некоторых вышеперечисленных кнопок;
  • при создании кнопок не используются картинки — вся графика получена на чистом CSS
  • легкость настройки как подключаемых сервисов, так и внешнего вида кнопок

Пока писал эти строки случайно наткнулся на еще одно несколько интересных решений на GitHub:


Комментарии (16)

  • Avatar

    Александр

    |

    Здравствуйте!
    А Вы бы не могли бы описать как установить эти социальные кнопки в wordpress?
    Первый код из 150 строк это я так понимаю нужно сохранить как скрипт и подключить если я не ошибаюсь в header.php перед тэгом . Второй код (4 строчки) необходимо разместить в single.php Ну и последний код я так понимаю нужно разместить там же, в single.php Если это так то не могли бы Вы поподробнее описать как именно ?

    Reply

    • Avatar

      tux

      |

      Доброго времени суток!
      Действительно, первый код Вы размещаете в файле и подключаете в header.php шаблона темы, например:

      <script type="text/javascript" src="js/share.js"></script>

      В single.php, в том месте, где будут расположены кнопки, Вам нужно вставить приблизительно следующее:

      <script>
      второй код
      </script>
      <div>
      третий или четвертый (это если со стилями) фрагмент
      </div>

      Если не получится — пишите 🙂

      Reply

  • Avatar

    Александр

    |

    В общем сделал все так как Вы написали, но при этом получается вот так И при нажатии на эти иконки ничего не происходит 🙁

    Reply

    • Avatar

      tux

      |

      Попробуйте перед вызовом скрипта share.js в heder.php подключить jquery, например:

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

      Я понимаю, что в wordpress уже встроен jquery, но он очень старый и может не работать с данным скриптом.

      Reply

      • Avatar

        Александр

        |

        Не помогло 🙁 Есть еще идеи ? 🙂

        Reply

      • Avatar

        Александр

        |

        Посмотрел через отладчик — в общем не находит font-awesome.min.css?ver=1.0, MojoSocial.woff, MojoSocial.ttf и MojoSocial.svg Может быть в этом проблема ?

        Reply

      • Avatar

        Александр

        |

        После добавления файлов font-awesome.min.css?ver=1.0, MojoSocial.woff, MojoSocial.ttf и MojoSocial.svg в соответствующие папки и подключения вышеуказанного Вами скрипта jquery.min.js все заработало 🙂 Спасибо!!! Возникла правда еще одна проблема с OpenAPI vkontakte, но не знаю уместно ли здесь спрашивать ? 😀

        Reply

        • Avatar

          tux

          |

          Простите, но с OpenAPI vkontakte я Вам ничем помочь не могу 🙁 И еще, хотелось бы взглянуть на Ваш проект (мне стало любопытно).

          Reply

          • Avatar

            Александр

            |

            Сейчас я дорабатываю новый дизайн сайта, в котором я и применил Ваши знания 🙂 но как будет готов — добро пожаловать 🙂 Пока что только можно посмотреть действующую редакцию сайта http://lenpro.org

  • Avatar

    Саша

    |

    Дмитрий Николаевич, посоветуйте, пожалуйста, книги по PHP+JS попроще, ну уж очень попроще 😀

    Reply

  • Avatar

    Игорь

    |

    🙂 Спасибо за отличные кнопочки. Все работает как надо. Надоели эти левые сервисы уже.

    Reply

    • Avatar

      tux

      |

      Очень рад, что оказался Вам полезен.

      Reply

  • Avatar

    Mtest

    |

    Именно то что так искал, большое спасибо.

    Reply

    • Avatar

      tux

      |

      Всегда рад помочь 🙂

      Reply

  • Avatar

    Mel

    |

    То, что надо. Большое спасибо 🙂

    Reply

    • Avatar

      tux

      |

      Пожалуйста 🙂

      Reply

Оставить комментарий