Сегодня я поделюсь небольшим хаком по настройке социальных кнопок Uptolike!
Почему социальные кнопки и почему Uptolike? Все просто - этим сервисом я пользуюсь сам, но возможно, описанное ниже решение окажется полезным еще для кого-то.
Забегая немного вперёд, хочу сказать, что информация своего рода инсайдерская, возможно скоро и сами Uptolike прольют свет на такой способ размещения, но так приятно быть первым..
Анализируя код кнопок от Uptolike, видим что код выполняется по мере загрузки страницы, что может в теории замедлить рендеринг. Это не страшно, когда код всего 1 (например, в отдельной статье), но неприятно, когда код ставится на странице со списком статей под каждым анонсом статьи (например, на главной в блоге).
Идея в том, чтобы сделать загрузку кода в document.onready, то есть когда страница уже отрисуется. Для этого в Uptolike есть специальный вариант кода, когда разметка кнопок вставляется в виде div-блоков, и добавляется инициализационный скрипт в шапку страницы:
1. Вставляем скрипт <script src='http://w.uptolike.com/widgets/v1/uptolike.js' type='text/javascript></script> в <head>
2. В нужное место кода вставляем <div> с классом uptolike-buttons.
Пример такого контейнера:
<div class='uptolike-buttons' data-pid='1' data-url='http://penkovvladimir.blogspot.ru' data-sn-ids="fb.tw.vk.gp.dg"
data-mode='share' data-like-text-enable='false'
data-share-shape='round-rectangle' data-share-size='20' data-share-style='1'
data-background-color='aa44bb' data-background-alpha='0.0'
data-share-counter-type='common'
data-selection-enable='true'
data-orientation='horizontal'>
</div>
И расшифровка параметров следующая:
- data-url - адрес страницы для шар. По умолчанию берется текущая страница
- data-title - заголовок страницы, которая будет расшарена
- data-pid - идентификатор проекта (ОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР!)
- data-sn-ids - идентификаторы соц. сетей (ОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР!). Список соц сетей следующий:
- data-orientation - расположение кнопок. Доступны следующие значения:
-data- mode - тип кнопок. Доступны следующие значения:
- data-like-text-enable - показывать или нет текст у like кнопок. Доступны следующие значения:
- data-share-shape - форма кнопок share. Доступны следующие значения:
- data-share-size - размер кнопок. Доступны следующие значения:
-data-share-style - стиль кнопок. Доступны следующие значения:
- data-background-color - цвет фона панели. Задается шестизначный код цвета, пример: 22a3f3. По умолчанию: ffffff
- data-background-alpha - прозрачность фона. Задается дробное число от 0 до 1 включительно. 1 = непрозрачный фон. Значение по умолчанию: 0. Например: 0.5
- data-text-color - цвет текста для счетчиков. Задается шестизначный код цвета, пример: 22a3f3. По умолчанию: 000000
- data-buttons-color - цвет кнопки (задаётся для data-share-style='0'). Задается шестизначный код цвета, пример: 22a3f3
- data-icon-color - цвет логотипа на кнопке (задаётся для data-share-style='0'). Задается шестизначный код цвета, пример: 22a3f3
- data-counter-background-color - цвет фона счетчика. Задается шестизначный код цвета, пример: 22a3f3. По умолчанию: ffffff
- data-counter-background-color - прозрачность фона счетчика. Задается дробное число от 0 до 1 включительно. 1 = непрозрачный фон. Значение по умолчанию: 0
- data-share-counter-type - вид счетчика у кнопок типа share. Доступны следующие параметры:
- data-selection-enable - включение модуля цитирования. Доступны следующие параметры:
- data-following-enable - включение модуля following. Доступны следующие параметры:
- data-following-mask-enable - затемнять экран при появлении окна с follow-кнопками. По умолчанию false
В моем блоге кнопки стоят именно указанным способом.
Важное замечание: прежде чем произвольно менять цвет кнопок (data-buttons-color), нужно предварительно сгенерировать сами изображения с логотипами соц сетей в конструкторе на сайте uptolike.
Почему социальные кнопки и почему Uptolike? Все просто - этим сервисом я пользуюсь сам, но возможно, описанное ниже решение окажется полезным еще для кого-то.
Забегая немного вперёд, хочу сказать, что информация своего рода инсайдерская, возможно скоро и сами Uptolike прольют свет на такой способ размещения, но так приятно быть первым..
Анализируя код кнопок от Uptolike, видим что код выполняется по мере загрузки страницы, что может в теории замедлить рендеринг. Это не страшно, когда код всего 1 (например, в отдельной статье), но неприятно, когда код ставится на странице со списком статей под каждым анонсом статьи (например, на главной в блоге).
Идея в том, чтобы сделать загрузку кода в document.onready, то есть когда страница уже отрисуется. Для этого в Uptolike есть специальный вариант кода, когда разметка кнопок вставляется в виде div-блоков, и добавляется инициализационный скрипт в шапку страницы:
1. Вставляем скрипт <script src='http://w.uptolike.com/widgets/v1/uptolike.js' type='text/javascript></script> в <head>
2. В нужное место кода вставляем <div> с классом uptolike-buttons.
Пример такого контейнера:
<div class='uptolike-buttons' data-pid='1' data-url='http://penkovvladimir.blogspot.ru' data-sn-ids="fb.tw.vk.gp.dg"
data-mode='share' data-like-text-enable='false'
data-share-shape='round-rectangle' data-share-size='20' data-share-style='1'
data-background-color='aa44bb' data-background-alpha='0.0'
data-share-counter-type='common'
data-selection-enable='true'
data-orientation='horizontal'>
</div>
И расшифровка параметров следующая:
- data-url - адрес страницы для шар. По умолчанию берется текущая страница
- data-title - заголовок страницы, которая будет расшарена
- data-pid - идентификатор проекта (ОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР!)
- data-sn-ids - идентификаторы соц. сетей (ОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР!). Список соц сетей следующий:
- Facebook fb
- Google plus gp
- Я.ру my
- LiveJournal lj
- Digg dg
- MySpace ms
- Twitter tw
- Evernote en
- StumbleUpon su
- Delicious dl
- SurfingBird sb
- Springpad sp
- ВКонтакте vk
- Mail.ru mr
- В кругу друзей vd
- Бобрдобр bd
- Instapaper ip
- Одноклассники ok
- Formspring.me fs
- Tumblr tb
- Blogger bl
- LiveInternet li
- Pinterest ps
- Readability rb
- Pinme pn
- data-orientation - расположение кнопок. Доступны следующие значения:
- vertical - вертикальная панель
- horizontal - горизонтальная панель
- fixed-left - вертикальная панель, прикрепленная в левому краю окна браузера
- fixed-right - вертикальная панель, прикрепленная в правому краю окна браузера
- fixed-top - горизонтальная панель, прикрепленная в верхнему краю окна браузера
- fixed-bottom - горизонтальная панель, прикрепленная в нижнему краю окна браузера
-data- mode - тип кнопок. Доступны следующие значения:
- like
- share
- follow
- data-like-text-enable - показывать или нет текст у like кнопок. Доступны следующие значения:
- false - не отображать
- true - отображать
- data-share-shape - форма кнопок share. Доступны следующие значения:
- round - круглые
- round-rectangle - квадратные с закругленными краями
- rectangle - квадратные с острыми краями
- data-share-size - размер кнопок. Доступны следующие значения:
- 40 - кнопки 40px x 40px
- 30 - кнопки 30px x 30px
- 20 - кнопки 20px x 20px
-data-share-style - стиль кнопок. Доступны следующие значения:
- 0 - уникальный вид (цвет кнопок, логотипа и прочего)
- 1 - "плоские" кнопки без каких либо эффектов
- 2 - с затемнением снизу
- 3 - с затемнением сверху
- 4 - с затемнением в центре
- 5 - с затемнением по контуру
- 6 - серо-серые (серые - кнопки, еще более серые - логотипы)
- 7 - черно-белые (черные - кнопки, белые - логотипы)
- 8 - отображение только логотипа (цветные)
- 9 - с наложением типа "блик" сверху
- 10 - назовём их "сплит-кнопки", логотип и счетчик кликов располагаются на общем фоне
- data-background-color - цвет фона панели. Задается шестизначный код цвета, пример: 22a3f3. По умолчанию: ffffff
- data-background-alpha - прозрачность фона. Задается дробное число от 0 до 1 включительно. 1 = непрозрачный фон. Значение по умолчанию: 0. Например: 0.5
- data-text-color - цвет текста для счетчиков. Задается шестизначный код цвета, пример: 22a3f3. По умолчанию: 000000
- data-buttons-color - цвет кнопки (задаётся для data-share-style='0'). Задается шестизначный код цвета, пример: 22a3f3
- data-icon-color - цвет логотипа на кнопке (задаётся для data-share-style='0'). Задается шестизначный код цвета, пример: 22a3f3
- data-counter-background-color - цвет фона счетчика. Задается шестизначный код цвета, пример: 22a3f3. По умолчанию: ffffff
- data-counter-background-color - прозрачность фона счетчика. Задается дробное число от 0 до 1 включительно. 1 = непрозрачный фон. Значение по умолчанию: 0
- data-share-counter-type - вид счетчика у кнопок типа share. Доступны следующие параметры:
- disable - не отображать счетчик
- common - общий счетчик
- separate - индивидуальный счетчик для каждой кнопки
- data-selection-enable - включение модуля цитирования. Доступны следующие параметры:
- false - не включать
- true - включить
- data-following-enable - включение модуля following. Доступны следующие параметры:
- false - не включать
- true - включить
- data-following-mask-enable - затемнять экран при появлении окна с follow-кнопками. По умолчанию false
- false - не затемнять
- true - затемнять
Важное замечание: прежде чем произвольно менять цвет кнопок (data-buttons-color), нужно предварительно сгенерировать сами изображения с логотипами соц сетей в конструкторе на сайте uptolike.
No comments :
Post a Comment