Домой / Блоговедение / Twitter Cards что это? И для чего нужно встраивать его на сайт?

Twitter Cards что это? И для чего нужно встраивать его на сайт?

twitter cards
twitter cards

Что такое 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
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:

Card validator
Card validator

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

мой пост в Twitter
мой пост в Twitter

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

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

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

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже 🙂

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

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



Про Валерий Бородин

Проверьте также

лайфхаки ютуба

Лайфхаки ютуба, которые изменят вашу онлайн жизнь!

Самые нужные лайфхаки ютуба для ютубера! Здравствуйте, уважаемые друзья и гости блога! Сегодня хочу вам …

  • https://alexshchukin.ru Алексей Щукин

    Эх, такую бы фишку к блогу на wordpress прикрутить, было бы классно.

    Случайно не знаете как это сделать?

    • https://pribylwm.ru/ Валерий Бородин

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

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу