Как опубликовать запись с блога в Facebook с картинкой на всю ширину

  Автор:
  6386
Как опубликовать запись с блога в Facebook с картинкой на всю ширину

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

Внимание! Если Ваш блог создан на шаблоне AB-Inspiration, то Вам нужно просто обновиться до новой версии AB-Inspiration 4.14. В шаблоне уже эта функция включена.

Вообще я решила описывать все, что встраиваю в шаблон AB-Inspiration не просто фактами, что это есть в шаблоне, а как я это сделала. Во-первых это покажет какая работа проделана с шаблоном — это для тех, кто хочет знать немного больше, чем просто пользоваться шаблоном AB-Inspiration, во-вторых мой опыт будет полезен тем, кто настраивает свой блог самостоятельно, не на шаблоне AB-Inspiration, а на любом другом шаблоне для WordPress.

Итак, вернемся к теме «Как опубликовать запись с блога в Facebook с картинкой на всю ширину».

Когда Вы нажимаете кнопку «Поделиться» у Вас всплывает окно в котором сформирован анонс для отправки в Вашу ленту. Анонс состоит из заголовка, нескольких строк текста и изображения.

На скриншоте ниже 2 примера отображения изображения.

1-е маленькое слева,
2-е на всю ширину.

Согласитесь, второй вариант гораздо выгоднее смотрится :).

10629667_729280053785805_2119467799562624558_n

За формирование анонса отвечают специальные метатеги, которые вставляются между тегами head в файле header.php. С помощью метатегов мы как бы связываем блог с социальными сетями.

Давайте заглянем на страницу в HTML коде, где уже установлены метатеги.

Нажмите на изображение, чтобы посмотреть его в большом размере.
meta

Как видите каждая строчка начинается с <meta property=»» content=»»>.

Каждый мета тег отвечает за конкретное содержание.
og:title — за заголовок,
og:description — за описание,
og:image — за изображение,
og:url — за ссылку.

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

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

За отображение картинки в анонсе отвечает метатег
<meta property=»og:image» content=»http://AdresBloga.ru/adres-izobrazhenia.jpg»>.
Чтобы на место content=»» подставлялось изображение из статьи нам нужно вставить следующий код:

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

Код нужно вставить в файле header.php между тегами head. (В шаблоне AB-Inspiration он уже вставлен.)

Разберем код по порядку.

Код делиться на 2 условия:
1. если в статье нет миниатюры, то в мета тег прописывается ссылка на изображение по умолчанию

$default_image='http://AdresBloga.ru/adres-izobrazhenia.jpg';
echo '<meta property="og:image" content="' . $default_image . '">';

Здесь в строчке $default_image=’http://AdresBloga.ru/adres-izobrazhenia.jpg’ нужно прописать полный адрес к изображению, которое будет включено в анонс в случае если в статье нет миниатюры. В шаблоне AB-Inspiration мы загружаем изображение по умолчанию в настройках шаблона в разделе вставки.

2. если есть миниатюра, в мета тег прописывается ссылка на миниатюру.

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '">';

Здесь ничего менять не нужно. За размер изображения в анонсе отвечает атрибут ‘full’ в функции wp_get_attachment_image_src ()

Когда Вы загружаете изображение в статью, WordPress автоматически создает копии изображения в разных размерах. Всего их 4 — thumbnail, medium, large и full. Регулировать размеры (thumbnail, medium, large) можно в разделе «Настройки» — «Медиафайлы».

Снимок экрана 2014-10-08 в 20.45.03
Здесь Вы можете прописать, те размеры, которые Вам нужны.

‘full’ — означает полный размер, такой как Вы загрузили.

Когда мы прописываем в функции wp_get_attachment_image_src () аттрибут ‘full’ это значит, изображение, которое будет уходить в социальную сеть, будет того размера, который Вы загрузили как миниатюру в статью.

Если Вы хотите, чтобы уходило изображение определенного размера, укажите в коде вместо ‘full’ атрибут ‘thumbnail’, ‘medium’ или ‘large’, а сами размеры отрегулируйте в настройках медиафайлов.

Одно важное замечание. Загружаемое изображение должно быть прямоугольным. Фейсбук рекомендует наилучший размер 1200 Х 627. Если высота будет больше, в фейсбук изображение будет обрезано. А также ширина должна быть не меньше 600. Если изображение 600px в ширину, в высоту оно должно быть примерно 312px! Если изображение меньше, в анонсе оно не будет отображаться на всю ширину.

Буду рада Вашим комментариям и вопросам.

Как опубликовать запись с блога в Facebook с картинкой на всю ширину

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

  2. Виталий Котляров

    Анфиса, приветствую!
    Это просто Потрясающе!!!
    Совершенно не представляю, как Вам Это удается? Читая статью, ловлю себя на мысли, что каким то трепетным и нежным чувством проникаюсь к магии HTML (еще месяц назад для меня и понятия такого не существовало).
    Блоггинг, как в видимых проявлениях, так и в разрезе внутренней кухни, все более поглощает меня.
    Считаю, читателю важно давать не только качественный контент, но и достойную визуализацию. А для этого необходимо более глубинно понимать принципы формирования и настройки самих процессов преобразования (текста, фото, виде).
    Это очень полезная и важная информация.
    Благодарю за увлекательное вовлечение в процесс создания и продвижения блога! *THUMBS UP*

  3. Анфиса, у меня шаблон AB-Inspiration 4.14. Вы пишите, что «В шаблоне уже эта функция включена». А мои анонсы, почему-то, отображаются по-старому, с маленькой картинкой (моим портретом). Что мне нужно сделать?

    • Светлана,этот функционал работает с миниатюрой. Загрузите в каждую статью миниатюру размером не меньше 600 пикселей в ширину. Тогда Ваши статьи будут уходить с этим изображением.

      • Спасибо, Анфиса, за ответ. Я поняла так, что ставить картинки нужно, как на Вашем блоге? Или можно загрузить большую — 600 пикселей — а в статью вставить меньшего размера?
        Извините за непонятливость.

  4. Анфиса, здравствуйте. Опять я. Я загрузила в статью картинку размером 600х312 — как у Вас. Но на фейсбук всеравно идет все по-старому. В чем еще может быть причина? :(

    • Светлана, для отправки изображения в соц сети нужно загружать как миниатюру. Справа от редактора записей есть боковая колонка. Спуститесь чуть ниже и Вы увидите блок «Миниатюра записи».

      Нажмите на ссылку «Задать миниатюру». Дальше все как обычно, во всплывшем окне выберите картинку из бибилиотеки или загрузите новую. Затем нажмите на синюю кнопку справа «Задать миниатюру».
      Изображение появится справа в боковой колонке в редакторе статьи. Вот это изображение и будет отправляться в социальную сеть.

  5. Анфиса, огромная благодарность. увидела статью и тут же применила в действие. *BRAVO* *THUMBS UP* . Часто задавала себе вопрос: Как опубликовать запись с блога в Facebook с картинкой на всю ширину, а тут такой подарок!!!

  6. Здравствуйте! у меня версия 5.0, но картинки отправляются в фкйсбук маленькие. Я так понимаю, дело в настройках миниатюры. Я что- не совсем поняла про размер миниатюр. В моем понимании, миниатюра — это картинка размером 150х150, при подготовке статьи мы просто задаем — выбрать миниатюру, выбираем какую именно картинку хотим сделать минатюрой, и она устанавливается автоматически.. а Вы советуете загружать миниатюру 600 пикселей? Вот этот момент мне непонятен. И еще просьба. Было бы неплохо, если бы Вы написали статью, как подготовить картинку или фото для публикации на блоге ( может она есть, я просто не нашла?) Вот у меня, почему-то Гугл индексирует картинки, а Яндекс — нет. А почему — не знаю, хотя блогу уже 10 месяцев, вроде пора уж индексировать.

    • Ирина, по подготовке изображения есть статья — http://anfisabreus.ru/2014/09/podgotovka-izobrazheniya-k-publikacii-na-bloge/
      по поводу, почему картинка уходит маленькая — размер миниатюры на блоге будет зависеть от того, какой Вы выбрали в «Настройки шаблона» — «Настройка статей». На выбор есть 3 варианта: Маленькая (150/150), Средняя (300), Большая (640). Но загружать все равной нужно не меньше 600px.
      По поводу индексации в Яндекс, попробуйте вручную прописывать в картинках title (описание)

  7. Огромное спасибо за информацию! Очень пригодилась!

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