Делаем Twitter Cards для DataLife Engine

Встраиваем расширенный контент в твиты, содержащие ссылку на ваш сайт. Многие наверняка встречались с подобным в 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.

 Вариант простой без правки кода — смешивание Twitter Cards и Open Graph

{headers}

[aviable=showfull]

[/aviable]

 Вариант простой с правкой кода скрипта — смешивание Twitter Cards и Open Graph

$social_tags['url'] = $full_link;

$social_tags['description'] = htmlspecialchars( $row['descr'], ENT_QUOTES, $config['charset'] );

{headers}

[aviable=showfull]


[/aviable]

*вместо VtopSearch добавьте своё name в Twitter-е

Теперь для тех кто не ищет лёгких путей, делаем всё по Твиттерски…

 Вариант расширенный — добавляем все мета-теги для Twitter

$social_tags = array();

$twitter_tags = array();

$s_meta = "";

$t_meta = "";

$metatags = 

if ( count($twitter_tags) ) {

foreach ($twitter_tags as $key => $value) {

		$t_meta .= "n";
	}	
}

{$s_meta}

{$s_meta}{$t_meta}

$social_tags['url'] = $full_link;

$twitter_tags['card'] = 'summary';
$twitter_tags['creator'] = '@VtopSearch';
$twitter_tags['title'] = htmlspecialchars( $row['title'], ENT_QUOTES, $config['charset'] );
$twitter_tags['description'] = htmlspecialchars( $row['descr'], ENT_QUOTES, $config['charset'] );

if ( count($images) ) $social_tags['image'] = $images[0];

if ( count($images) ) $twitter_tags['image'] = $images[0];

Не забываем:
К сожалению, недостаточно просто добавить теги. Необходимо зааппрувить одобрить сайт для использования выбранного типа карточек.
После того, как мета-теги добавлены, идем в валидатор, выбираем нужный тип карточки, переходим на вкладку Validate & Apply и там вставляем ссылку на страницу с прописанными мета-тегами и Жмете Request Approval. Через несколько минут Вашу карточку одобрят.

Реализовал Twitter Cards для DLE VtopSearch описание Twitter Cards взято с Хабра

Пошаговая инструкция Approval Twitter Cards от VtopSearch в картинках: