Повна інтеграція з протоколом Facebook Open Graph

Думаю, нівкого не викликає сумніву, що Facebook має значний вплив на інтернет та його користувачів. Саме тому веб розробники у всьому світі намагаються знайти шляхи якнайміцніше поєднати користувачів Facebook зі своїм сайтом. На сьогоднішній день повна інтеграція із соціальною мережею можлива з допомогою Open Graph Protocol.

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

• Кнопка “Like”. Ця кнопка дає змогу користувачам додати коментар і зображення з текстом вашого допису на стіну свого екаунта. З повною інтеграцією кнопки “Like” ваш контент отримує власну “сторінку” на Фейсбук, доступ до якої надається на рівні з іншими Сторінками адміністраторами яких ви є. Ви отримуєте повний доступ до статистики сторінки і можливостей ділитись (share) з іншими. Також ви зможете поділитись оновленнями з користувачами, що вподобали ваш контент, і навіть націлити рекламу на них. Погодьтесь тут можливостей побільше ніж у “примітивній” Iframe кнопці “Like”.
• Кнопка “Send”. Ця кнопка дозволяє користувачеві швидко надіслати контент сторінки своїм друзям у Фейсбук. На відміну від кнопки “Like”, з допомогою якої можна поділитись контентом одразу зі всіма друзями, кнопка “Send” дозволяє відправити приватне повідомлення лише кільком друзям.
• Стрічка активності. Стрічка активності дозволяє веб розробнику показувати персоналізований контент користувача і/або його друзів, якщо вони авторизовані на сайті. Якщо авторизованих друзів на сайті немає, тоді можна показувати рекомендації з вашого сайту. Дуже корисний плагін, що залучає користувачів на сайт з мінімальними зусиллями з вашого боку.
• Рекомендації. Плагін Рекомендацій дозволяє ділитись рекомендованим контентом з користувачами. Він покаже список дописів, які користувачі рекомендують переглянути на вибраному сайті.
• The Like Box. Цей соціальний плагін довзоляє користувачеві стати фаном вашої сторінки на Фейсбук всього за один клік і без необхідності переходу туди! Також він відображає контент з вашої Фейсбук-сторінки та кількість користувачів, що вже стали фанами. Якщо ви пропонуєте якісний контент на головному сайті, то дуже ймовірно що з Like Box ви легко збільшите кількість фанів сторінки на Фейсбук.
• Кнопка “Login”. Інтегрована кнопка “Login”, по-перше, дозволить авторизовуватись на сайті під своїм Фейсбук-екаунтом. По-друге, під кнопкою буде показано друзів користувача,
  що вже увійшли на сайт під своїм Фейсбук-екаунтом.
• Коментарі. Ви можете інтегрувати Фейсбук-коментарі на сайт. Тоді авторизовані під своїм Фейсбук-екаунтом користувачі зможуть легко коментувати, вступати в дискусію один з одним. Правда поки-що існує невеличкий мінус у Фейсбук-коментарів – вони не індексуються пошуковиками.
• Live Stream. Цей плагін дозволяє користувачам розмовляти одне з одним як у чаті. Це особливо корисний плагін, якщо на сайті відбувається якась подія чи сайт висвітлює якусь
  подію.

Повний список доступних соціальних плагінів знаходиться на сторінці Social Plugins.

Створіть Facebook App

Найперше, вам потрібно створити Фейсбук-додаток. Перейдіть на сторінку Розробники Facebook, справа вгорі ви побачите кнопку “Створити новий додаток”. Сміливо натискайте цю кнопку, бо саме за цим ми і прийшли!

Процедура створення додатку досить проста. Вкажіть назву, відмітьте пункт про згоду з вимогами Фейсбук та створюйте додаток.

Далі ви побачите багато полів де можна вписати різноманітну інформацію. Можете не писати більш нічого, а можете вписувати стільки, скільки вам потрібно. Також зліва є меню з пунктами About, Web Site,
Facebook Integration, Mobile and Devices, Credits, Advanced. Перейдіть на вкладку Web Site. Тут ви побачите поля Application ID та Application Secret. Занотуйте їх значення, вони нам знадобляться.

У полі Site URL вкажіть повну адресу свого сайту, а у полі Site Domain – свій домен. Таким чином, авторизація працюватиме і на головному домені і на всіх субдоменах. Це все, зберігайте зміни.

Додайте Open Graph протокол на сайт

На даному етапі вам доведеться редагувати код сайту. Тому, подбайте про бекап всіх файлів і зберігайте його провсяк випадок аж до завершення наших робіт. Також, у прикладі я розповім як додати
Open Graph протокол на WordPress блог. Але, трішки змінивши код, ви зможете використати його для сайту на будь-якому іншому двигунці.

У коді, знайдіть рядок, де прописано заголовок вашого блогу (тег <title>). Тоді одразу під ним додайте такі рядки:

    <meta property="og:title" content="<?php if ( is_single() || is_page() ) { the_title_attribute(); } else { bloginfo('name'); } ?>"/>
    <meta property="fb:app_id" content="XXXXXXXXXXXX"/> <!-- тут впишіть ID вашого додатку -->
    <meta property="og:type" content="blog"/> <!-- тут "blog", а детальніше про типи див. нижче -->
    <meta property="og:url" content="<?php if ( is_single() || is_page() ) { the_permalink(); } else { bloginfo('url'); } ?>"/> <!-- посилання на блог або на допис -->
    <meta property="og:image" content="<?php echo image_for_social(); ?>"/> <!-- зображення -->
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>"/> <!-- назва сайту -->
    <meta property="fb:admins" content="XXXXXXXXXXXX"/> <!-- тут впишіть ID вашого додатку або ID екаунта Facebook, можна кілька значень через кому -->
    <?php og_meta_desc(); ?>

Крім того, додайте наступний код у файл functions.php вашої теми:

//Зображення для ФБ
function image_for_social() {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 $first_img = $matches[1][0];
 
 if( empty($first_img) ){ //якщо допис немає зображення, то виводимо лого сайту
 $first_img = get_bloginfo('template_url').'/images/logo.jpg'; //вкажіть свою назву файла лого
 }
 return $first_img;
}
 
//Опис для ФБ
function og_meta_desc() {
global $post;
$meta = strip_tags($post->post_content);
$meta = str_replace(array("\n", "\r", "\t"), ' ', $meta);
$meta_count = strlen($meta);
if ($meta_count >= 200 ) {
    $meta = mb_substr($meta, 0, 200, 'UTF-8').'...';
} else {
    $meta = mb_substr($meta, 0, 200, 'UTF-8');
}
    if ( is_single() || is_page() ) {
        echo '<meta property="og:description" content="'.$meta.'"/>';
    } else {
        echo '<meta property="og:description" content="'.get_bloginfo('description').'"/>';
    }
}

Тепер невеличке пояснення. Те що ми додали – це обов’язкові мета-теги протоколу Open Graph. За бажанням, ви можете вписати ще й необов’язкові мета-теги. Також, ми вибрали тип об’єкта “blog” у og:type. Детальніше про можливі значення типу об’єкта дивіться на сторінці документації Open Graph. У fb:admins вказано перелік адмінів сторінки. Кожен користувач, ID якого вписано у це поле, повинен “лайкнути” сторінку, щоб бути затвердженим адміном.

Функція image_for_social() додає посилання на зображення допису. А за його відсутності – на лого сайту. Функція og_meta_desc() додає короткий опис, сформований з тексту допису. А якщо ми знаходимось на головній сторінці, то для цих потреб береться текст опису сайту.

Тепер потрібно додати на сайт код Javascript SDK. Він увімкне доступ до всіх можливостей Graph API через JavaScript. Просто скопіюйте і вставте нижче наведений код перед закриваючим тегом </body>:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    //замість "Х" впишіть ID вашого додатку
    FB.init({appId: 'XXXXXXXXXXXX', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/uk_UA/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Цей код завантажується асинхронно, тож він не блокуватиме жоден елемент вашого блога. Не забудьте вписати ID код вашого додатка, інакше нічого не працюватиме.

Додайте свій соціальний плагін

Найпростіше і найшвидше додати кнопку “Like” на свій сайт. Тому відкрийте файл single.php і скопійюйте наступний код у те місце, де бажаєте виводи згадану кнопку:

<fb:like href="<?php the_permalink(); ?>" layout="button_count" show_faces="false" action="like" font="tahoma"></fb:like>

У наведеному вище коді вказано атрибути якими користуюсь я. Ви можете додати свої або змінити існуючі самостійно, ось тут документація по кнопці “Like”.

Facebook Insights

Facebook Insights це система статистики для власників Facebook сторінок та розробників платформи Facebook. Вона дозволяє, зокрема, переглянути реферальний трафік на сайт із Facebook, загальну участь сайту і його присутність у соціальній мережі (к-сть лайків, взаємодія і таке інше). Ці графіки виглядають приблизно ось так:

Щоб переглянути статистику по своєму сайту потрібно увійти до Insights Dashboard. Лише адміністратори сайту та власник додатку можуть бачити його статистику. Пам’ятатєте ми прописували мета-теги fb:app_id або fb:admins? Ось вони і вказують на власника чи адміна.