Оптимизация сайта под Facebook

Оптимизация сайта под Facebook
24.05.2011 Алексей Малыгин

Некоторое время назад Facebook расширил функционал кнопки Like, сделав из нее полную замену кнопки Share. Это значит, что после нажатия кнопки Like, на стене пользователя появляется анонс статьи с картинкой.

Одно есть одно “НО”. При использовании кнопки Share, пользователь мог сам выбирать картинку для анонса, а в функционале кнопки Like такой возможности нет.

Как итог – наблюдаем в анонсе часто совсем не ту картинку, которая принадлежит отмеченной записи, а что-то совершенно стороннее, вплоть до рекламных баннеров.

Так вот, решение проблемы все же есть. Не такое простое, как хотелось бы, но сделав один раз – работать будет отменно.

В этом нам поможет протокол Open Graph, который является частью Facebook API. Протокол имеет великое множество мета-тэгов, с помощью которых можно “рассказать” Facebook о правилах использования контента вашего сайта.

1. Создание приложения Facebook

Первое что нужно сделать – это создать приложение Facebook. Для этого переходим на страницу разработчиков и следуем начальным инструкциям. Все что нам сейчас нужно – это запомнить Application ID, который не один раз нам понадобится дальше.

2. Редактирование программного кода

Ниже я буду упоминать WordPress, но все тоже самое справедливо для сайта на любой другой CMS. Главное найти нужное место для вставки кода и предварительно сделать резервные копии редактируемых файлов.

Итак, заходим в административную панель WordPress, открываем файл header.php, где

>

меняем на следующий код

 

Теперь пришла очередь вставки Openg Graph тэгов. В этом же файле, в любом удобном для вас месте, между тэгами <head> и </head> вставляем такой кусок кода:

<!--?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?-->  
<!-- the default values -->  
 
<!-- if page is content page -->  
<!--?php if (is_single()) { ?-->  
"/&gt;  
 
<!-- if page is others -->  
<!--?php } else { ?-->  
 
 <!--?php } ?-->

Не забудьте поменять следующие параметры:

  • Строка 3: вместо your_fb_app_id вставьте Application ID (см первый шаг)
  • Строка 4: вместо your_fb_admin_id необходимо вставить идентификатор, который получаем следующим образом. Перейдите по ссылке, нажмите на зеленую кнопку Статистика для вашего веб-сайта (Insight for your website). Идентификатор, стоящий после content – то что вам нужно.
  • Строка 19: Замените logo.png на логотип вашего сайта или любую другую картинку. Если статья не содержит изображений, то будет отображаться по умолчанию именно эта картинка.

И последнее что осталось – это вставить еще один скрипт на JavaScript. Здесь же, в header.php, сразу после тэга <body> вставляем следующее:

 

Где your_fb_app_id – это идентификатор приложения Application ID (см. первый шаг).

Сохраняем изменения!

3. Тестирование

Все, мы интегрировали Open Graph в наш проект. Чтобы убедиться в правильности работы, выполним два теста.

Тест 1: Просмотр исходного кода страницы

Перейдите на любую страницу вашего сайта и просмотрите исходный HTML-код страницы. Уведенное должно примерно соответствовать этому:

 

Тест 2: Проверка работы виджета Like

Если вы все еще не установили виджет с кнопкой Like, то сейчас самое время. Поместите следующий код в файл single.php (например до, или после основного контента):

 

Нажимаем на кнопку Like (Мне нравится) и созерцаем на своей стене Facebook красивый анонс статьи с нужной картинкой.

Конечно, если хорошо поискать, то можно найти готовые плагины под любую CMS, где вся интеграция уже сделана за вас. Но особо увлекаться плагинами тоже не стоит – это ведь дополнительная нагрузка на сайт. Тем более нет никаких гарантий, что плагин сделан качественно, правильно работает и не несет никаких деструктивных действий.

В описанном мною способе есть парочка “подводных камней”. Если кто-то на них напорется – я обязательно напишу дополнения и пояснения, если нет – то и слава Богу. :)

  • фон у твоего сайта гуд-)) фейс

  • Info

    ох спасибо тебе автор! за объяснение а то не как не мог допетрать что к чему что бы нормально лайкалось

  • У меня какая-то тупая кнопка получается. Плюс. — Вылазит эта идиотская панель добавить сообщение снизу и еще надо подтвердить нажатие а у вас нет! 

  • Можете объяснить почему у вас лично в коде страницы нет тегов?????? Уроки для того чтобы БЫЛО пишите?

  • Из-за вас время потеряла — верну кнопку какая была

    • @ElenaKusnetsova:disqus — если что-то не получается, лучше спокойно спросить. Расскажите по-порядку, какая панель и где вылазит. Лично у меня в данных тэгах нет необходимости, потому что работает и без них все корректно… но после того, как наткнулся на данную проблему в других проектах — выложил одно из решений здесь в виде статьи. 

  • Надо сразу ОПИСЫВАТЬ подводные камни. Вы что, издеваетесь?  Я потеряла 3 часа благодаря ВАШЕМУ «полезному уроку», в итоге — установила все же плагин!!!!!

    • @ElenaKusnetsova:disqus  — если не получается лично у вас, то это не значит что плохой урок и автор дурак. Для этого и существуют комментарии, электронный адрес автора для того чтобы задать вопрос и сообщить о своей проблеме. 
      Я же не телепат, чтобы спрогнозировать что же и у какого пользователя может не получиться. 
      Написано все доступно и просто… 
      Не получилось с первого раза — ничего страшного, давайте разбираться. 
      Напишите мне на email admin@magdamagla.com что конкретно и где не получилось, желательно с URL-ом сайта

  • Во первых — у вас нет кнопки подтверждения шаринга.
    То есть confirm! Во вторых картинка не отображается.   

    • @ElenaKusnetsova:disqus — поясняю, между кнопками Share и Like есть разница. Теперь уже можно сказать, что кнопка Share — это устаревший вариант, Like — новый. Разница в том, что Share — позволяет выбрать картинку перед расшариванием, появляется подтвержение и все такое. Like — сразу оставляет не просто ссылку, а целый анонс с картинкой.
      Я же об этом написал выше. 
      Картинка не отображается — это уже внутренние «приколы» wordpress. Надо разбираться в каждом конкретном случае. Универсального рецепта нет. 

  • Да я уже все теги из кода стерла…..

  • Автор, я бы на вашем месте просто разделил статью на две части: «для чайников» и «для продвинутых пользователей». В первом случае — предлагать просто какой-то примитивный плагин, во втором — описывать то что выше. 
    Пользователь сразу оценит кривость своих рук и выберет тот или иной вариант.
    А так, спасибо!

  • У меня в SHARE все отображается. Можно же в Platinum Seo поставить перезапись титлов. То есть, пробелы и кнопка просто возьмет первые  фразы из поста вместо description. А вот картинка как ни мучаюсь на разных страницах разная. Сколько плагинов ни ставила. И ручной код тоже — жестко прописывала картинку в опен-граф тегах все бесполезно. В последнем плагине даже есть возможность эту картинку опять же прописать программно но — та же песня!!!!

  • Привет!! Наконец то нашел самое грамотное описание, а то кругом бред написан с возможностью дальнейшего додумывания :)

    Имею несколько вопросов к тебе:

    1) есть сайт http://la-vision.ru/?page_id=116 хочу чтобы под каждой статьей были кнопки.

    2) Каждая статья должна вставлять свой the_title() в заглавия, которые отображаются на фейсбуке.

    3) Дескрипшен можно поставить и общий, или the_extrude.

    4) Картинка может быть общая, например логотип.

    Сам вопрос:

    Если поставить код написанный тобой выше, то все (по идее) должно работать отлично на странице single.php, но как сказать фейсбуку что описание должно быть the_extrude? Ведь the_extrude работать будет только в лупе.

    Тоже самое относится к the_title.

    Очень жду твоего ответа :)

  • Andrew

    Доброго времени. Нужная инфа. Только есть проблема(см изображение)