19 октября 2011 в 15:39

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

Многие из нас так или иначе сталкивались с проблемой кастомизации кнопок соцсетей, а многие ещё столкнутся. Недавно нам на 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%!
Автор: @vtsvang
Sports.ru
рейтинг 44,76

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

  • +1
    Господа, Дико извиняюсь за оффтоп. Я веду блог о Cleveland Cavaliers (баскетбольная команда НБА, фаном которой я являюсь с 1993 года). Так вот, когда у вас в блогах появится возможность постить таблицы (например, со статистикой)?
    • +3
      Сейчас мы работаем над новым дизайном сайта, планируем заодно заменить текстовый редактор — подумаем, реализовать ли в нем эту возможность (хочется просто сделать таблицы так, чтобы они пристойно выглядели в блогах и не ломали верстку).
      • +2
        Если сделаете, поверьте мне, не только я один буду благодарен.
        • +1
          Можно зайти в таблицу НБА и там на заголовке таблицы нажать # — откроется код для вставки этой таблицы в блог. Или вы что-то другое имели ввиду?
          • 0
            Вот сюда.
            На sports.ru в блогах, парсер хавает таблицы. Вставить таблицу невозможно, приходиться мучится.
            Так как многие читатели спортивного блога простые болельщики, то процент знания английского среди них, не высок.
            • 0
              То есть вопров во вставке сторонних таблиц на сайт?
              Да, здесь пока есть проблема.
  • 0
    На sports.ru в блогах, парсер хавает таблицы. Вставить таблицу невозможно, приходиться мучится.
    Так как многие читатели спортивного блога простые болельщики, то процент знания английского среди них, не высок.
    • 0
      Не туда.
  • +3
    Ох, я только на прошлой неделе думал: «Интересно были ли случаи двух или трех голов в свои ворота в одном матче? Наверное нет, это совсем ад ведь получился бы.» Даже гуглить не стал. А тут вон оно что! :)
    • +2
      Наверное я вас удивлю, бывало ещё круче :)
  • +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/ — справа)

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

Самое читаемое Разное