Ideell Egoist (petrucha) wrote,
Ideell Egoist
petrucha

Социальная интеграция. Часть 2. Facebook

Друзья, здравствуйте снова!

Продолжаю серию статей про интеграцию сайтов с социальными сетями. Сегодня у микрофона Facebook.com.

Как и в случае с любой другой социальной сетью, прежде, чем начинать какую-либо интеграцию с социальными сетями, Вам надо эти самые сети освоить. В отличие от социальной сети Вконтакте.ру, в Facebook.com предусмотрено несколько вариантов создания своей площадки для бизнеса - группы и страницы. Я очень рекомендую создавать страницу бизнеса, так как возможности страницы значительно шире. Подробно останавливаться не буду, так как об этом написано достаточно. Показывать интеграцию буду опять же на примере сайта меня, как фотографа и специально по этому поводу созданной страницы. Сейчас ссылка у страницы длинная и страшная, но не пугайтесь. Когда у этой (и у любой другой страницы) набирается 25 поклонников, появляется возможность задать короткий адрес. Но об этом не сейчас :-)



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

Чтобы зарегистрировать сайт как приложение, требуется перейти на страницу создания приложения и создать его:

fb_init_1

Вводим имя, ставим правильную галочку и на следующем экране вводим каптчу. После этого попадаем на страницу настройки приложения. На данной странице следует указать ваши контакты, после чего переходим на вкладку "Web site" и указываем адрес сайта. Запомните уникальный идентификатор приложения! Он нам понадобится:

fb_init_2

Теперь через панель управления вашим сайтом потребуется сразу после тега <body>вставить следующие строки:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Your_Application_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};

Где вместо Your_Application_ID вводим ваш идентификатор.

Теперь можем приступить к встраиванию виджетов. Сразу уточню, что Facebook предоставляет 8 базовых виджетов, о большинстве из которых я и расскажу сегодня.

Like Box

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

  • width = ширина блока в пикселах
  • color scheme = цветовая схема, бывает dark и light
  • connections = задает количество обновлений статусов, которые отображаются в блоке (значение 0 выключает ленту в виджете)
  • show stream = отображать/не отображать ленту статусов
  • header = отображать/не отображать заголовок Find us on Facebook

Для своего сайта я выбрал два варианта виджетов - полный для главной страницы и уменьшенный для внутренних:

fb_likebox_1

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

fb_likebox_2

fb_likebox_4 fb_likebox_3


Для того, чтобы разместить виджет на сайте, достаточно добавить на сайт следующий код:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/pages/Moscow-Russia/Fotomasterskaa-Petra-Mituskina/169980773017301" width="200" colorscheme="dark" stream="0" header="0"></fb:like-box>


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

Like button

Этот виджет стал первым социальным виджетом для внешних сайтов. Это произошло в апреле 2010 года и положило начало действительно эффективным и интересным историям продвижения брендов в сфере social media. На момент написания предыдущей статьи набор настроек этого виджета был шире возможностей для аналогичного виджета Вконтакте. Однако, за последние две недели многое изменилось и сейчас функционально они очень схожи.

В рамках настройки данного виджета возможны следующие настройки:
  • url to like = позволяет задать ссылку на страницу, которую будем "любить" этой кнопкой. В базовых интеграциях эту опцию я не использую. Подробнее о ней расскажу в следующих статьях о сложных интеграциях. По умолчанию кнопка действует для страницы, на которой она установлена
  • layout style = задает тип кнопки (примеры ниже)
  • show faces = задает показывать или юзерпики пользователей, полюбивших страницу. Параметр действует только для стандартного вида кнопки
  • width = задает ширину объекта
  • verb to display = позволяет выбрать текст like или recommend. Чистая психология :-)
  • font = выбор шрифта для отображения
  • color scheme = задает на выбор цветовую схему dark или light
Советую поиграться с подходящим представлением кнопки под ваш сайт. Я для себя выбрал представление, аналогичное выбранной стилистике кнопки Нравится Вконтакте. Играйтесь здесь: fb_likebutton_1

Альтернативные стили:
fb_likebutton_3 fb_likebutton_2

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

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script>
<fb:like layout="button_count" colorscheme="light">
</fb:like>


У вас может получиться и посложнее, например:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script>
<fb:like
        href="http://developers.facebook.com/docs/reference/plugins/like"
        width="300"
        action="recommend"
        font="tahoma"
        colorscheme="dark">
</fb:like>


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

<meta name="title" content="Заголовок статьи" />
<meta name="description" content="Описание статьи.

Это очень интересная статья." />
<link rel="image_src" href="http://mysite.com/mypic.jpg" />


Эти три тега должны быть расположены между тегами <head> и </head>. Тогда виджет поймет все правильно. Расшаренная для друзей ссылка примет в ленте такой вид:

fb_likebutton_4


Если прописать все мета теги, то будет еще лучше и полнее. Вашим друзьям не придется гадать, что вы им рекомендуете - достаточно будет прочитать описание и посмотреть на картинку, если она необходима. Я в будущем обязательно оформлю и у себя на сайте все подобающим образом, но пока не успеваю.

В частности, можно использовать возможности Open Graph Tags. Но и о них я расскажу в одной из следующих статей о сложной интеграции. В простом случае, их использование не требуется. 

Comments

Виджет комментариев во многом похож на виджет Комментариев социальной сети Вконтакте с почти тем же набором параметров настройки:
  • width = ширина виджета в пикселах
  • number of comments = количество последних комментариев, отображаемых виджетом
  • unique id = уникальный идентификатор комментируемого объекта (см. ниже)
  • publish feed = отметить по умолчанию чекбокс "Запостить комментарий в ленту"

fb_comments_1

Код виджет комментариев очень похож на код виджета "Мне нравится". Чтобы добавить комментарии на страницу вашего сайта нужно вставить в нужное место следующие строки:

<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script>
<fb:comments width="425"></fb:comments>


Виджет можно кастомизировать с использованием базовых параметров. Например, код:

<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script>
<fb:comments
        xid="100001"
        numposts="5"
        width="400">
</fb:comments>


Создаст виджет комментариев к некоему объекту с идентификатором 100001, с выводом последних 5 комментариев и шириной 400 пикселов. Использование xid полезно, если вы хотите дать пользователям возможность комментировать один и тот же объект на нескольких разных страницах вашего сайта, либо если на одной странице пользователь может комментировать разные объекты.

Вместо APP_ID следует подставить идентификатор вашего приложения (вспоминаем начало статьи!).

В случае, если на каждой странице, на которой размещен виджет комментариев, пользователь комментирует непосредственно материал, параметр xid можно не указывать и идентификатором объекта комментирования будет URL данной страницы. Для такой реализации код на всех страницах будет один и тот же, как в первом примере.

Обратите внимание на две особенности данного виджета:

1) В данном виджете непосредственно над формой для комментария всегда по умолчанию располагается список пользователей, "полюбивших" страницу сайта, на которой расположен виджет. Формат представления - standart.
2) Фон виджета прозрачный, что может привести к конфликту стилей (цвет фона и цвет шрифта).

Я не реализовывал данный виджет на своем сайте, однако существует множество сайтов с реализацией данного виджета. К сожалению, не могу найти подходящий пример. Если знаете, дайте ссылку в комментариях. Спасибо!
Рекомендую поковыряться в настройках виджета на странице его описания.

Recommendations

Facebook в отличие от Вконтакте имеет несколько специфических виджетов. Один из них - виджет Recommendations. Он позволяет пользователю увидеть рекомендации в соответствии с выбором друзей пользователя. В данном виджете приводятся материалы, которые "полюбились" или были прокомментированы друзьями. Виджет имеет несколько базовых возможностей для настройки:
  • domain = указывает домен, рекомендации для страниц которого будут представлены в виджете. Если не указано, то приводятся рекомендации для домена, на странице которого установлен виджет
  • width = ширина виджета в пикселах
  • height = высота виджета в пикселах
  • header = указывает наличие/отсутствие заголовка Recommendations ("0" или "false" - нет, "1" или "true" - есть)
  • color scheme = выбор цветовой схемы dark или light
  • font = выбор шрифта из возможных
  • border color = задает цвет границы

fb_recommend_1

Для добавления виджета необходимо разместить на сайте следующий код:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:recommendations
        site="http://peterkord.ru"
        width="400"
        height="200"
        header = "0"
        font="tahoma">
</fb:recommendations>


В такой реализации виджет примет следующий вид:

fb_recommend_2

Для своего сайта я выбрал темную цветовую схему с заголовком:

fb_recommend_3

Код виджета в простейшей реализации выглядит так:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:recommendations width="400" height="200" colorscheme="dark"></fb:recommendations>

Работу виджета моно посмотреть на главной странице моего сайта.

Заключение

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

Надеюсь, эта статья поможет вам сделать свои сайты еще более социально значимыми и полезными :-) Как всегда буду рад любым вопросам, комментариям и пожеланиям. В следующей серии - базовые возможности интеграции виджетов Twitter на сайт.

PS Коллеги, я задумал целую серию статей в ближайшие недели, а именно отдельную статью по основам FBML и статью о механиках оценки эффективности рекламных кампаний в социальных медиа. Буду благодарен за кейсы/материалы по теме и просто за личный опыт!
Tags: facebook, smm, интеграция
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

  • 10 comments