Многие наверняка встречались с подобным в Facebook или ВКонтакте. Вы расшариваете в соц.сеть некую ссылку, а помимо нее туда автоматически подгружается, например, заголовок, описание или изображение. Поддержка технологии для VK и FB сейчас не является редкостью, а Twitter Cards встречаются не так часто, особенно в рунете. Статья поможет узнать как встроить расширенный контент в твиты, содержащие ссылку на ваш сайт.
Итак, Twitter Cards (дальше будем называть карточками для удобства) позволяют встраивать контент с сайта в твиты. Но они бывают разных типов: Summary Card — стандартная карточка с заголовком, описанием и изображением.Summary Card with Large Image — та же самая Summary, только больший акцент сделан на изображении.Photo Card — тут все и так ясно, фотокарточка.Gallery Card — мини-галерея из четырех изображений.App Card — карточка приложения в App Store или Google Play.App Installs and Deep-Linking — установка приложения при необходимости и deep-linking (если я верно понял, подразумевается переход в указанное приложение).Player Card — карточка с медиа-плеером.
Product Card — карточка товара (для интернет-магазинов).
Мы будем рассматривать Summary Card.Twitter Cards или Expanded Tweets позволяют уместить в одном твите больше информации, чем обычно. Помимо текстовой информации поддерживается также графическая и аудио/видео. Поддержка реализована как в официальных twitter-клиентах, так и во многих сторонних. Эта дополнительная информация подгружается только когда пользователь нажмет под твитом с ссылкой кнопку Expand/Details (кнопка зависит от используемого клиента), то есть лента не будет захламлена, даже если каждый твит будет содержать расширенную часть.
Разъясним значения тегов:
twitter:card — тип карточки. В данном случае можно опустить, так как summary идет по-умолчанию.twitter:creator — твиттер автора (контента, сайта).twitter:title — заголовок. До 70 символов.twitter:description — описание. До 200 символов.
twitter:image — ссылка на изображение. Обязательно абсолютная.
Нетрудно понять, что 120 символов самого твита (минус 20 на ссылку), 270 символов в карточке и изображение с большей вероятностью привлекут пользователя к хорошему сайту, нежели просто твит со ссылкой. 
Используемая разметка основана на стандарте Open Graph. Он используется, например, VK и FB. Официальная документация. Единственное отличие — вместо twitter:title, twitter:description и twitter:image используются og:title, og:description, og:image и добавляется og:url, содержащий ссылку на страницу. К счастью, твиттер поддерживает смешивание Twitter Cards и Open Graph, без необходимости дублирования метатегов. Пример смешивания из документации. Если делать так, то заодно появятся карточки страниц и при постинге ссылок на них в другие соцсети.
В DLE присутствует Open Graph разметка, но непонятно почему в ней отсутствует значение мета-тега og:description.Теперь переходим к реализации Twitter Cards в CMS DataLife Engine:1. Вариант простой без правки кода — смешивание Twitter Cards и Open Graph…Редактируем шаблон main.tpl в админке, где после:
{headers}Добавляем:
[aviable=showfull]
[/aviable]Вставляем вверху шаблона fullstory.tpl:
*вместо VtopSearch добавьте своё name в Twitter-е.2. Вариант простой с правкой кода скрипта — смешивание Twitter Cards и Open Graph…
Редактируем только один файл engine/modules/show.full.php в котором ищем:
$social_tags['url'] = $full_link;Ниже добавляем:
$social_tags['description'] = htmlspecialchars( $row['descr'], ENT_QUOTES, $config['charset'] );Редактируем шаблон main.tpl в админке, в котором после:
{headers}Добавляем так:
Или лучше так:
[aviable=showfull]
[/aviable]*вместо VtopSearch добавьте своё name в TwitterТеперь для тех, кто не ищет лёгких путей, делаем всё по Твиттерски:Вариант расширенный — добавляем все мета-теги для Twitter-е.
1. Открываем файл engine/engine.php и ищем:
$social_tags = array();Ниже добавляем:
$twitter_tags = array();Далее ищем:
$s_meta = "";Ниже добавим
$t_meta = "";Дальше ищем:
$metatags =