Bиджеты Facebook: авторизация, социальные кнопки, комментарии для сайта с помощью соцсети

Приветствую, уважаемые читатели. Мы продолжаем разговор о социализации веб-ресурсов. Сегодня речь пойдет о виджетах Facebook для сайта: как сделать авторизацию с помощью аккаунта соцсети, встроить плагин сообщества, социальные кнопки и блок комментариев Facebook на сайт. В каждом случае будут использоваться официальные скрипты, то есть быстродействие вашего проекта не пострадает от сторонних плагинов.

Фэйсбук, также как и Вконтакте, радует несколькими полезными социальными фишками, найти которые можно на странице для разработчиков: https://developers.facebook.com/. Жаль, что большинство документации на английском, но не беда — разберемся. Нам понадобится раздел «Discover more products», а точнее вкладка «Websites». 

виджеты Facebook для сайта, комментарии Facebook на сайт

Страница для разработчиков: виджеты Facebook для сайта

Комментарии

О пользе социальных комментариев мы уже говорили, это:

  1. Обсуждение одновременно в соцсетях и на сайте, а значит ссылки в новостной ленте, дополнительный приток собеседников;
  2. Повышение качества комментариев за счет использования реальных профилей;
  3. Удобство пользователей, отсутствие необходимости регистрации;
  4. Улучшение поведенческих факторов, увеличение продолжительности пребывания на странице;
  5. Простота использования.
виджеты Facebook для сайта, комментарии Facebook на сайт

Блок комментариев Facebook для сайта

Особенность настройки блока в том, что если в поле «Url» ввести адрес определенной страницы, то все ссылки в Фэйсбук будут отправляться на эту страницу, не зависимо от того, где ведется обсуждение. Поэтому в генераторе кода вводим любой урл, а при добавлении на сайт меняем его на

Остальные настройки не вызовут затруднений: указываем ширину (width), количество записей (number of posts) и жмем синюю кнопку «Получить код» (Get Code). Полученный скрипт нужно вставить в single.php где-то между окончанием текста и началом обсуждения.

В отличие от Вконтакте, у комментариев Facebook для сайта можно немного корректировать оформление. Особо разгуляться не выйдет: доступна лишь светлая и темная цветовая гамма. Но все-таки большой плюс. Чтобы сменить стиль, добавьте в последнюю строку кода

(темный вид)

или

(светлый, он же стандартный)

По умолчанию комментарии сортируются по популярности. Чтобы расположить их по порядку, можно добавить конструкцию:

(по времени)

или

(в обратном порядке).

Вставлять ее надо в последнюю строку кода (где присутствуют элементы data-href, data-width, data-numposts).

Нравится

виджеты Facebook для сайта, комментарии Facebook на сайт

Кнопка «Мне нравится»

Эта кнопка специально придумана, чтобы была возможность отдельно сказать «спасибо» автору без обязательных репостов на стену. Внешний вид представлен несколькими вариантами: со счетчиком и без него, расположение столбиком либо в строчку. Кнопку публикации можно совсем убрать: просто снимите галочку «Include Share Button». Рядом выбирается формулировка («Action Type»): «Нравится» или «Рекомендую», а также ширина блока («Width»). Последний штрих — отметить, показывать ли аватарки лайкнувших пользователей — и можно запрашивать код («Get Code»).

Важный момент: не забудьте заменить url в скрипте на

как мы делали в комментариях, чтобы при репосте публиковалась корректная ссылка.

При установке блока может возникнуть проблема размещения относительно других элементов страницы: кнопки разных соцсетей располагаются хаотичным нагромождением вместо аккуратной строчки. Решается она с помощью тега <div> (подробнее см. статью о кнопках соцсетей). Заключите скрипт в следующую конструкцию:

где float:left — выравнивание (в моем случае по левому краю), width — ширина (изменяйте, чтобы все уместилось на одной строке).

Поделиться

виджеты Facebook для сайта, комментарии Facebook на сайт

Кнопка публикации ссылок

Кнопка для публикации ссылок позволяет сразу сделать репост без заморочек с лайками. Вариантов оформления масса: от крохотных иконок и компактных ссылок до классических кнопок. Настроек проще не придумаешь: достаточно ввести адрес страницы (не забываем впоследствии заменить на <?php the_permalink() ?> ), выбрать внешний вид и запросить код («Get Code»).

Отправить

виджеты Facebook для сайта, комментарии Facebook на сайт

Кнопка «Отправить»

Функция позволяет отправить ссылку на материалы личным сообщением друзьям или в группу Facebook. Официальное описание упоминает еще отправку на email, но при вводе адреса кнопка остается неактивной. Это самый простой в плане настроек блок: от вас требуется лишь ввести урл посылаемой страницы.

Публикация записей из Facebook

виджеты Facebook для сайта, комментарии Facebook на сайт

Виджет публикации записей из Facebook на сайте

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

Встроенное видео

Ребята из Facebook учли также необходимость использовать на сайтах видео-материалы — отличный инструмент не только чтобы привлечь внимание посетителей, но и удержать его. Укажите в соответствующем поле адрес записи и ширину блока, затем скопируйте полученный скрипт.

виджеты Facebook для сайта, комментарии Facebook на сайт

Плагин для встраивания видео на сайт

Важный момент: существуют дополнительные параметры, использование которых поможет слегка расширить возможности плеера. Так, data-autoplay будет автоматически запускать видео при загрузке страницы (без звука). Изначально отключен, чтобы включить указываем значение true. Data-allowfullscreen отвечает за проигрывание на полном экране (по умолчанию — false, чтобы включить, прописываем true). (В отличие от прочих настроек, эти параметры не были проверены автором на практике, так что поверим разработчикам на слово).

Страницы

Этот плагин привяжет ваш проект к странице или группе в Фэйсбуке, добавив на сайт красочный виджет. Посетители смогут поделиться ссылкой или подписаться, не покидая ресурса.

виджеты Facebook для сайта, комментарии Facebook на сайт

Виджет страницы/сообщества

В настройках необходимо выполнить несколько простых действий:

  • Указываем адрес рекламируемой страницы.
  • Задаем ширину (width) и высоту (height) — можно оставить по умолчанию. Обратите внимание также на параметр «Adapt to plugin container width» — он отвечает за автоматическое подстраивание.
  • Настраиваем оформление шапки страницы: можно уменьшить ее размер («Use small header») или отключить картинку вовсе («Hide cover photo»). Пригодится, если сайдбар битком забит и нужен компактный виджет.
  • «Show friends faces» отвечает за отображение аватарок подписчиков, а «Show page post» — за трансляцию новостей группы. Изменение этих параметров также понадобится, если важны размеры блока.

Авторизация

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

виджеты Facebook для сайта, комментарии Facebook на сайт

Кнопка авторизации

Соответствующую кнопку можно найти тут . Выбираем размер блока («Button size»), ставим галочу, отвечающую за отображение аватарок друзей, пользующихся сайтом («Show friend’s faces»). Если решили включить аватары, указываем количество строк с фотографиями («Maximum rows of photos»). В заключение, отмечаем галочкой, показывать ли авторизованным юзерам кнопку «Выход» («Enable Logout Button»). После завершения настроек жмем «Get Code» и копируем скрипт на сайт.

Заключение

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

Успехов вам и вашим проектам!

© 2015 — 2016, blogstu.ru. Все права защищены. Копирование материалов сайта запрещено.

Поделиться:
Сохранить:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

тринадцать − 6 =