Советы по интеграции Facebook и Twitter на сайт

Вы можете улучшить любой бизнес-ресурс или программное обеспечение, добавив в них функции социальных сетей. Можно добавить на страницы встроенные виджеты и использовать, если это возможно, API без аутентификации. Или можете использовать социальные сети для аутентификации пользователей на своем сайте. А также публиковать контент под своим пользовательским именем в социальной сети. В этой статье я дам вам несколько полезных советов по каждому из этих подходов.

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

Основные принципы реализации — это встраивание TimelinesШкала времени») Twitter и Facebook, кнопок «Нравится«, «Поделиться» или «Твитнуть«.

Facebook более прост в использовании, чем Twitter, потому что Facebook до сих пор предлагает несколько плагинов, которые можно использовать без аутентификации. Чтобы использовать плагин Facebook, вам нужно зайти на страницу для разработчиков Facebook, выбрать из списка плагин, который вам нужен, настроить его и получить HTML-код для вставки на страницу.

Например, чтобы интегрировать виджет лайков, необходимо только название страницы. Обратите внимание, что виджет лайков поддерживается только на публичных страницах Facebook и не работает на персональных страницах. Настройка виджета лайков очень проста: все, что вам нужно делать, это нажимать «Далее» в мастере установки, устанавливая флажки.

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

<iframe src="//www.facebook.com/plugins/likebox.php?
    href=http://ww.facebook.com/NAA4E&show_faces=false&stream=true&amp;appId=nnnnnnn" 
        scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:395px;"></iframe>

Панель лайков должна быть связана с ID приложения, поэтому вы должны иметь учетную запись в Facebook и создать через нее приложение. Чтобы включить панель лайков, вам необходимо выбрать ID приложения при запуске мастера установки. Также вы можете добавить кнопку «Нравится» или «Поделиться» и также получить код для встраивания.

Facebook API можно встраивать на страницу других плагинов на основе JavaScript и HTML5. Это позволяет добавить панель комментариев. В HTML страницы нужно указать код для загрузки JavaScript SDK Facebook, как показано в приведенном ниже примере:

<div id="fb-root"></div>
<script>
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=nnnnnnn";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Для ресурсов, развернутых на основе ASP.NET MVC, можно разместить этот код в шаблоне, чтобы панель выводилась на нескольких страницах. Ниже приводится разметка для панели комментариев:

<div class="fb-comments" data-href="http://www.facebook.com/NAA4E" data-numposts="5" data-colorscheme="light"></div>

На рисунке 1 показаны все упомянутые выше плагины Facebook в действии на странице, созданной с помощью Bootstrap:

Esposito DCM1151 Figure 1

Рисунок 1: Виджеты Facebook в действии

В течение долгого времени в Twitter пытались разработать API, который можно было бы использовать, указав URL-адрес, чтобы получать данные в формате JSON. Год назад компания разработала способ получения доступа к API без аутентификации. Как и Facebook, Twitter предоставляет встраиваемый timeline пользователя.

Сначала на странице «Настройки аккаунта Twitter», которая используется API, необходимо создать виджет и привязать его к пользователю Twitter, timeline которого вы хотите транслировать. После этого вы получаете код, который выглядит приблизительно так:

<a class="twitter-timeline" data-widget-id="421570668073738240">Some text here</a>

Кроме этого виджет позволяет использовать атрибут href, указывающий на профиль в Twitter, чтобы вывести его в панели. Но главное — это ID виджета данных. На рисунке 2 показан встроенный timeline пользователя Twitter.

Esposito DCM1151 Figure 2

Рисунок 2: Timeline Twitter

Панель timeline в Twitter содержит кнопки «Следить«, «Твитнуть» и «Загрузить другие твиты«. Я встречал сообщения о проблемах, связанных с некорректной работой панели Twitter в различных версиях Internet Explorer (IE), в других браузерах все работает нормально. Лично я не использую timeline в своих приложениях; однако, я встречался с некоторыми проблемами в IE при тестировании демо-страниц.

Для проекта, где я использовал панель лайков Facebook, я решил не использовать timeline Twitter, потому что он статически связан с учетной записью пользователя в социальной сети. А для этого проекта мне нужно было создавать панели Twitter и Facebook динамически.

Для timelines в Facebook это делается просто, а вот для Twitter нет. Он становится практически неуправляемым при работе с тысячами идентификаторов виджетов Twitter. Вместо этого мы реализовали панель Twitter программно.

Получение доступа к timeline программным путем

В 2013 году был упразднен публичный REST API Twitter версии 1, использовавшийся для поиска твитов. Причина заключалась в том, что появилось большое количество случаев использования API для получения пользовательской информации. В API новой версии 1.1 вы должны быть аутентифицированы, чтобы программно считывать твиты.

Первый шаг реализации заключается в создании учетной записи Twitter и получении ключей. После этого вы отсылаете Twitter первый запрос, чтобы пройти аутентификацию. Следующий код создает заголовок авторизации, который включает в себя параметры аутентификации:

var code = String.Format("{0}:{1}",
    Uri.EscapeDataString(YourConsumerKey),
    Uri.EscapeDataString(YourConsumerSecret));
var authorizationHeader = String.Format("Basic {0}",
    Convert.ToBase64String(Encoding.UTF8.GetBytes(code)));

Заголовок авторизации должен храниться в HTTP-заголовке в POST-запросе, который отсылается к адресу
«https://api.twitter.com/oauth2/token.» Ниже приведен код фактического запроса:

var authRequest = (HttpWebRequest)WebRequest.Create(OAuthUrl);
authRequest.Headers.Add("Authorization", authorizationHeader);
authRequest.Headers.Add("Accept-Encoding", "gzip");
authRequest.Method = "POST";
authRequest.ContentType = "application/x-www-form-urlencoded;charset=UTF-8";
authRequest.AutomaticDecompression = DecompressionMethods.GZip | DecompressionMethods.Deflate;

В теле запроса вы пишете следующую строку в виде последовательности байтов:

grant_type=client_credentials;

Ответ в формате JSON, который вы получаете от Twitter, передается в класс C#, имя которого является произвольным:

public class TwitterAuthResponse
{
    public string token_type { get; set; }
    public string access_token { get; set; }
}

Свойства token_type и access_token должны быть в запросе, чтобы получить timeline данного пользователя. Ниже приводится пример URL-адреса для доступа к timeline:

https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name={0}&count{1}"

Аргумент screen_name — это имя учетной записи Twitter, к которой мы получаем доступ; третий аргумент указывает максимальное количество твитов, которое будет возвращаться.

Обратите внимание, что этот адрес возвращает только timeline пользователя; если вы хотите получить все твиты по хэштегу, вам нужно использовать другой URL-адрес. Обратитесь к документации Twitter для получения более подробной информации. В этом случае код для настройки аутентифицированного запроса такой же, но возвращаемый JSON отличается, и он должен быть обработан соответственно. Вот код, необходимый для подготовки запроса на доступ к timeline:

var userContext = String.Format("{0} {1}", authResponse.token_type, authResponse.access_token);
var timelineRequest = (HttpWebRequest)WebRequest.Create(timelineUrl);
timelineRequest.Headers.Add("Authorization", userContext);
timelineRequest.Method = "Get";

Ответ, который вы получаете, представляет собой список объектов JSON, который вы можете легко структурировать в класс С# с помощью сервиса на сайте http://json2csharp.com/. Ниже приведено несколько примеров разметки Razor для отображения на странице твитов:

<table class="table table-condensed table-responsive">
    @foreach (var t in Model)
    {
        <tr>
            <td><img src="@t.user.profile_image_url" alt="" class="img-responsive"/></td>
            <td>
                <b>@t.text</b><br/>
                <span>@t.created_at</span>
            </td>
        </tr>
    }
</table>

Есть еще много всего, что вы можете реализовать с помощью программного вывода timeline Twitter или даже Facebook. Например, определять гиперссылки и хэштеги, или расширить фотографии. Существует также ряд библиотек JavaScript для вывода timeline Twitter и Facebook. На текущий момент лучший способ вывода «шкалы времени» Facebook — это встроенный timeline через панель лайков. С программным доступом могут быть сложности, если вы не действуете от имени пользователя.

Аутентификация в социальных сетях

ASP.NET MVC 5 поставляется с шаблоном, который упрощает действия, необходимые для авторизации пользователей на сайте через аккаунты Facebook или Twitter. В конце процедуры Facebook и Twitter (и аналогично LinkedIn, Instagram и Google+) возвращают вам токен доступа, который будет использоваться в качестве ключа для пользователя, который был только что аутентифицирован.

Другими словами, пройдя аутентификацию на вашем сайте через свой аккаунт в социальной сети, пользователь предоставляет разрешение для совершения действий от его имени. Например, на размещение обновлений. В приведенном ниже коде показано, как разместить на Facebook сообщение с прикрепленным изображением. Код представляет собой конечную точку ASP.NET MVC, предоставляемую классом контроллера:

public static void Post(String token, String message, String picturePath)
{
    var client = new FacebookClient(token);
    using (var stream = File.OpenRead(picturePath))
    {
        dynamic result = client.Post("me/photos",
                                        new
                                            {
                                                message = message,
                                                file = new FacebookMediaStream
                                                        {
                                                            ContentType = "image/jpg",
                                                            FileName = Path.GetFileName(picturePath)
                                                        }.SetValue(stream)
                                            });
     }
}

Этот код основан на классах, определяемых в Facebook C# SDK. Язык, который используется для запроса — Graph API, и, в соответствии с документацией, вам может потребоваться POST или GET методы вызова объекта клиента Facebook. Например, чтобы получить фотографии пользователя, нужно использовать следующий код:

var client = new FacebookClient(token);
dynamic result = client.Get("/user-id/photos");

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

Чтобы программно отправлять сообщения в Twitter, вам также потребуется внешняя библиотека, которая реализует работу с протоколом OAuth. Например, для этого отлично подойдет TweetSharp.

Развивайте социальные функции

Для веб-разработчиков Twitter и Facebook являются наиболее важными социальными сетями в плане интеграции в веб-приложения. Многие действия, которые пользователь выполняет в пределах одного сайта, могут в дальнейшем предлагаться через социальные сети. Например, с помощью размещения виджета, чтобы делиться, лайкать и рекомендовать контент. Или для более контролируемого доступа к timeline программно.

Сегодня практически ни одна задача не может быть выполнена без аутентификации. Единственным исключением является использование виджетов. Аутентификация требует более сложного кода, но это также поможет в построении собственной сети лояльных пользователей.

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

Перевод статьи «Tips for Integrating Facebook and Twitter into Your Website» был подготовлен дружной командой проекта Сайтостроение от А до Я.