Ви можете покращити будь-бізнес-ресурс або програмне забезпечення, додавши в них функції соціальних мереж. Можна додати на сторінки вбудовані віджети і використовувати, якщо це можливо, API без аутентифікації. Чи можете використовувати соціальні мережі для аутентифікації користувачів на своєму сайті. А також публікувати контент під своїм іменем користувача у соціальній мережі. У цій статті я дам вам кілька корисних порад по кожному з цих підходів.

Вбудовування віджетів

Основні принципи реалізації — це вбудовування Timelines («Шкала часу») Twitter і Facebook, кнопок «Подобається«, «Поділитися» або «Твітнуть«.

Facebook більш простий у використанні, ніж Twitter, тому що Facebook досі пропонує кілька плагінів, які можна використовувати без аутентифікації. Щоб використовувати плагін Facebook, вам потрібно зайти на сторінку для розробників Facebook, вибрати зі списку плагін, який вам потрібен, налаштувати його і отримати HTML-код для вставки на сторінку.

Наприклад, щоб інтегрувати віджет лайків, необхідно тільки назва сторінки. Зверніть увагу, що віджет лайків підтримується тільки на сторінках Facebook і не працює на персональних сторінках. Налаштування віджета лайків дуже проста: все, що вам потрібно робити, це натиснути «Далі» у вікні майстра установки, встановлюючи прапорці.

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

Панель лайків повинна бути пов’язана з ID додатка, тому ви повинні мати обліковий запис в Facebook і створити через неї додаток. Щоб увімкнути панель лайків, вам необхідно вибрати ID програми при запуску майстра установки. Також ви можете додати кнопку «Подобається» або «Поділитися» і також отримати код для вбудовування.

Facebook API можна вбудовувати на сторінку інших плагінів на основі JavaScript і HTML5. Це дозволяє додати панель коментарів. У HTML сторінки потрібно вказати код для завантаження JavaScript SDK Facebook, як показано в наведеному нижче прикладі:

(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’));

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

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

Малюнок 1: Віджети Facebook в дії

Протягом довгого часу в Twitter намагалися розробити API, який можна було б використовувати, вказавши URL-адресу, щоб отримувати дані в форматі JSON. Рік тому компанія розробила спосіб отримання доступу до API без аутентифікації. Як і Facebook, Twitter надає вбудований timeline користувача.

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

Some text here

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

Поради щодо інтеграції Facebook і Twitter на сайт

Малюнок 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 для відображення на сторінці твітів:

@foreach (var t in Model)
{

}

Поради щодо інтеграції Facebook і Twitter на сайт @t.text
@t.created_at

Є ще багато всього, що ви можете реалізувати з допомогою програмного виведення 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» був підготовлений дружною командою проекту Сайтостроение від А до Я.