2015-07-22

Мобильные кнопки социальных сетей от Uptolike

мобильные-кнопки-uptolike-для-сайта
Сервис Uptolike предлагает адаптированные под мобильные устройства кнопки социальных сетей. Таким образом, устанавливая кнопки от Uptolike, вы убиваете двух зайцев – кнопки будут отлично смотреться, как в мобильном интерфейсе, так и на десктопной версии сайта. Это красивые кнопки  расположены в виде панели в нижней части мобильного сайта. На ней кроме популярных социальных сетей можно разместить кнопки популярных мобильных приложений, таких как whatsapp, 4talk, evernote. Прим. сервис социальных сигналов Addthis также предлагает мобильные кнопки..
Внешний вид кнопок от uptolike на телефоне:
мобильные кнопки uptolike

Как сгенерировать кнопки от Uptolike

/*
  • Переходим на страницу сервиса, проходим несложную регистрацию.
  • Нажимаем на кнопку “Создать проект”
    создать проект uptolike
  • Выбираем раздел “Поделиться”
    блок поделиться - мобильные кнопки социальных сетей
  • Начинаем настройку проекта
    В верхней части вы увидите радел “Социальные сети”. Отметьте галочками те, которые хотите видеть на своей десктопной версии сайта. Если вы нажмете на ссылку “Еще социальные сети”, то перед вами откроется весь список.
    социальные кнопки в мобильном интерфейсе
  • Далее идет часть настроек “Мобильный вид”. Именно ее мы будем настраивать, чтобы кнопки стали отображаться в мобильном интерфейсе.
    адаптируем социальные кнопки для мобильных устройств
    Не снимайте галочку с пункта “Адаптировать для мобильных устройств”. Теперь нажмите на ссылку “Настроить социальные сети” и выберите какие кнопки будут показываться на мобильных устройствах.
  • “Дополнительные настройки”
    дополнительные настройки социальных кнопок
    Цитирование – это возможность цитаты в социальную сеть (со ссылкой на ваш сайт) выделенного участка текста.
    Кнопка “Наверх” – добавление кнопки Наверх в панель к социальным кнопкам.
    “Отключить кнопку “…” – галочка отключит возможность выбора остальных социальных сетей.
    ”показать всплывающее окно с предложением подписаться” – поможет вам быстро набрать аудиторию для своей группы vk, facebook и др.
  • Выберите расположение блока:
    расположение блока uptolike
    они могут располагаться на боковой панели или среди текста (в контенте, например, в конце статьи).
  • Задайте внешний вид кнопок. Выберите форму, размеры, фон, наличие счетчика и др.

Как установить кнопки Uptolike на сайте

Рассмотрим установку кнопок на Wordpress и Blogger.

На Wordpress:

  • Для установки на боковую панель (должна быть выбрана соответствующая функция в настройках кнопок на сервисе uptolike) – добавляем полученный код в виджет.
  • Для установки после текста статьи – добавляем код в файл single.php после кода <?php the_content(); ?>. В этом случае кнопки будут отображаться только на страницах записей блога.

На Blogger

  • На боковую панель – вкладка “Дизайн” –> гаджет “HTML / JavaScript” – сюда вставляем код.
  • В конце статьи: заключаем полученный на сервисе uptolike код между тегами <b:if cond='data:blog.pageType == &quot;item&quot;'> и </b:if> для того, чтобы кнопки выводились только на страницах записей:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>код кнопок Uptolike</b:if>

    Переходим в Шаблон блога –> Изменить html. Находим код 
    <div class='post-footer-line post-footer-line-1'>
    Вставьте код uptolike после найденного кода.
    Заметьте, что таких кодов в шаблоне может быть несколько, тогда вставляем после второго. Сохраняем изменения.

4 комментария :

Serggrub комментирует...

У меня их что-то не видно в телефоне.

Иванова Наталья комментирует...

Serggrub, я проверю еще раз работоспособность метода и напишу комментарий здесь

ELENA комментирует...

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

Иванова Наталья комментирует...

ELENA, я рада, что у вас все получилось )

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

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