33,128 просмотров

Facebook, ВКонтакте и многие другие социальные сети позволяют сайтам распространять информацию о статьях, новостях и другом контенте среди пользователей сети. Самый простой вариант поделиться с друзьями ссылкой – использовать кнопки like (в русском варианте “мне нравится”).

Поставить кнопку like себе на сайт очень просто, используя эту страницу. Более подробные инструкции можно найти здесь:

shakin.ru — Как добавить Facebook на свой сайт
blogproblog.com — Добавляем кнопку Мне нравится в WordPress блог
vkontakte.ru — Добавление виджета "Мне нравится" от ВКонтакте

Одной интересной особенностью этих кнопок является то, что помимо заголовков страниц в анонсах публикуется также маленький тамбнейл (изображение) из статьи. Обычно для тамбнейла Facebook берет картинку со страницы, размерами не меньше 30х30 пикселей, но не всегда именно ту, которую хотел бы вебмастер или автор статьи.

Например, иногда получаются такие казусы:

Проблема с превьюшкой в Фейсбуке

Или такие (при приклеплении ссылки вконтакте):

Проблема неверного выбора изображения статьи со вставкой ссылки вконтакте

Разработчики социальных сетей предусмотрели этот вариант и предлагают вебмастерам использовать мета-теги Open Graph для точного задания как изображения анонса, так и заголовка, адреса статьи или описания.

Таким образом, чтобы решить проблему с неверно выбранным изображением, можно использовать такой мета-тег (между тегами <head>):

<meta property="og:image" content="http://www.mysite.ru/article_image.jpg"/>

При этом, путь к картинке должен быть абсолютным, с указанием адреса сайта.
Также можно использовать и другие полезные теги Open Graph:

<meta property="og:title" content="Заголовок статьи или новости"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://devaka.ru/articles/opengraph-for-like-buttons"/>
<meta property="og:image" content="http://devaka.ru/images/816.png"/>
<meta property="og:site_name" content="Devaka.ru"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content="Короткое описание для анонса ссылки."/>

И в тег <html> желательно добавить путь к xmlns:

<html xmlns:og="http://ogp.me/ns#">

Таким образом, задав все нужные мета-теги, нажатие кнопки like от фейсбука даже на странице комментариев или другой (с другим адресом статьи или с дополнительным параметром в адресе) будет корректно отрабатывать событие. Мета-тег og:image также может помочь отобразить нужную картинку при прикреплении ссылки вконтакте.

Протокол OpenGraph Добавить теги OpenGraph можно на той же странице, где вы добавляли кнопку Like от Фейсбука. Если вы используете WordPress, то для вас могут оказаться полезными плагины Open Graph или OpenGraph Meta. Для движка TextPattern используйте эти инструкции.

Подробнее о протоколе OpenGraph читайте здесь.

Подсказка: Очень полезным для просмотра og:разметки страницы или при смене картинки является инструмент URL Linter. Введите в форме адрес вашей страницы и смотрите, как Facebook будет воспринимать её, исходя из используемых мета-тегов.

Если вы хотите проверить, как работают эти OG теги в реальном времени, посмотрите исходный код этой страницы, а также нажмите кнопку “Мне нравится” :-)

  • 0 Нет
  • 740 Да
  • Мне понравилось!

Если вам понравилась статья, вы можете подписаться на RSS или E-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (Доставка от FeedBurner):