Кнопка like від facebook: як додати на сайт, нюанси, плагін для wordpress

Коли ви натискаєте на кнопку Like від Facebook на сайтах, в вашому профілі з`являється повноцінний анонс сторінки (замість попередньої позначки про те, що вам щось сподобалося) - посилання + цитата + картинка.

Якщо подивитися на це з боку вебмастера, то можна побачити відмінну можливість отримати додатковий трафік. Давайте розглянемо, як можна максимально збільшити віддачу від цієї кнопки. Для початку налаштуємо параметри руками (далеко не для всіх CMS є модулі / плагіни, що автоматизують процес).

Генератор кнопок Like ви знайдете за адресою: https://developers.facebook.com/docs/reference/plugins/like/

Перший крок - створюємо саму кнопку.

URL to Like - можна задати свій URL, можна залишити поле порожнім, тоді як цього параметра буде стояти адреса поточної сторінки (при ви борі XFBML формату кнопки - про це нижче). Варто зауважити, що FB кнопка за пріоритетом вибере той, що зазначений в тезі canonical в head сторінки.
Layout Style - три варіанти оформлення кнопки, підбираємо найбільш доречне для вашого дизайну.
Show Faces - якщо поставити галочку то при заході на сайт з кнопкою Like під нею будуть показуватися аватарки ваших друзів, які вже «залайкалі» дану сторінку.
Width - ширина. З огляду на, що при включеному Show Faces вам знадобиться більше місця для кнопки, вкажіть допустиму ширину блоку. Виключно в пікселях, відсотки не працюють.
Verb to display - вибираємо напис на кнопці Like або Recommend.
Font - можна вибрати шрифт, аналогічний тому, що у вас на сайті.
Color Scheme - вибір світлої або темної колірної схеми.

Налаштували? Тепер тиснемо кнопку Get Code. У вікні буде два варіанти: iframe і XFBML. Якщо ви не вказали URL to Like, то щоб кнопка взяла в якості цього параметра сторінку, де вона встановлена - вибирайте XFBML. Особисто я з естетичних міркувань теж віддаю перевагу XFBML, оскільки в неактивному стані він не розтягує сторінку і не залишає багато пустого простору, як iframe.

Отриманий код можна русифікувати, для цього в адресі https://connect.facebook.net/en_US/ міняємо en_US на ru_RU

Поставимо цей код на сайт. Як неважко помітити, анонс, заголовок і картинка вибираються Фейсбук довільно. Дуже часто не так, як цього вам хотілося б. Наприклад, в Остах без картинок для анонса може бути взято зображення лічильника або кнопка Фідбернера. Зрозуміло, це не сприяє кликабельности поста. Тому продовжимо налаштування. Розширені можливості пошуку для постінгу в Фейсбук вебмастер може задатьс допомогою спеціальних мета тегів. Налаштувати їх вам також допоможе таже посилання: https://developers.facebook.com/docs/reference/plugins/like/

Title - заголовок поста.
Type - тут можна задати тип поста (радше - тематику) - по ідеї використовується в пошукових механізмах платформи, можливо також пошуковими системами, які співпрацюють з FB.
URL - можна задати свою адресу, але перевага буде за тегом canonical.
Image - адреса картинки, яка буде використана для анонса.
Site name - назва вашого сайту.
Admin - Facebook ID, якщо ви на сторінці налаштування кнопки перебуваєте будучи залогіненним в FB, то ваш ID повинен підставитися автоматично. Дозволить дивитися статистику по роботі кнопки, подробиці - нижче.

Тепер у нас є метатеги, які ставимо до тега сторінки.

Варто зауважити, що можна створити одну привабливу картинку для сайту і використовувати її для всіх кнопок Like ресурсу. Це спростить завдання, проте якщо під кожну сторінку робити свою картинку, вийде більш цікаво для користувача (ого, щось нове, поду подивлюся!).

Перейдемо до автоматизації. Скористаємося плагіном для WordPress Facebook Like Button https://wordpress.org/extend/plugins/facebook-like-button/ - він спростить завдання для блогів на цій платформі. Це одне з оптимальних рішень, яке не потребує редагування шаблону, ручного прописування параметрів і т.д.

На сторінці налаштувань плагіна ви знайдете такі поля для заповнення:

AppID for XFBML version - тут просять ввести AppID додатки, якщо будемо використовувати XFBML кнопку, щоб отримати цей AppID, треба буде прив`язати до аккаунту номер телефону, з нашими операторами це може стати проблемою (хоча на даний момент з Білайном і Мегафоном в Московському регіоні все ок, хоча недавно ще не виходило). Втім, і без вказівки AppID плагін буде працювати.

Type: XFBML або iFrame - вибираємо формат кнопки, як уже помітив вище, XFBML зручніше.
Show in Home: Показувати на головній сторінці.
Show in Pages: Показувати на сторінках.
Show in Posts: Показувати в постах.
Show in Categories: Показувати в категоріях.
Show in Archive: Показувати в архівах.
Position: Вибираємо позицію кнопки. Краще ставити після контенту.
Alignment: Вираваніе кнопки по лівому або правому краю.
Admin ID: Якщо нам потрібна статистика по роботі кнопки вказуємо сюди свій ID (про це вже писав вище).
Defualt Image: сюди пишемо адресу картинки для анонса за замовчуванням Check to enable: ставимо галочку, щоб включити використання картинки.
Language: Вибираємо мову кнопки.

Далі настройки зовнішнього вигляду:

Layout Style: Вибір виду кнопки.
Show Faces: Чи показувати аватарки друзів.
Verb to display: Слово на кнопці.
Font: Шрифт.
Color Scheme: кольори.
Width: Ширина.
Height: Висота.
Container Class: Якщо в таблиці стилів є елементи для оформлення цієї кнопки то тут вкажіть назву класу.

Якщо ви вказали свій ID, то статистика через час буде доступна за адресою https://facebook.com/insights/

Надзвичайно зручна річ: можна дізнатися загальне число Лайко на сайті, кількість переходів з Facebook, демографію тих, хто лайкать ваші замітки (щоб виявити активний кістяк аудиторії, з яким можна взаємодіяти). До речі, на adne.info Like Button CTR дорівнює 0,05%, на rutwitter.com 0,02% - є над чим працювати.

Як постскриптум відео з фактами і Facebook:

Так само вам буде іyтересно і корисно прочитати кілька заміток: Фейсбук для блогерів - основи взаємодії з соціалкою, чому люди лайкають сторінки брендів - правдиво про те, як набрати купу лайків.