Кнопка Like от Facebook: как добавить на сайт, нюансы, плагин для WordPress

Когда вы нажимаете на кнопку Like от Facebook на сайтах, в вашем профиле появляется полноценный анонс страницы (вместо предыдущей отметки о том, что вам что-то понравилось) — ссылка + цитата + картинка.

Кнопка Like от Facebook: новости, нюансы, плагин для WordPress

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

Генератор кнопок Like вы найдёте по адресу: http://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.

Полученный код можно руссифицировать, для этого в адресе http://connect.facebook.net/en_US/ меняем en_US на ru_RU

Поставим этот код на сайт. Как нетрудно заметить, анонс, заголовок и картинка выбираются Фейсбуком произвольно. Зачастую не так, как этого вам хотелось бы. Например, в остах без картинок для анонса может быть взято изображение счётчика или кнопка Фидбернера. Разумеется, это не способствует кликабельности поста. Поэтому продолжим настройку. Дополнительные параметры для постинга в Фейсбук вебмастер может задатьс помощью специальных мета тегов. Настроить их вам также поможет таже ссылка: http://developers.facebook.com/docs/reference/plugins/like/

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

Теперь у нас есть метатеги, которые ставим до тега </head>страницы.

Стоит заметить, что можно создать одну привлекательную картинку для сайта и использовать её для всех кнопок Like ресурса. Это упростит задачу, однако если под каждую страницу делать свою картинку, получится более интересно для пользователя (ого, что-то новое, поду посмотрю!).

Перейдём к автоматизации. Воспользуемся плагином для WordPress Facebook Like Button http://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, то статистика через время будет доступна по адресу http://www.facebook.com/insights/

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

В качестве постскриптума видео с фактами и Facebook:

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

Подпишитесь на нашу рассылку и получайте то, что не вошло в блог, анонсы и тематические подборки + несколько руководств (сбор подписчиков и продажа информации).

Имя: Email:

Читайте сейчас: 👉 Как делать классные информационные сайты, которые быстро получают трафик и монетизируются

Лучший пост года: 👍 Быстрый трафик не из поиска — сайт вокруг рассылки

Обсуждение:
  1. denaie

    Вот спасибо как раз мне надо было кнопку доделать

  2. Надежда Хачатурова

    Хороший материал. Нужно будет проверить свои настройки. А рассказать хочу о случае, когда, зайдя в свой профиль в фейсбуке увидела этот лайк со счетчиком ТИЦ с нулевыми показателями. Вспомнила, что на одном из блогов лайкнула. Пришлось удалить. Пост — то был хороший, но картинка такая мне в профиле совершенно не нравится. Видимо, плагин у автора установлен без настроек.

  3. Олег

    Статистика, кнопки это конечно занятно, но с фейсбука трафика минимум, надо вконтакте окучивать.

    • Alex Hodinar

      У меня сегодня на 130 уников с вконтакте — 1 с фейсбука, относительно мало, но общие цифры заставляют внимательнее смотреть на фб, к тому же он очень динамично наращивает русскоязычную аудиторию.

  4. Joc

    Спасибо, очень полезная инструкция. Не знал, что есть статистика, буду теперь пользоваться. СМС на Мегафон пришла в секунды.

  5. Sasha

    А какой цтр для социальных кнопок нормальный, есть какие-то устоявшиеся рамки?

    • Alex Hodinar

      Нет, по этому поводу каких-то выводов не встречал. Кстати на izbir.net CTR кнопок социального шаринга на порядки выше — обязывает специфика.

  6. overbag

    Вот бы эту статью недельки 2 назад прочитать! А то помню очень долго я разбирался с этой кнопочкой, но всё таки кое как настроил.

  7. Дмитрий

    Спасибо! очень полезная статья
    Интересно, а есть ли подобный модуль для Drupal? Или как это все можно сделать в блоге на друпале?

  8. Евгений

    Хорошо рассказано, но я в итоге предпочел плагин Like 1.9.6 Мой шаблон просто устаревший и не поддерживает многих функций необходимых для качественной работы описанного в посте метода, решил пойти простым путем)))

  9. Андрей

    Здравствуйте! У Вас замечательный блог, добавил в закладки. Не подскажите как расположить лайки как у Вас на странице?

  10. Виталий

    Сделал все как описано указанием принудительно в всех дынне, нажимаешь Мне нравится, всеравно друзьям постится не то что указал. И ещё кроме title хотел краткий анонса передать на стену, но не знаю как 🙁 Т.е. как у вас это работает на сайте в этой статье когда жмешь facebook like

  11. Михаил

    Спасибо за информацию, уже применил у себя на сайте!

  12. Марика

    Добрый день! Очень прошу помогите настроить… вы пишите в статье

    Поставим этот код на сайт. Как нетрудно заметить, анонс, заголовок и картинка выбираются Фейсбуком произвольно. Зачастую не так, как этого вам хотелось бы. Например, в остах без картинок для анонса может быть взято изображение счётчика или кнопка Фидбернера. Разумеется, это не способствует кликабельности поста. Поэтому продолжим настройку. Дополнительные параметры для постинга в Фейсбук вебмастер может задатьс помощью специальных мета тегов. Настроить их вам также поможет таже ссылка: http://developers.facebook.com/docs/reference/plugins/like/

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

    или где это делается? пожалуйста не первый день мучаюсь((((

  13. дмитрий

    Картинка по умолчанию выбирается пустая, что только не делал, устанавливал open graph, facebook like button и другие, указывал в ней адрес картинки, и даже танцевал с бубном, все равно пустая! В чем может быть дело!?



Раздел: Социальные сети, SMM/SMO, Автор: Alex Hodinar
|