Что такое Twitter Cards? Для чего нужен механизм Twitter Cards? И как его встроить на свой сайт?

Здравствуйте, уважаемые друзья и гости блога! Сегодня с вами разберемся с таким нужным для любого вебмастера механизмом, как Twitter Cards. Из данного поста Вы узнаете все ответы на вопросы заданные в заголовке статьи и также научитесь встраивать на свой сайт этот необходимый атрибут любого сайта.

Ну, что друзья? Давайте приступать?

Приступим к изучению механизма Twitter Cards …

Что же за механизм такой – Twitter Cards?

Сначала давайте все же разберемся, что такое Twitter Cards?

Twitter Cards – это специальная разметка на вашем сайте для социальной сети Twitter, которая позволит вам быстро и безо всяких лишних движений отправлять свои посты в Twitter с помощью только лишь одного действия – вставив ссылку с вашего сайта в строку “Твитнуть”. После данного действия у Вас в аккаунте Twitter сразу появится краткий анонс вашей статьи с сайта. Удобно, не правда ли?!

Вот в двух словах о том, что такое за механизм – Twitter Cards.

Да, еще забыл …

Все это делается без применения каких либо вспомогательных плагинов и модулей, а просто с помощью добавления пары строк специального кода. Который, естественно я вам сейчас предоставлю и расскажу как и куда его нужно добавить на своем сайте!

Ну вот первые два вопроса мы с вами разобрали. Теперь идем дальше …

Код разметки Twitter Cards и встраивание его на сайт

Давайте с вами реализуем возможность для создания полноценного постинга в Twitter своих новостей посредством простановки только одной ссылки с сайта. Для этого существует специальная разметка, которую вам нужно встроить в код своего шаблона.

Будем рассматривать пример на сайте, который базируется на движке DataLife Engine, то есть DLE.

Да, еще забыл сказать, что наш пост в Twitter будет обязательно сопровождаться встраиванием картинки. Ну куда же без картинок?!

И выглядеть ваш пост в Twitter будет примерно вот так:

А если бы Вы сделали это без специальной разметки, которую мы с вами сейчас разберем, то у Вас запостилась бы просто голая ссылка и больше ничего! Сами понимаете всю важность момента. Ведь на голую ссылку ни кто внимания даже не обратит, нежели крупная картинка с описанием и ссылкой на ваш сайт. Правда же?!

Вот так выглядит сам код механизма Twitter Cards, который вам нужно встраивать в шаблон своего сайта:

[aviable=showfull]
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@nickname on twitter" />
[/aviable]

Его вам нужно встроить в файл main.tpl, который находится в папке вашего рабочего шаблона. Откройте на хостинге данный файл и вставьте этот код в самом верху после тега {headers}.

Далее найдите в вашем шаблоне вот этот файл fullstory.tpl и откройте его. Тут вам нужно вставить вот этот код в самом верху:

<meta name="og:description" content="{full-story limit='200'}" />

Да … И не забудьте обязательно изменить в первом коде вот эту строку “@nickname on twitter” на свой ник, который у Вас в Twitter.

Теперь вы можете зайти на страницу сервиса Card validator, где можно проверить как будет выглядеть ваш пост в Twitter по ссылке с вашего сайта.

Вот скриншот сервиса Card validator:

А вот так выглядит мой пост в Twitter в сервисе Card validator после применения на сайте разметки, которую я вам предлагаю сделать у себя:

Ну, что друзья? На этом хочу закончить свое повествование о прекрасном механизме Twitter Cards для успешного размещение своих постов с сайта на DataLife Engine в аккаунте Twitter. Всем успехов и удачи!

Плохого не посоветую!!! И как всегда …

Если вам понравился материал пожалуйста сделайте следующее…

1. Поставьте «лайк».

2. Сделайте ретвит.

3. Поделитесь этим постом с друзьями в социальных сетях.

4. И конечно же, оставьте свой комментарий ниже

Спасибо за внимание!

Всегда ваш Валерий Бородин