3.10.14, 16:10
0 комментарий
  DLE Хаки

Twitter Cards для DataLife Engine 10.х

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

Twitter Cards для DataLife Engine 10.х


Итак, 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 10.х


Используемая разметка основана на стандарте 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

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204