Социализируем сайт с Facebook

    imageВдохновившись общением с Эндрю Босвортом на РИТ++, решил воплотить идею Facebook по социализации всего в интернете у себя на проекте www.bitrixonrails.ru, прежде всего добавив систему комментариев. Хотел рассказать о ее внедрении и узнать ваше мнение о ее полезности/удобности.

    Интуиция подсказывала, что интеграция с Facebook не должна занять много времени – так оно и оказалось.

    Реализация


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


    Создал приложение (Application), пройдя простой Мастер:
    image

    На втором шаге скачал файлик и залил его на сервер, Фейсбук его обнаружил и в результате я получил APPLICATION_ID.

    Далее в местной «песочнице» получил код, подключающий API Facebook на странице, который позволяет потом использовать фейсбуковские теги (называемые в совокупности XFBML, с приставкой 'fb:'). Теги эти выводят данные профиля авторизованного пользователя, форму комментариев и прочие элементы. Подробнее о XFBML в документации.
    Вот как выглядит этот код:
    <div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
     FB.init({
      appId: "YOUR_APPLICATION_ID",
      xfbml: true,
      cookie: true,
      status: true
     });
    };
    (function() {
     var e = document.createElement('script'); e.async = true;
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
     document.getElementById('fb-root').appendChild(e);
    }());
    </script>


    * This source code was highlighted with Source Code Highlighter.


    Для подключения русского языка нужно использовать локаль ru_RU. Для этого просто замените строчку '//connect.facebook.net/en_US/all.js' на '//connect.facebook.net/ru_RU/all.js'.

    Для добавления формы и списка комментариев остается добавить в шаблон вывода материала такие теги:
    <fb:comments></fb:comments>

    * This source code was highlighted with Source Code Highlighter.


    Выглядит это в результате так:
    image


    Самая интересная опция, безусловно, это возможность «Добавить комментарий к моему профилю на Facebook», что позволяет всем вашим друзьям видеть ваши комментарии и при желании присоединяться к обсуждению. Для Huffington Post это отлично сработало. Вот как мой комментарий выглядит уже в самом Facebook:
    image


    По затратам времени получилось что-то вроде 2-х часов.

    Такая система комментирования уже работает на сайте «Частный корреспондент», о чем рассказывали и Босворт и Иван Засурский, но интересно ваше мнение о такой системе комментирования для ИТ-тематики.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 37

      –2
      А какой в этом смысл? Даже если бы контакт сделал такую возможность — большое количество комментаторов будет отсечено. И как же приватность? Многие просто побоятся писать от своего имени. И мы все знаем возрастную группу пользователей соц сетей.
        +9
        Мне кажется, что смысл в том, что ваши «следы» в интернете элегантно агрегируются на Facebook'е и ваши друзья могут видеть ваши мысли.
        • UFO just landed and posted this here
          0
          Хорошая статья. Как раз сегодня увидел эту кнопочку на афише.ру, подумал, что неплохо бы использовать на своих проектах.
            0
            А почему ваш сайт называется BitrixOnRails?
              0
              Потому что задумка проекта в том, чтобы привнести хорошие идеи и инструменты, которые есть в Rails, в разработку на Битриксе.
                +4
                А я как прочитал название, то подумал «Неужели битрикс на рельсы портотируют» ))
                  0
                  тогда надо было назвать Rails on Bitrix)
                    0
                    Лучше вообще не связывать Rails с Битриксом.
                    0
                    чтобы привнести хорошие идеи и инструменты, которые есть в Rails, в разработку на Битриксе

                    Не тот язык, не та система.
                    0
                    да уж, соглашусь, название совсем не в тему… если еще учесть, что между рельсами и битриксом пропасть :)
                    +1
                    Имхо проблема в том что у пользователя наверно должен быть аккаунт на facebook чтобы использовать эту возможность?
                    Хотя нет, вижу возможность оставить комментарий указав email.
                    Возможно интересней смотрится disqus.com
                    Хотя для российской аудитории похоже нужно ждать Вконтакте Connect ^_^
                      0
                      Ну для коментариев, у контакта уже все есть.

                      vkontakte.ru/pages.php?act=share

                      Каждый раз, когда пользователь ВКонтакте нажимает на эту кнопку на Вашем сайте, на его странице ВКонтакте автоматически создается заметка со ссылкой на Ваш сайт. После этого друзья пользователя сразу же смогут узнать о статье из трех источников — со страницы Мои Новости, со страницы Заметки друзей и с личной страницы опубликовавшего пользователя.



                      Код кнопки:
                      //Put this script tag to the of your page
                      <script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?5"></script>

                      // Put this script tag to the place, where the Share button will be
                      <script type="text/javascript">
                      document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
                      </script>



                      Либо:
                      vkontakte.ru/share.php?url={адрес страницы}
                        +1
                        Это немного не то, это поделиться ссылкой, а Facebook Connect обычно используется несколько для других целей, например для авторизации на сайте через Facebook. Теперь и у вконтакте есть похожая штука. OpenApi.
                          0
                          я не говорил, что это аналог Facebook connect. Как Вы правильно заметили аналогом Facebook connect-а является вконтактовские OpenApi. А и то и другое является аналогом OAuth :-)

                          Просто в Вашем посте промелькнуло слово комментарий, поэтому я привел пример где комментарий, можно сделать и без фейсбук коннекта (OAuth)

                          А потом перешел на главную хабра и увидел новый анонс от контакта — OpenApi :-)
                          Теперь можно делать не только это, а гораздо большее.
                            0
                            тут даже не просто аналогом OAuth, а OpenID + OAuth.
                        +4
                        Тут есть один нюанс.
                        Во время последней Олимпиады у каждого соревнования на страничке можно было используя подобную интеграцию, поучаствовать в международном своеобразном чате. И в первый день я был в восторге от такой возможности, активно болея за белорусов в биатлоне, перебрасываясь фразами со словаками, россиянами и прочими канадцами.
                        Но моя радость закончилась через пару часов, когда я зашел на фейсбук и увидел все мои реплики, растянувшиеся длинной-длинной простыней в качестве обновлений моего статуса. Мало того, что эти реплики часто вне контекста были совершенно непонятны, так еще и вряд ли всем моим контактам было интересно это читать. Ну и само собой я как-то был совершенно незаинтересован в том, чтобы это выкладывать на всеобщее обозрение.

                        После чего подобной функцией более никогда не пользовался.

                        Так что вещь приятная, но требует очень аккуратного отношения.
                          0
                          Так там чекбокс должен был быть, как здесь, определяющий отправлять или данный комментарий в Facebook. Он, как я понимаю, и должен помочь в ситуации такого «чата».
                            0
                            Ну вот там его почему-то не было. То ли разработчики просто не знали о его возможном существовании, то ли не продумали.
                            Может потом добавили, но этого я уже никогда не узнаю.
                              +1
                              его добавили уже потом :-) все из этого live chat'а сначала жаловались на это, а потом привыкли вычищать стену после очередной «трансляции» :-)
                          0
                          А чем использование этого способа удобней например чем disqus.com?
                            0
                            Спасибо за совет, попробую и его. В документации Фейсбука была информация, что с Дискусом он тоже как-то интегрируется (и еще с несколькими подобными сервисами).
                              0
                              А мне больше понравилась система intensedebate.com/
                              Первое, что бросилось в глаза — внешний вид. У этого намного симпатичнее, хотя уверен, что изменить можно все.
                              А во-вторых, не буду обманывать, но вроде как он работает побыстрее… Хотя это не мои слова — просто по комментам пришел к такому выводу.
                                0
                                Кто то из них, то ли disqus то ли intensedebate плохо дружил с оперой. Хотя я думаю если поискать можно еще таких сервисов найти.
                                Но соглашусь с вами intensedebate получше будет имхо. Просто disqus было первым что пришло в голову :)
                                  0
                                  У меня стоит intensedebate на сайте, и пользуюсь я Оперой, вроде косяков не замечал ни разу :)
                                  Вообще меня порадовал сервис! Особенно наличие плагинов для популярных блого-движков.
                                  И в Рунете я уже не раз натыкался на сайты с этой системой, а вот Disqus не видел ни разу…
                                    0
                                    >И в Рунете я уже не раз натыкался на сайты с этой системой,
                                    > а вот Disqus не видел ни разу…
                                    У меня ситуация противоположная, встречаю на блогах Disqus, а intensedebate специально гуглил чтобы посмотреть.
                                    P.S. тоже пользуюсь оперой, в Disqus косяков не замечено.
                                      0
                                      Видимо просто совпадение…
                                      Если интересно посмотреть intensedebate в действии — пройдите по ссылке в моем профиле.
                                  0
                                  Раз пошла такая пьянка — попробуйте js-kit.com. Там на порядок больше возможностей, особенно в части интеграции с разными сервисами.
                                    0
                                    Меня в js-kit смущает, что для поисковиков, чтобы индексировались комментарии, они предлагают настроить rss.yoursite.com на сервера js-kit. В то же время, неоднократно видел сайты, использующие Disqus, у которых скачанная страница содержит комментарии. Такой вариант, на мой взгляд, гораздо привлекательнее, если комментарии имеют какую-то ценность.
                              0
                              Минусы: это только Facebook, а есть еще ВКонтакте, Одноклассники, OpenID, Twitter, Buzz и этот список можно перечислять бесконечно! Есть смысл добавить возможность авторизироваться при помощи всех этих социалок, а лучше сразу нескольких, чтобы этот коммент появился в них во всех, дабы оповестить друзей/подруг/коллег/читателей о новом комменте. Это слишком трудозатратно и пока невыполнимо.

                              Плюсы: для сайта, на котором будет стоять такая система — это привлечение новых посетителей в лице друзей/подруг/коллег/читателей откомментировавшего. Да в самой социалке можно будет посмотреть ответили тебе на твой же коммент или нет, что избавляет пользователей от лишних действий.
                                0
                                Буквально на прошлой неделе прикручивал подобную штуку, только называлась она Friend Connect и была от google :)
                                Правда в ней была еще своя возможность «подписаться» на ленту от сайта
                                  0
                                  Кстати, Friend Connect, по сути, при той же функции оставлять комментарии на сайте, дает возможность использовать гораздо более широкий набор логинов, включая Google, OpenId и т.д.
                                  +1
                                  Как в воду глядел habrahabr.ru/company/vkontakte/blog/91347/ Open API от вконтакте, теперь осталось чтобы кто то комментаторку сделал ^_^
                                    0
                                    Да, вКонтакте заинтриговал
                                    –2
                                    фейсбук — умирающая сеть.
                                      0
                                      Обоснуйте весомыми доводами, а не лирическими рассуждениями!
                                      Требуем хлеба и зрелищь!
                                        0
                                        как вариант, там растет количество страниц умерших пользователей…

                                    Only users with full accounts can post comments. Log in, please.