Кастомизация социальных кнопок

    Многие из нас так или иначе сталкивались с проблемой кастомизации кнопок соцсетей, а многие ещё столкнутся. Недавно нам на Sports.ru пришлось решать задачу, как не только настроить внешний вид «лайков», но и разместить на одной странице сразу несколько блоков социальных кнопок, относящихся к разным текстовым блокам.

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



    Был написан плагин для jQuery, который выполняет следующие функции:
    • Добавление информации к сообщению (название, описание, картинка и собственно ссылка).
    • Подсчёт лайков.
    • Размещение на странице нескольких социальных блоков.
    • Перемещение пользователя до залайканного материала (соц. сети режут хеш в урле).
    На данный момент времени плагин поддерживает Facebook Share, Вконтакте Share и Twitter.


    Известные проблемы

    • Facebook иногда не сразу отдает количество лайков, а Twitter обсчитывает с очень большой задержкой.
    • Из-за непонимания Вконтактом параметра callback не рекомендуется использовать кастомные и нативные кнопки (только Вконтактовские) на одной странице.
    По умолчанию плагин заточен на работу с определённой html-структурой, но уверяю вас, его можно достаточно просто перенастроить без написания костылей.
    В дальнейшем мы планируем реализовать интеграцию с другими сервисами.

    Как использовать?


    HTML


        <div class="event-container" id="event_5">
            <h2>Название материала</h2>
            <img src="image.png" alt="" />
            <div class="summary">
                <p>
                    Текст материала
                </p>
            </div>
            <div class="likes-block">
                <a href="?hash=event_5" class="like l-fb">
                    <i class="l-ico"></i>
                    <span class="l-count"></span>
                </a>
                <a href="?hash=event_5" class="like l-vk">
                    <i class="l-ico"></i>
                    <span class="l-count"></span>
                </a>
                <a href="?hash=event_5" class="like l-tw">
                    <i class="l-ico"></i>
                    <span class="l-count"></span>
                </a>
            </div>
        </div>
    

    Javascript


        jQuery(document).ready(function($) {
            $('.like').socialButton();
            $.scrollToButton('hash', 3000);
        });
    

    Пояснение


    Плагин сам при помощи классов (l-fb, l-tw, l-vk) определит, с какой кнопкой имеет дело. Как я уже говорил, вы можете переопределить имена классов и селекторы ключевых элементов (дефолтный конфиг смотри в исходнике). Для этого достаточно передать хеш с переопределяемыми параметрами в метод socialButton().

    Теперь, если вы перейдёте по адресу http://path.to/page.html?hash=news_123 плагин «проскроллит» вас до материала с id-шником news_123 за 3 секунды.

    По умолчанию в качестве заголовка плагин использует h2 (если не найдёт, то document.title), в качестве описания первую p-шку, в качестве ссылки значение атрибута href у ссылки с классом like. Кстати, поддерживаются как абсолютные, так и относительные урлы.

    В итоге


    Пользуйтесь плагином с умом, не стоит лепить на странице 100 блоков с соц. кнопками. Каждая кнопка — запрос к API счётчика. Если на странице много материалов, реализуйте динамическую подгрузку.

    Где демо? Где исходники?


    Исходники вот: GitHub
    Пример вот: Перейти

    Спасибо за внимание, и ждем вопросов в комментариях. Надеюсь, эта статья окажется полезной для тебя, %username%!
    Метки:
    Sports.ru 41,11
    Компания
    Поделиться публикацией
    Комментарии 27
    • +1
      Господа, Дико извиняюсь за оффтоп. Я веду блог о Cleveland Cavaliers (баскетбольная команда НБА, фаном которой я являюсь с 1993 года). Так вот, когда у вас в блогах появится возможность постить таблицы (например, со статистикой)?
      • +3
        Сейчас мы работаем над новым дизайном сайта, планируем заодно заменить текстовый редактор — подумаем, реализовать ли в нем эту возможность (хочется просто сделать таблицы так, чтобы они пристойно выглядели в блогах и не ломали верстку).
        • +2
          Если сделаете, поверьте мне, не только я один буду благодарен.
          • +1
            Можно зайти в таблицу НБА и там на заголовке таблицы нажать # — откроется код для вставки этой таблицы в блог. Или вы что-то другое имели ввиду?
            • 0
              Вот сюда.
              На sports.ru в блогах, парсер хавает таблицы. Вставить таблицу невозможно, приходиться мучится.
              Так как многие читатели спортивного блога простые болельщики, то процент знания английского среди них, не высок.
    • 0
      На sports.ru в блогах, парсер хавает таблицы. Вставить таблицу невозможно, приходиться мучится.
      Так как многие читатели спортивного блога простые болельщики, то процент знания английского среди них, не высок.
    • +3
      Ох, я только на прошлой неделе думал: «Интересно были ли случаи двух или трех голов в свои ворота в одном матче? Наверное нет, это совсем ад ведь получился бы.» Даже гуглить не стал. А тут вон оно что! :)
    • +1
      понятный код, спасибо. Один нюанс — это все же шаринг, а не лайки, верно?
      • 0
        Да, совершенно верно! Это шаринг, а не лайки.
        • 0
          Прочитав заголовок, сначала удивился, неужели удалось расковырять все айфремы? Но шаринг тоже хорошо
          • +3
            Расковырять iframe безусловно можно, но не уверен, что оно стабильно будет работать. Не проверял.
            Что касается Facebook, лайки можно считать через FQL.

            SELECT like_count FROM link_stat WHERE url="ссылка"
            

            Возможно кому-то пригодится…
            • +1
              у твиттера тоже есть собственный нормальный протокол для получения данных, но, к сожалению, помечен как внутренний.
              • 0
                Будем надеяться, что Twitter когда-нибудь откроют свой протокол для всех.
      • +2
        Возможно, кому-то поможет — мультиплатформенная кнопка Лайк для самых популярных социальных сетей. Можно менять размер и дизайн.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Пожалуйста, дайте ссылку на ваш домен. Сейчас посмотрим и поможем разобраться.

            У пользователей владельцев нескольких десятков сайтов все получилось. Вероятно, вы что-то сделали не так.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Пожалуйста, конкретизируйте, о какой ошибке идет речь. Мы все поправим).
        • 0
          Для решения известных проблем — создать свои счётчики как приложение на Facebook и VK и уже ими отслеживать кол-во share/like.

          У Твиттера — 5 минут задержки, чуть ли не стандарт, к сожалению.
          • 0
            А +1 прикрутить нет случайно в планах?
            • 0
              Может и прикрутим. Я пока не копал в этом направлении.
            • +1
              Спасибо за кнопки. Жаль, что +1 нет. Есть подсказки, куда вкручивать?
              • 0
                +1 не так просто сделать, там никак не вытащить кол-во +1, так-же как и запостить сам +1, ибо все это меняется
                япоступил хитро, поставил гуглевую +1 над моей кастомной, и гуглевой дал опасити 0.01
                количество не видно, но нажатие работает, как и всплывашка (пример zbroya.info/ru/7/ — справа)

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