Как сделать так, чтобы в Твиттер вместе с твитом уходил полноценный анонс статьи

  Автор:
  7428
Репост в Твиттер с фото

Когда мы кликаем на кнопку Твиттер, чтобы поделиться статьей в Твиттер аккаунте, мы может отправить не больше 140 знаков + ссылка на статью. Как правило отправляется только заголовок статьи.

Но в Твиттер Вы наверняка замечали, есть твиты с более подробной информацией о статье. Как правило такие твиты сопровождаются ссылкой «Показать сводку».

twitter-svodka

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

svodka-twit

В этой статье я расскажу, что нужно сделать, чтобы Ваши статьи тоже уходили в Твиттер в таком виде. Предполагается, что у Вас уже установлена кнопка Твиттер на блоге.

Внимание! Для пользователей шаблоном AB-Inspiration. В новую версию шаблона AB-Inspiration это новшество уже включено. Все что нужно это обновить шаблон до новой версии 4.14, отредактировать файл robots.txt, и отправить запрос в Твиттер на занесение блога в «белый лист». Что именно нужно включить в файл robots.txt и как отправить запрос я расскажу в конце статьи. Вы можете пропустить техническую часть и перейти сразу к «Как открыть Твиттер доступ к изображениям» и «Как занести блог в белый список Твиттер»

Как и в случае с facebook за отображение анонса отвечают специальные метатеги (Как опубликовать запись с блога в Facebook с картинкой на всю ширину).  Метатеги для Твиттер в html коде выглядят так:

twittermeta

Здесь, в примере показано, как создать анонс с изображением на всю ширину. За тип анонса отвечает тип карты — summary_large_image. Если Вы хотите попробовать другие типы анонсов, подробнее об этом можно почитать на официальном сайте твиттер: https://dev.twitter.com/cards/types

В этой статье мы разберем именно анонс с большим изображением, тип карты — summary_large_image.

Вставка метатегов Twitter в Head

Итак, в файле header.php между тегами head нужно вставить следующий код:

<meta name="twitter:site" content="@anfisabreus">
<meta name="twitter:creator" content="@anfisabreus">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php the_title(); ?>">

<meta name="twitter:description" content="<?php while (have_posts()):the_post();
$out_excerpt = str_replace(array("\r\n", "\r", "\n", "'" ,"\""), "", get_the_excerpt());
echo $out_excerpt; endwhile; ?>">

<?php if(!has_post_thumbnail( $post->ID ))
{
$default_image='http://AdresBloga.ru/adres-izobrazhenia.jpg';
echo '<meta name="twitter:image:src" content="' . $default_image . '">';
}
else
{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '<meta name="twitter:image:src" content="' . esc_attr( $thumbnail_src[0] ) . '">';
} echo "\n"; ?>
<meta name="twitter:image:width" content="435">
<meta name="twitter:image:height" content="375">

Давайте разберем код поподробнее:

<meta name="twitter:site" content="@anfisabreus">
<meta name="twitter:creator" content="@anfisabreus">

Здесь нужно заменить anfisabreus на свой логин в Твиттер. В шаблоне AB-Inspiration пользователи прописывают логин Твиттер в настройках шаблона в разделе «Вставки».

<meta name="twitter:site" content="summary_large_image">

Этот метатег оставляем как есть, если хотите, чтобы в твиттер уходил анонс с большой картинкой.

<meta name="twitter:title" content="<?php the_title(); ?>">

Здесь ничего менять не нужно. Функция the_title() автоматически подставит заголовок Вашей статьи

<meta name="twitter:description" content="<?php while (have_posts()):the_post();
$out_excerpt = str_replace(array("\r\n", "\r", "\n", "'" ,"\""), "", get_the_excerpt());
echo $out_excerpt; endwhile; ?>">

Здесь много кода :), его задача взять первые строчки статьи. Ничего менять не нужно.

<?php if(!has_post_thumbnail( $post->ID ))
{
$default_image='http://AdresBloga.ru/adres-izobrazhenia.jpg';
echo '<meta name="twitter:image:src" content="' . $default_image . '">';
}
else
{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '<meta name="twitter:image:src" content="' . esc_attr( $thumbnail_src[0] ) . '">';
} echo "\n"; ?>

Эта часть кода отвечает за вывод изоабражения. Я подробно разбирала этот код в предыдущей статье — Как опубликовать запись с блога в Facebook с картинкой на всю ширину.

Здесь нужно заменить адрес изображения, которое будет по умолчанию, если в статью не вставлена миниатюра. Пользователи шаблона AB-Inspiration загружают это изображение в настройках шаблона в разделе «Вставки»

<meta name="twitter:image:width" content="435">
<meta name="twitter:image:height" content="375">

Эти строчки задают размер изображения. Их можно оставить как есть.

Как открыть Твиттер доступ к изображениям

Еще один важный момент — нужно открыть Твитер ботам доступ к изображениям. Для этого нужно прописать разрешение в файле robots.txt

Редактирование файла robots.txt через хостинг

1. зайдите на хостинг в корневую папку блога
2. найдите файл robotx.txt
3. откройте его для редактирования и впишите следующую строчку:

User-agent: Twitterbot
Allow: /wp-content/uploads/

Редактирование файла robots.txt через админку блога

Эта инструкция подходит для пользователей шаблоном AB-Inspiration и всем, кто установил плагин All In One Seo Pack. Этот способ поможет отредактировать файл robots.txt в админке блога.

1. Зайдите в админку блога
2. передите в меню в раздел «Инcтрументы SEO» — «Другие модули»
3. найдите блок «File Editor» и нажмите «Activate»
Снимок экрана 2014-10-09 в 18.20.17
4. у вас появится дополнительное меню «File Editor» — перейдите в него
seo
5. убедитесь, что открыта вкладка «Robots.txt»
robots

6. вставьте код в самом низу

User-agent: Twitterbot
Allow: /wp-content/uploads/

7. нажмите «Update robots.txt» кнопку внизу.

Как занести блог в белый список Твиттер

И еще один маленький момент — занесение Вашего блога в белый список Твиттер. Для этого передите в Твиттер валидатор: http://cards-dev.twitter.com/validator. Вставьте в поле ссылку на ваш блог, и нажмите на кнопку «Preview card».

На экране Вы увидите вот такую запись — «АдресВашегоБлога.ru is no whitelisted».

twittercard

Нажмите на кнопку «Request Approval». Это небходимо для проверки блога и заненсение его в белый список. На проверку может понадобиться некоторое время.

Через пару часов снова зайдите в Твиттер валидатор и вставьте в поле адрес статьи. Если все сделано правильно, Вы увидите справа предпросмотр анонса.
validatortwitter

Ну что ж, теперь можно все протестировать в действии. Отправьте любую Вашу статью в Твиттер. Зайдите в Твиттер аккаунт и нажмите на ссылку «Показать сводку». Кстати, все Ваши старые твиты, тоже дополнятся анонсами статей :).

Теперь Ваши фаловеры в Твиттер аккаунте будут видеть не только Твит из 140 знаков со ссылкой на статью, но и полный анонс статьи (как в facebook или google+).

Мой блог тоже сделан на шаблоне AB-inspiration и сейчас на нем установлена последняя версия. Поэтому  Вы можете протестировать этот механизм прямо сейчас. Кликните по кнопке Твиттер и отправьте эту статью в свой аккаунт. Затем посмотрите, как Ваш твит будет выглядеть в Вашем аккаунт в Твиттер.

Если У Вас что-то не получилось, пишите в комментариях. Буду рада помочь.

Как сделать так, чтобы в Твиттер вместе с твитом уходил полноценный анонс статьи

   13 голосов
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Комментарии на блоге
24 комментария
  1. Lukas

    Благодарю, все настроил как вы писали, вот только не могу разобраться твиты с кнопкой «Показать сводку» по умолчанию у всех свернуты? Если так, то скорее мало шансов что кто то его развернет, точнее так: много шансов что кто-то его развернет. =)

  2. Lukas

    Снимаю свой предыдущий вопрос, но думаю другим будет полезно.
    В общем ответ таков: сводки (summary) задумывались быть скрытыми. Команда разработчиков задали тот же вопрос админу из twitter`а, кто-то даже пригрозился убрать кнопки со своих сайтов. Думаю нужно было про эту важную вещь написать хотя бы в валидаторе.

    https://twittercommunity.com/t/twitter-cards-validated-and-preview-ok-but-photos-not-are-pre-expanded/25702/2

  3. Анфиса, здравствуйте. Попробовал вставить вашими кодами твитты с картинками. Нет картинок, есть только серый квадратик слева и анонс… А если у записи нет миниатюры то вставляет картинку, которую указал, но криво (режет и растягивает)…
    Как быть и почему всегда проблемы, вы специально вредничаете?))) :(

    • Сергей, спасибо за эксперименты и проработку материала. Да уж, ситуация. Посмотрела одну из ваших статей в Твиттер и результат такой:

      ERROR: Fetching the page failed because the request timed out. (Не удалось получить данные, поскольку истекло время ожидания запроса)

      Это значит Twitter bot не смог зайти на страницу (либо она не доступна, либо стоит запрет по ip).

      Посмотрела на западных форумах подобная проблема встречается у тех, у кого на хостинге есть запрет по IP.
      1. Проверьте файл .htaccess
      2. если в файле .htaccess нет запрета по ip, то нужно обратиться на хостинг спросить у них.

      Вот одно из обсуждений этой темы на твиттер форуме:
      https://twittercommunity.com/t/twitter-cards-error-fetching-the-page-failed-because-the-request-timed-out/50560/10

  4. милана

    Здравствуйте Анфиса! Я все сделала по инструкции, через время проверяю, а статья так и не выходит анонсом, фото прикрепила в вк комментариях

    • Милана, посмотрела ваш блог. В коде вижу следующие ошибки.
      1. у вас очень старый шаблон AB-Inspiration. Вы используете версию 4.16, а сейчас уже вышла 6.0.26
      2. не заполнена страница настроек шаблона Вставки. Эта самая важная страница для настроек. Без нее не будут работать социальные сети.
      3. у вас изображение вставлено не как миниатюра. В код подставляется именно миниатюра записи. Если вы просто вставили изображение в статью, она не отобразится в коде, соответственно не уйдет в твиттер.
      Очень важно все настроить по инструкциям. Все инструкции находятся в клубе. После покупки шаблона AB-Inspiration вы должны были зарегистрироваться в клубе.
      Если у вас есть вопросы по инструкциям и настройке шаблона, обратитесь пожалуйста в тех поддержку по скайпу: mlmproekt.ru. Также очень важно обновить шаблон до последней версии. Только после обновления и полной настройки по инструкциям можно будет тестировать отправку в социальные сети.

      • милана

        У меня вроде получилось, в валидаторе все правильно отображается и картинка и текст, но вот когда публику в твиттер анонса нет, просто ссылка! Почему так не могу разобраться

        • Теперь вы поменяли шаблон :). В коде не вставлены мета для изображений. Прочитайте еще раз статью и делайте все по инструкции. Все получится. Ничего не пропускайте в коде.

          • милана

            Шаблон поменяла потому что он на русском, а у меня сайт для англоязычных пользователей. У меня проблема опять в другом, уже весь интернет перелазила, не могу понять, анонс публикуется все хорошо, но картинка уходит не с поста а та адрес которой указан в коде, пробовала загружать миниатюру, но все ровно та же картина, а в твиттере очень хочется красивые посты публиковать, прошу вас очень помогите мне разобраться

Комментарии в Фейсбук
Комментарии в Вконтакте