Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Как установить на свой сайт виджеты от Facebook?

Социальные сети

Итак, заходим на главную страницу facebook.com и внизу в меню находим пункт Разработчикам.Затем уже в верхнем меню щелкаем Docs. В открывшемся разделе  Documentation нам интересен пункт  Features Social Plugins, выбираем его. Теперь мы можем увидеть все виджеты Facebook для сайта, имеющиеся в наличии. Существует три способа их внедрения : с помощью HTML5, XFBML (специальная Facebook-разметка) и фрейма(подходит не для всех виджетов).
социальные плагины

Like Button (кнопка Нравится) – это простой плагин, который позволяет людям быстро обмениваться контентом на Facebook

Screenshot_4845452

С помощью конфигуратора можно указать ряд опций

href – URL страницы, которая нравится. В версии XFBML по умолчанию URL текущей страницы.
Send button – указывает, следует ли включать кнопку Отправить с кнопкой Нравится. Это работает только с версией XFBML.

show_faces – указывает, отображать фотографии из профилей пользователей(которые нажали нравится)

выбор шрифта из нескольких стандартных

какой текст отображать на кнопке (Нравится или Я рекомендую)

Существует три варианта для  макета

стандарт – отображает текст справа от кнопки и фото профилей друзей ниже. Минимальная ширина: 225 пикселей.  Высота: 35 пикселей (без фотографий) или 80 пикселей (с фотографиями).

button_count – показывает общее число лайков справа от кнопки. Минимальная ширина: 90 пикселей. Высота: 20 пикселей.

box_count – отображает общее количество лайков над кнопкой. Минимальная ширина: 55 пикселей.  Высота: 65 пикселей.

Сделаем все нужные настройки и попробуем поле URL to Like оставить пустым.

Нажмем Get Code

В открывшемся окне выберем XFBML и вставим код как указано ниже

код для кнопки Нравится

В случае выбора HTML5 все почти то же самое

добавление кнопки нравится

Если вы теперь нажмете кнопку Нравится под своим аккаунтом в Facebook, вы увидите такое окошко, где нужно будет ввести свой комментарий и нажать Опубликовать на Facebook

Screenshot_59

А на своей страничке в Хронике вы найдете такое сообщение

сообщение в Хронике

Send Button

Кнопка Отправить позволяет пользователям легко отправлять содержание своим друзьям. Люди будут иметь возможность отправить URL в сообщении  их друзьям по Facebook, на стену одной из своих групп Facebook и на любой адрес электронной почты. В то время как кнопка Нравится позволяет пользователям обмениваться контентом со всеми своими друзьями, Кнопка Отправить позволяет отправить личное сообщение только для нескольких друзей.

Здесь более простые параметры: адрес для отправки, выбор цвета и шрифта.

Screenshot_58

При нажатии на кнопку откроется окно сообщения.

Screenshot_57

Follow Button

Кнопка Follow позволяет другим людям следить за вашими  обновлениями на Facebook. Другими словами эта кнопка дает возможность  посетителям подписываться на других пользователей Facebook прямо с вашего сайта.

Screenshot_5345456

Не забудьте указать адрес профиля  пользователя за которым  нужно  следовать. Это должен быть адрес анкеты facebook.com.

Можно выбрать из трех  вариантов макета(показаны на рисунке справа): стандарт , button_count  и box_count, – т.е. настройки вида данной кнопки полностью повторяют Like Button.

Comments Box (комментарии Facebook) – плагин, который позволяет людям комментировать на вашем сайте

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

В конфигураторе можно задавать такие параметры

href – URL – адрес страницы, на которой будет находится комментарий. Новостная лента Хроники на Facebook будет ссылаться на этот URL.

Width – ширина блока комментариев в пикселях. Минимальная рекомендуемая ширина: 400px.

ColorScheme – цветовая схема. Опции: «light», «dark»

Number of posts – количество комментариев, которое будет показано по умолчанию на странице. По умолчанию: 10. Минимум: 1

Screenshot_43

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

После того как указали все опции нажимаем кнопку Get Code и копируем  полученный код (есть возможность выбора реализации плагина в HTML5 – по умолчанию или XFBML).

Screenshot_44

Для правильной работы этого плагина обязательно должен быть указан адрес страницы с комментарием, однако вводить его вручную через конфигуратор мягко скажем неудобно, поэтому предлагаю адрес в конфигураторе не указывать и просто дописать в полученном коде параметр data-href, который как раз и отвечает за этот URL. Этот параметр должен динамически меняться, чтобы это реализовать воспользуемся функциональными возможностями конкретных CMS.

Комментарии Facebook в DataLife Engine

1.Первую часть кода вставляем в шаблон main.tpl, сразу после тега <body>

В случае если вы используете вариант кнопки на XFBML нужно добавить также к тегу html специальный параметр, чтобы получилась подобная конструкция

2. Вторую часть кода помещаем в шаблон fullstory.tpl, там где будут находиться комментарии, например после тега {comments} (стандартные комментарии DLE).
Код в HTML5

Код в XFBML

Комментарии Facebook в WordPress

1.Первую часть кода вставляем в шаблон header.php, сразу после тега body.

Также как и в DLE, если вы используете вариант кнопки на XFBML нужно добавить к тегу html атрибут, чтобы получилось нечто подобное

2. Вторую часть кода помещаем в single.php, например после тега комментариев

Код в HTML5

Код в XFBML

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

Screenshot_47

В конфигураторе указываем  некоторые настройки для вывода на сайте

Социальный плагин Share Dialog позволяет посетителям поделиться ссылкой(например на статью на вашем сайте) в их Хрониках

Для работы этого плагина нужно разместить представленный ниже код на странице.

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

3331
Параметры width и height в коде можно подредактировать, задавая свою ширину и высоту диалогового окна.
В Хронике Facebook  у поделившегося посетителя выглядеть все будет следующим образом:

Screenshot_46

Видео, посвященное установке социальных плагинов Facebook

На этом хочу с вами попрощаться! До встречи в новых уроках!

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

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

*