• Автор:

    Flesha
  • Добавлено:

    окт 07, 2014
  • Комментариев:

    0
  • Просмотров:

    2 193

Twitter Cards для DataLife Engine

Twitter Cards для DataLife Engine

Многие наверняка встречались с подобным в Facebook или ВКонтакте. Вы расшариваете в соц.сеть некую ссылку, а помимо нее туда автоматически подгружается, например, заголовок, описание или изображение. Поддержка технологии для VK и FB сейчас не является редкостью, а Twitter Cards встречаются не так часто, особенно в рунете. Статья поможет узнать как встроить расширенный контент в твиты, содержащие ссылку на ваш сайт.

Twitter Cards для DataLife Engine


Итак, 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 символов в карточке и изображение с большей вероятностью привлекут пользователя к хорошему сайту, нежели просто твит со ссылкой.

Twitter Cards для DataLife Engine


Используемая разметка основана на стандарте 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]
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@VtopSearch" />[/aviable]


Вставляем вверху шаблона fullstory.tpl:
<meta name="og:description" content="{full-story limit='200'}" />


*вместо 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}


Добавляем так:
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@VtopSearch" />


Или лучше так:
[aviable=showfull]
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@VtopSearch" />
[/aviable]


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

Теперь для тех, кто не ищет лёгких путей, делаем всё по Твиттерски:
Вариант расширенный - добавляем все мета-теги для Twitter-е.
1. Открываем файл engine/engine.php и ищем:
$social_tags = array();


Ниже добавляем:
$twitter_tags = array();


Далее ищем:
$s_meta = "";


Ниже добавим:
$t_meta = "";


Дальше ищем:
$metatags = <<<HTML


И ВЫШЕ добавляем:
if ( count($twitter_tags) ) {

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

$t_meta .= "\n<meta name=\"twitter:{$key}\" content=\"{$value}\" />";
}
}


Ниже ищем:
{$s_meta}


И заменяем на:
{$s_meta}{$t_meta}


2. Открываем файл engine/modules/show.full.php и ищем:
$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'] );


*вместо VtopSearch добавьте своё name в Twitter-е
Ищем далее:
if ( count($images) ) $social_tags['image'] = $images[0];


Ниже добавляем:
if ( count($images) ) $twitter_tags['image'] = $images[0];


Реализовано все не совсем по законам программирования и чистоты кода, просто стремились не редактировать и менять строки кода, а только добавлять.

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

Версия DLE: 10.х
Автор: VtopSearch
Сайт: myseogid.ru dle
Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.